Take advantage of the @ font-face directive properties to create character sets optimized for our typographic needs as well as to lighten the weight of fonts.
As is known, it @font-faceallows you to use custom fonts within a Web page. Among its properties, we examine Unicode-range, thanks to which we can set a limited set of Unicode characters for a given font. The advantages we have are at least two:
- We can avoid using some characters (eg Cyrillic characters or umlauts) included in specific font-family.
- We can specify a different font for each subset of characters. In fact, the rule @font-facecan be declared multiple times in the same style sheet.
This last point is useful even when a font does not have all the characters on the page. The following code shows a practical example:
<pre class=”brush: php; html-script: true”>
@font-face {
font-family: ‘custom’;
src: url(‘../fonts/quicksand/regular-webfont.woff’) format(‘woff’);
unicode-range: U+00-0A;
}
@font-face {
font-family: ‘custom’;
src: url(‘../fonts/quicksand/extended-webfont.woff’) format(‘woff’);
unicode-range: U+0A-FF;
}
</pre>
Note: before entering the Unicode-range property in detail , it is useful to know Unicode Chacacter Table: one of the simplest tools for identifying Unicode characters.
Let’s examine in detail the two cases in which we use unicode-range: typographical embellishment and optimization of resources.
The most suitable font
You may feel the need to set a specific font for a particular character (such as ” & “) or for a limited set of characters.
Following Dan Cederholm’s advice, we set a different type for the ” & “:
<pre class=”brush: php; html-script: true”>
@font-face {
font-family: ‘custom’;
src: url(‘../fonts/quicksand/quicksand-regular-webfont.woff’) format(‘woff’);
unicode-range: U+00-FF;
}
@font-face {
font-family: ‘custom’;
src: local(‘American Typewriter’), local(‘Apple Chancery’), local(‘Applegothic’), local(‘Brush Script MT’);
unicode-range: U+26;
}
h1{
font-family: custom, Arial, sans-serif;
font-size: 3.2em;
font-weight: normal;
}
</pre>
In our example, it unicode-rangeforces the browser to use the Quicksand font in the unicode range that goes from 00to FF(the character ΓΏ).
Replicating the rule it @font-facebecomes possible to use a different font for specific characters or for a precise Unicode interval. In the example, we set a local font for ” &” only.
The right font, only when needed
A different use of Unicode-range can be to save resources. In some cases, it is possible to divide the same font into two or more complementary sets: one including the characters in common use, the others with the characters of sporadic use. Further subset could be created for bold and italic characters.
Suppose, therefore, to extract two subsets from the Ubuntu font, we can manipulate the fonts using the free FontForge software.
We create two distinct fonts: Ubuntu-r.woff (regular) and Ubuntu-e.woff (extended). The second one will be taken from the browser only if necessary. Here is the CSS code:
<pre class=”brush: php; html-script: true”>
@font-face {
font-family: ‘ubuntu-custom’;
src: url(‘../fonts/Ubuntu-r.woff’) format(‘woff’);
unicode-range: U+00-FF;
}
@font-face {
font-family: ‘ubuntu-custom’;
src: url(‘../fonts/Ubuntu-e.woff’) format(‘woff’);
unicode-range: U+100-FFFF;
}
h1.{
font-family: ubuntu-custom, Arial, sans-serif;
font-size: 3.2em;
font-weight: normal;
}
</pre>
Below, however, two elements h1with characters belonging to the two different ranges:
<pre class=”brush: php; html-script: true”>
<h1>Designers & co.</h1>
<h1>ΕΛΛΞΔΑ</h1>
</pre>
The second title shows the inscription ELLADA in Greek letters. If you try to delete the title in Greek, the font Ubuntu-e.woff will not be picked up, with a saving of 92kb of resources.
Browser support
The behavior of browsers as often happens, is not homogeneous. Chrome and Safari correctly execute the task and pick up the font only if necessary; Explorer should correctly interpret the instructions from version 9; Firefox is not yet compatible, while Opera seems to overwrite the first rule @font-facewith the second one.
Given the differences in the behavior of browsers, it is advisable to provide fallback solutions (trivially the rules for the characters to be activated conditionally).
Online resources
An article from the Unify Community for more information on FontForge and how to reduce fonts.
