Now that you simply’ve chosen a font, let’s put it in your web site. Webfonts are outlined in CSS by way of the @font-face rule. If you happen to’re an internet developer, you’ve almost certainly written, copied and pasted, or on the very least seen an @font-face rule. For the sake of completeness, although, let’s shortly run by way of a primary instance:
Article Continues Beneath
@font-face {
font-family: Elena;
src: url(elena-regular.woff);
}This creates a brand new webfont household that may be referenced by way of the font-family or font shorthand property. However one thing’s lacking right here. When referencing a webfont in a font stack, at all times ensure to incorporate a minimum of one fallback font in case the webfont fails to load. Right here, if Elena fails to load, the browser will fall again on the generic serif font household:
p {
font-family: Elena, serif;
}We’ll speak extra about fallback fonts and the way they can be utilized to make your web site seem to load quicker in Chapter 3. For now, let’s preserve our fallback stack easy by together with solely the generic serif and sans-serif font households.
Making a font household with a number of kinds is completed by creating an @font-face rule for every fashion and utilizing the identical font-family identify. The next @font-face guidelines create a household with a traditional and daring fashion:
@font-face {
font-family: Elena;
src: url(elena-regular.woff);
font-weight: regular;
}
@font-face {
font-family: Elena;
src: url(elena-bold.woff);
font-weight: daring;
}You need to use this font household in your CSS by referencing the household identify and weight in your selectors. This is applicable the common fashion to paragraphs and the daring fashion to sturdy paragraphs:
p {
font-family: Elena, serif;
}
p sturdy {
font-weight: daring;
}Moreover font-weight, @font-face additionally accepts the font-style and font-stretch property descriptors, which outline kinds comparable to italic and condensed. All three property descriptors can be utilized to create a single font household with a number of kinds. Theoretically, this allows you to create a household containing 243 particular person kinds (9 font-weight values × three font-style values × 9 font-stretch values). In observe, nevertheless, you’re restricted to twenty-seven values, since some browsers don’t help font-stretch (Fig 2.1).
| Web Explorer 8 | Web Explorer Sept. 11 | Edge | Chrome | Firefox | Safari | Opera | Android System |
|---|---|---|---|---|---|---|---|
| No | Sure | Sure | Sure | Sure | No | Sure | No |
With luck, the remaining browsers will implement the font-stretch property quickly, and it is possible for you to to make use of all 243 font classifications.
The src descriptor tells a browser the place to get a font file. The earlier examples used a single font format, however you’ll typically see URLs to a number of font codecs mixed with format hints, that are appended after the URL utilizing the format("worth") syntax. Format hints inform the browser what the format of the font file at a given URL is.
@font-face {
font-family: Elena;
src: url(elena-regular.woff2) format("woff2"),
url(elena-regular.woff) format("woff");
}If you happen to checklist a number of codecs, fashionable browsers will choose the primary format they help primarily based on the format trace. Due to this fact, it’s vital to checklist webfont codecs within the order of finest compression to least. Regardless that format hints are elective, at all times embody them—they let the browser know in regards to the format with no need to obtain the font. For instance, if a browser doesn’t help WOFF2, however does help WOFF, it might probably skip the WOFF2 font file primarily based on the format trace.
Browsers help a number of webfont codecs: OpenType (TrueType), EOT, WOFF, and WOFF2. Some browsers additionally help SVG fonts, however they’re deprecated and will now not be used (and shouldn’t be confused with the brand new OpenType-SVG format). EOT, WOFF, and WOFF2 are technically not font codecs. They’re compressed OpenType information with various levels of compression. WOFF2 affords one of the best compression, adopted by WOFF and EOT (Fig 2.2).
| Format | Web Explorer 8 | Web Explorer Sept. 11 | Edge | Chrome | Firefox | Safari | Opera | Android System |
|---|---|---|---|---|---|---|---|---|
| WOFF2 | No | No | Sure | Sure | Sure | Sure | Sure | No |
| WOFF | No | Sure | Sure | Sure | Sure | Sure | Sure | Sure |
| OpenType | No | Sure | Sure | Sure | Sure | Sure | Sure | Sure |
| EOT | Sure | Sure | No | No | No | No | No | No |
In researching protection for all browsers, you could have come throughout one thing known as the bulletproof @font-face syntax by Fontspring. The bulletproof syntax makes use of EOT, WOFF2, WOFF, uncooked OpenType, and SVG font information for max browser protection:
@font-face {
font-family: Elena;
src: url(elena.eot?#iefix) format("embedded-opentype"),
url(elena.woff2) format("woff2"),
url(elena.woff) format("woff"),
url(elena.otf) format("opentype"),
url(elena.svg#elena) format("svg");
}The primary URL line would possibly look a bit of odd to you. Variations of Web Explorer 8 and beneath don’t help the syntax for a number of font codecs, and deal with all the worth of the src property because the URL. The bulletproof syntax methods Web Explorer 8 and beneath into considering that the remaining URLs are a part of the fragment identifier of the primary URL. As a result of fragment identifiers are ignored when downloading information, Web Explorer 8 and beneath merely use the primary URL. Browsers apart from Web Explorer will skip the road as a result of they don’t help EOT. The remainder of the entries are what you’d anticipate: font codecs listed so as of desire.
However is the bulletproof syntax nonetheless related? No. In actual fact, I feel it’s dangerous. SVG fonts are deprecated and solely supported by browsers which are now not in use. Most web sites help Web Explorer 9 and up, but the syntax lists EOT as the primary most well-liked font format. Regardless that Web Explorer 9 and up help WOFF, these variations will nonetheless obtain the EOT file, just because it’s listed first.
As a result of most web sites now not help previous browsers, I extremely suggest utilizing a simplified syntax. This simplified syntax covers all fashionable browsers, in addition to barely older ones which are nonetheless in lively use, comparable to Android 4.4 and earlier:
@font-face {
font-family: Elena;
src: url(elena.woff2) format("woff2"),
url(elena.woff) format("woff"),
url(elena.otf) format("opentype");
}Regardless that older Android variations are nonetheless used, worldwide reliance on these browsers is quickly dwindling. Quickly you’ll most likely be capable to drop the uncooked OpenType format as properly, and simplify the syntax even additional:
@font-face {
font-family: Elena;
src: url(elena.woff2) format("woff2"),
url(elena.woff) format("woff");
}On this case, somebody operating an older browser will merely see your fallback fonts as a substitute of the webfont. That’s fantastic; they’ll nonetheless learn the content material within the fallback font. (Extra on fallback fonts later.)
There’s one other attainable worth for the src descriptor. The native operate takes the identify of a neighborhood font household. If the font occurs to be put in on the system, the browser will use that as a substitute, thereby avoiding an additional obtain.
@font-face {
font-family: Elena;
src: native("Elena"),
url(elena-regular.woff2) format("woff2"),
url(elena-regular.woff) format("woff");
}Whereas this may increasingly appear to be an incredible optimization, nothing ensures that the native font matches your webfont. You might get a distinct model of the font, a font with completely different language help, and even a wholly completely different font. For that cause, I normally suggest not utilizing the native operate until you discover these downsides acceptable.
This excerpt from Webfont Handbook will enable you to get began. Order the complete copy at the moment, in addition to different wonderful titles from A E-book Aside.
