The 0 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. Show 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. Table of contentsGeneral browser supportThis browser support data is from , which has more detail. A number indicates that browser supports the feature at that version and up. DesktopChromeFirefoxIEEdgeSafari43.59123.2Mobile / TabletAndroid ChromeAndroid FirefoxAndroidiOS Safari10910944.2-4.3Practical level of browser supportThings are and , so we can probably get away with:
You could probably even get away with just WOFF2 these days.
This browser support data is from , which has more detail. A number indicates that browser supports the feature at that version and up. DesktopChromeFirefoxIEEdgeSafari3639No1412Mobile / TabletAndroid ChromeAndroid FirefoxAndroidiOS Safari10910910910.0-10.2The only practical thing also using WOFF buys you is Internet Explorer 11 support. Deepest possible browser supportThis is the method with the deepest support possible right now. The 0 rule should be added to the stylesheet before any styles.
Then use it to style elements like this:
Slightly deeper browser upportIf you need a sort of a happy medium between full support and practical support, adding a 2 will cover a few more bases: ChromeSafariFirefoxOperaIEAndroidiOS3.5+3+3.5+10.1+9+2.2+4.3+Alternative techniques
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2');
} |