Home / Articles / Programming languages / Markup languages / HTML & CSS / Web fonts with CSS @font-face rule in detail

Web fonts with CSS @font-face rule in detail

Web fonts with CSS @font-face rule in detail
 
Web fonts with CSS @font-face rule in detail
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


The current article in detail describes @font-face rule in CSS which is used for embedding custom fonts on websites without JavaScript.

The normal type of CSS rules, which can be generated by any online generator for applying fonts look like this:

@font-face {
    font-family: 'league_gothicregular';
    src: url('leaguegothic-regular-webfont.eot');
    src: url('leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguegothic-regular-webfont.woff2') format('woff2'),
         url('leaguegothic-regular-webfont.woff') format('woff'),
         url('leaguegothic-regular-webfont.ttf') format('truetype'),
         url('leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Let's examine this in detail, and whether or not it is worthwhile.

Font descriptor font-family

Here we specify the name of the font we need to input, which then, in turn, is set to the desired elements. For example, heading h1 is defined with the set font:

h1 {
  font-family: league_gothicregular;
}

The font name can be set as any value at your discretion. Quotation marks are required only for names that consist of more than one word.

Conclusion: generally required.

Font formats

By using the font descriptor src we set the URL of the embedded font where the font should be downloaded from. It needs no explanation why this option is also required.

Why so many formats?

The answer to this question lies with the table below which shows browser support of different formats.

Formats

Browser support

EOT

IE6+

WOFF

IE9+
Firefox 3.6+
Opera 11+
Chrome 6+
Safari 5.1+
Opera mobile 11+

TTF, OTF

Firefox 3.5+
Opera 10+
Chrome 4+
Safari 3.2+
Opera mobile 10+
iOS 4.2+
Android 2.2+

SVG

Opera 9+
Chrome 4+
Safari 3.2+
Opera mobile 10+
iOS
Android 3

So, the existence of such an abundance of formats is to cover all the browsers. But, the browser loads the first of the list which it is able to display (if the format is specified).

About font order

Because only the first font which is supported by the browser is loaded, it would make sense to specify fonts in order of increasing file size. Note that from the first glance all formats look the same. Although WOFF is the fastest (has the smallest file size), the first place has to go to EOT in order to avoid bugs in IE6-8.

Reducing entry

If the task is to work with the most popular browsers, then basically in CSS you are left with WOFF:

@font-face {
  font-family: league_gothicregular;
  src: url(leaguegothic-regular-webfont.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}

For IE6-8 to implement EOT is possible in a separate CSS which is connected via conditional comments in IE.

@font-face {
  font-family: league_gothicregular;
  src: url(leaguegothic-regular-webfont.eot);
  src: url(leaguegothic-regular-webfont.eot?#iefix) format('embedded-opentype');
}

And for mobile browsers connect separate CSS with TTF and SVG (for this, the server-side determines that the device is a mobile one, and then responds with appropriate CSS).

Why specify the format?

Declaration format tells the browser what font format is in the specified url. The browser by reading this declaration determines whether it is able to display the font. If yes, then the font is loaded, if not, then the browser doesn't load the current font, then the browser reads the consecutive @font-face line.

Let's consider a universe where you don't specify format, then browser loads all fonts from all that are available until it gets to the one that it can understand.

Conclusion: the use of the declaration is necessary if you are connecting more than one font format and we do care about the speed of page loading.

If you use a clear division of styles for different browsers then you can get rid of this declaration. For example, for modern browsers that support WOFF it is possible to reduce the rule as follows:

@font-face {
  font-family: league_gothicregular;
  src: url(leaguegothic-regular-webfont.woff);
  font-weight: normal;
  font-style: normal;
}

More about IE declaration

Firstly there are two of them. The first line (src: url(leaguegothic-regular-webfont.eot);) is for IE9. Second for IE6-8 (leaguegothic-regular-webfont.eot?#iefix), such a tricky entry is needed to fix a possible bug in IE, which can be clumsy in handling src. IE9 is good at understanding WOFF, thus, when connecting separate styles for IE6-8, it's ok to use only one line, and thus it is possible to remove the bug fix and format.

@font-face {
  font-family: league_gothicregular;
  src: url(leaguegothic-regular-webfont.eot);
}

Optimization drawback

In IE6-8 you'll have an additional request to the server: the browser will try to load the font from the main CSS file which contains a bug, the one mentioned above. The font won't be loaded, as a result IE loads EOT. Then it's up to you to priorities: modern browsers, or old "retards".

More about WOFF

WOFF advantages:

  1. It is a compressed format, is almost twice as small as any other.
  2. It has a relative protection - the font can only be used in the Web.
  3. It contains information about the origin of the font.

Why do we specify the font-style and font-weight?

To clearly define the style and boldness of the connected font. If only one font with style and boldness is connected, then these rules can be dropped. Of course, if the font style is equal to default values then: font-style: normal, font-weight: normal.

@font-face {
  font-family: league_gothic;
  src: url(leaguegothic-webfont.woff);
}

These rules are necessary when we connect several different typefaces of the same font. In situations like that, you can go astray by creating a couple of font names for different typefaces:

@font-face {
  font-family: league_gothicregular;
  src: url(leaguegothic-regular-webfont.woff);
}

@font-face {
  font-family: league_gothicbold;
  src: url(leaguegothic-bold-webfont.woff);
}

@font-face {
  font-family: league_gothicitalic;
  src: url(leaguegothic-italic-webfont.woff);
}

h1 {
  font-family: league_gothicbold;
}

p {
  font-family: league_gothicregular;
}

em {
  font-family: league_gothicitalic;
}

This, of course, will work but the mistake here is that different typefaces will use different font names, instead of conforming to the rules of CSS. This makes it difficult to read the code, support it, and the same way can lead to incorrect display of the element, if the font is not loaded (for example, the heading can stay "regular" instead of the required "bold").

It would be more correct to use fonts as follows:

@font-face {
  font-family: league_gothic;
  src: url(leaguegothic-regular-webfont.woff);
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: league_gothic;
  src: url(leaguegothic-bold-webfont.woff);
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: league_gothic;
  src: url(leaguegothic-italic-webfont.woff);
  font-style: italic;
  font-weight: normal;
}

h1 {
  font-family: league_gothic;
  font-weight: bold;
}

p {
  font-family: league_gothic;
  font-style: normal;
}

em {
  font-family: league_gothic;
  font-style: italic;
}

This code can be reduced by using default values. Here the code is written completely for better clarity.

What else can be added to @font-face

In the above examples not all possible rules were included, only those with present popularity. To complete the picture let's look at the rest.

Font descriptor font-stretch

Font descriptor font-stretch sets the width to characters. Used in @font-face, similar to font-style and font-weight. The default value is normal. There is not much sense in using it due to poor browser support.

@font-face {
  font-family: league_gothic;
  src: url(leaguegothic-regular-webfont.woff);
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
}

Declaration local

This declaration tells the browser that first it has to look for the desired font on the user's device and only if the desired is not found, then loads the font from the network. You can use a couple of locals, to specify all possible font typefaces in the system.

@font-face {
  font-family: league_gothic;
  src: local(LeagueGothic),
       local('League Gothic'),
       url(leaguegothic-regular-webfont.woff);
  font-style: normal;
  font-weight: normal;
}

When using this declaration stay cautious, because it may have problems working in some browsers.

Font descriptor unicode-range

With this we can specify the characters that we need, thereby reducing font file size which is to be downloaded. Characters can be listed with commas or specified with ranges. Characters are specified in Unicode:

@font-face {
  font-family: league_gothic;
  src: url(leaguegothic-regular-webfont.woff);
  unicode-range: U+41-5A, U+61-7A, U+C0-FF;
}

One disadvantage is its poor browser support.


 

Read also

Font size in HTML

Font size in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation