Font using @font-face

Question

css

Let's say there are four weights for the Ubuntu Family font: Regular, Bold, Italic, Bolditalic. I want to use @font-face in CSS. How to screw? Is it possible that each style separately... Then it will turn out something like this, duplicated 4 times (generated using @FONT-FACE GENERATOR )?

@font-face {
  font-family: 'UbuntuRegular';
  src: url('regular-webfont.eot');
  src: local('☺'),
  url('regular-webfont.woff') format('woff'),
  url('regular-webfont.ttf') format('truetype'),
  url('regular-webfont.svg#webfontVgT726QZ') format('svg');
  font-weight: normal;
  font-style: normal;
}

Maybe there is a way to somehow combine these four styles into one?

Answer 1

And the meaning of woff, truetype and svg? As far as I know, there are no browsers that only support woff, only svg.., so why bother?

Answer 2

I am for using Cufon. Font-face has a lot of nuances that are not so easy to solve.

Answer 3

<link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold,bolditalic&subset=cyrillic,latin' rel='stylesheet' type='text/css'>

And that's all.

Answer 4

Base64, if I understand correctly (datauri), is limited to ~ 20kb.
This may not be enough.
In addition, you somehow do not take into account that if you embed everything in CSS, then all options will be loaded (woff,ttf ... ) and only one will be used.
So upload as files.
You are unlikely to have so many fonts that the number of http requests to get them will affect the performance of the site.

Answer 5

Regarding the styles, as far as I understand, yes, they will have to be duplicated.
Do your styles come in separate files?
By the way, how does Ubuntu Family have anti-aliasing when using it as a web font?
If it's as bad as 99% of fonts, then you can also
try CUFON cufon.shoqolate.com/generate/
.
There are a lot of minuses, but in terms of appearance, it seriously wins.

Answer 6

In this discussion, everyone is confusing the font face and the font file.
Note that weight is a property of a font's pattern, such as straight, light, italic, bold. In CSS, they correspond to the font-style and font-weight properties.
A font file can include an arbitrarily large number of styles, even the entire family (typeface).
On the merits of the question, I would recommend to exclude the svg version of the font and stop at three files.