font-face rule allows custom fonts to be loaded on a webpage. Once added lớn a stylesheet, the rule instructs the browser to tải về the font from where it is hosted, then display it as specified in the CSS.

Bạn đang xem: Css @font

Without the rule, our designs are limited to the fonts that are already loaded on a user’s computer, which vary depending on the system being used. Here’s a nice breakdown of existing system fonts.

Practical level of Browser Support

Things are shifting heavily toward WOFF and WOFF 2, so we can probably get away with:


font-face font-family: "MyWebFont"; src: url("myfont.woff2") format("woff2"), url("myfont.woff") format("woff");You could probably even get away with just WOFF2 these days.


font-face font-family: "MyWebFont"; src: url("myfont.woff2") format("woff2");
This browser tư vấn data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version & up.


DesktopChromeFirefoxIEEdgeSafari
3639No1412

Mobile / TabletAndroid ChromeAndroid FirefoxAndroidiOS Safari
10210110110.0-10.2

The only practical thing also using WOFF buys you is IE 11 support.

Deepest Possible Browser Support

This is the method with the deepest support possible right now. The
font-face rule should be added to lớn the stylesheet before any styles.


font-face font-family: "MyWebFont"; src: url("webfont.eot"); /* IE9 Compat Modes */ src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("webfont.woff2") format("woff2"), /* Super Modern Browsers */ url("webfont.woff") format("woff"), /* Pretty Modern Browsers */ url("webfont.ttf") format("truetype"), /* Safari, Android, ios */ url("webfont.svg#svgFontName") format("svg"); /* Legacy ios */Then use it to lớn style elements lượt thích this:

body font-family: "MyWebFont", Fallback, sans-serif;

Slightly Deeper Browser Support

If you need a sort of a happy medium between full support and practical support, adding a .ttf will cover a few more bases:


font-face font-family: "MyWebFont"; src: url("myfont.woff2") format("woff2"), url("myfont.woff") format("woff"), url("myfont.ttf") format("truetype");

ChromeSafariFirefoxOperaIEAndroidiOS
3.5+3+3.5+10.1+9+2.2+4.3+

Alternative Techniques


importWhile
font-face is excellent for fonts that are hosted on our own servers, there may be situations where a hosted phông solution is better. Google Fonts offers this as a way to use their fonts. The following is an example of using
import khổng lồ load the mở cửa Sans fonts from Google Fonts:


import url(//fonts.googleapis.com/css?family=Open+Sans);Then we can use it to style elements:

body font-family: "Open Sans", sans-serif;If you mở cửa the URL for the font, you can actually see all the
font-face work being done behind the scenes.

A benefit of using a hosted service is that it is likely lớn include all the font tệp tin variations, which ensures deep cross-browser compatibility without having to host all those files ourselves.


ing a stylesheetSimilarly, you could links to the same asset as you would any other CSS file, in the of the HTML document rather than in the CSS. Using the same example from Google Fonts, this is what we would use:

Then, we can style our elements lượt thích the other methods:

body font-family: "Open Sans", sans-serif;Again, this is importing the
font-face rules but, instead of injecting them to our stylesheet, they are added to lớn our HTML instead.


It’s about the same thing… both techniques download the assets needed.

Understanding Font tệp tin Types

The original snippet at the vị trí cao nhất of this post references a lot of files with strange extensions. Let’s go over each one and get a better understanding of what they mean.

WOFF / WOFF2Stands for: Web mở cửa Font Format.

Created for use on the web, & developed by Mozilla in conjunction with other organizations, WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) & TrueType (TTF) fonts. This format can also include metadata & license info within the phông file. This format seems khổng lồ be the winner & where all browsers are headed.

WOFF2 is the next generation of WOFF and boasts better compression than the original.

Xem thêm: Phim Yêu Là Phải Xài Chiêu Full Hd? Im Yêu Là Phải Xài Chiêu Full Hd?

SVG / SVGZStands for: Scalable Vector Graphics (Font)

SVG is a vector re-creation of the font, which makes it much lighter in tệp tin size, and also makes it ideal for mobile use. This format is the only one allowed by version 4.1 và below of Safari for iOS. SVG fonts are not currently supported by Firefox, IE or IE Mobile. Firefox has postponed implementation indefinitely khổng lồ focus on WOFF.

SVGZ is the zipped version of SVG.

EOTStands for: Embedded xuất hiện Type.

This format was created by Microsoft (the original innovators of
font-face) và is a proprietary tệp tin standard supported only by IE. In fact, it’s the only format that IE8 & below will recognize when using
font-face.

OTF / TTFStands for: OpenType Font và TrueType Font.

The WOFF format was initially created as a reaction lớn OTF & TTF, in part, because these formats could easily (and illegally) be copied, However, OpenType has capabilities that many designers might be interested in (ligatures và such).

A cảnh báo on Performance

Web fonts are great for thiết kế but it’s important to also understand their impact on website performance. Custom fonts often cause sites to take a performance hit because the font must be downloaded before it’s displayed.

A common symptom used lớn be a brief moment where fonts first load as the fallback, then blink khổng lồ the downloaded font. Paul Irish has an older post on this (dubbed “FOUT”: Flash Of Unstyled Text).

These days, browsers are generally hiding the text before the custom phông loads by default. Better or worse? You decide. You can exert some control over this through various techniques. A little out-of-scope for this article, but here’s a trifecta of articles by Zach Leatherman to get you started down the rabbit hole:

Here are some more considerations when implementing custom fonts:

Watch the file sizeFonts can be surprisingly heavy, so lean towards options that offer lighter versions. For example, favor a font set that is 50KB versus one that weighs 400KB.

Limit the character set, if possibleDo you really need the bold và black weights for one font? Limiting your font sets to load only what is used is a good idea và there are some good tips on that here.

Consider system fonts for small screensMany devices are stuck on crappy connections. One trick might be khổng lồ target larger screens when loading the custom fonts using
media.

In this example, screens smaller than 1000px will be served a system font instead and screens that wide & above will be served the custom font.


media (min-width: 1000px) body font-family: "FontName", Fallback, sans-serif;

Font Services

There are a number of services that will host fonts và provide access lớn commercially-licensed fonts as well. The benefits of using a service often boil down to having a large selection of legal fonts delivered efficiently (e.g. Serving them on a speedy CDN).

Here are a few hosted phông services:

What About Icon Fonts?

It’s true,
font-face can load a font tệp tin full of icons that can be used for an icon system. However, I think you’re far better off using SVG as an icon system. Here’s a comparison of the two methods.

More Resources

Related


Almanac on Mar 25, 2020

font-display


*
*
*
*
*
*
*
*
*
*
Chris Coyier