Using @font-face | css font face
The@font-faceruleallowscustomfontstobeloadedonawebpage.Onceaddedtoastylesheet,theruleinstructsthebrowsertodownloadthefontfromwhereitishosted,thendisplayitasspecifiedintheCSS.Withouttherule,ourdesignsarelimitedtothefontsthatarealreadyloadedonauser’scomputer,whichvarydependingonthesystembeingused.Here’sanicebreakdownofexistingsystemfonts[1].PracticalLevelofBrowserSupportThingsareshiftingheavilytowardWOFF[2]andWOFF2[3],sowecanprobablygetawaywith:@font-face{font-family:MyWebFont;src:url(myfont.w...
The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.
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[1].
Practical Level of Browser SupportThings are shifting heavily toward WOFF[2] and WOFF 2[3], 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); } DesktopChromeFirefoxIEEdgeSafari3639No1412Mobile / TabletAndroid ChromeAndroid FirefoxAndroidiOS Safari94929410.0-10.2The only practical thing also using WOFF buys...