Optimize fonts with @ font.face and Unicode-range
Optimizing fonts with @font-face and unicode-range can significantly enhance your website's performance by reducing the number of characters loaded. Here's a detailed guide on how to do this:
1. Understanding @font-face and unicode-rang
@font-face: A CSS rule that allows you to define custom
fonts to be used on your website.
unicode-range: A descriptor used within @font-face to
specify the range of Unicode characters that the font should apply to.
2. Basic @font-face Usage
First, let's start with a basic @font-face rule:
|
CSS |
|
@font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff')
format('woff'); font-weight: normal; font-style: normal; } |
3. Using unicode-range
To optimize, you can define multiple @font-face rules for
different character sets. For example:
CSS
@font-face {
font-family: 'MyFont';
src:
url('myfont-latin.woff2') format('woff2'),
url('myfont-latin.woff')
format('woff');
unicode-range: U+0000-00FF;
/* Basic Latin */
}
@font-face {
font-family: 'MyFont';
src:
url('myfont-cyrillic.woff2') format('woff2'),
url('myfont-cyrillic.woff') format('woff');
unicode-range: U+0400-04FF;
/* Cyrillic */
}
@font-face {
font-family: 'MyFont';
src:
url('myfont-greek.woff2') format('woff2'),
url('myfont-greek.woff')
format('woff');
unicode-range: U+0370-03FF;
/* Greek */
}
4. Combining with Fallback Fonts
Always define fallback fonts for cases when the custom font
fails to load:
|
CSS |
|
body { font-family: 'MyFont', Arial,
sans-serif; } |
5. Example
Here's a complete example combining all the above elements:
|
HTML |
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Font Optimization</title> <style> @font-face { font-family: 'MyFont'; src:
url('myfont-latin.woff2') format('woff2'), url('myfont-latin.woff')
format('woff'); unicode-range: U+0000-00FF;
/* Basic Latin */ } @font-face { font-family: 'MyFont'; src:
url('myfont-cyrillic.woff2') format('woff2'),
url('myfont-cyrillic.woff') format('woff'); unicode-range: U+0400-04FF;
/* Cyrillic */ } @font-face { font-family: 'MyFont'; src:
url('myfont-greek.woff2') format('woff2'), url('myfont-greek.woff')
format('woff'); unicode-range: U+0370-03FF;
/* Greek */ } body { font-family: 'MyFont', Arial,
sans-serif; } </style> </head> <body> <p>This is a paragraph
with custom font applied.</p> <p>Пример текста на
кириллице.</p> <p>Παράδειγμα κειμένου
στα ελληνικά.</p> </body> </html> |
6. Tools to Generate Unicode Ranges
If your font files don't come pre-split by character ranges, you can use tools like Glyphhanger or Font Squirrel's Webfont Generator to subset your fonts.
7. Testing and Debugging
Ensure that your fonts load correctly by testing on various browsers and devices. You can use browser developer tools to check network requests and confirm that only the necessary font files are being downloaded.
By implementing @font-face with unicode-range, you can
significantly reduce the load time of your web pages, especially those with
diverse linguistic content.
0 Comments