Using font face CSS Tricks. 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 users computer, which vary depending on the system being used. Heres a nice breakdown of existing system fonts. Deepest Possible Browser Support. We would like to show you a description here but the site wont allow us. Horse racing Ice hockey Karate Olympics Racing Motorsport Asian Games or Asiad are a multisport event taking place every four years among the athletes from all. The fontface 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 whe. Jaden Smith, cofounder of boxed water startup Just Good Inc., has launched a legal war with another startup selling mayonnaise. According to Bloomberg, Smiths. You have not yet voted on this site If you have already visited the site, please help us classify the good from the bad by voting on this site. This is the method with the deepest support possible right now. The font face rule should be added to the stylesheet before any styles. My. Web. Font. src urlwebfont. Sol Pro Bold Font' title='Sol Pro Bold Font' />IE9 Compat Modes. IE6 IE8. urlwebfont. Super Modern Browsers. Pretty Modern Browsers. Printers%20Apprentices%20Working%20Late%20Night%20Shifts/100/otf_files%2F000%2F004%2F702%2F4702%2Foriginal%2FSol%20Pro%20Bold%20Italic?trim=false' alt='Sol Pro Bold Font Download' title='Sol Pro Bold Font Download' />Safari, Android, i. OS. urlwebfont. Font. Print Key 2000 For Windows 7. Name formatsvg Legacy i. OS. Then use it to style elements like this body. My. Web. Font, Fallback, sans serif. Practical Level of Browser Support. Things are shifting heavily toward WOFF and WOFF 2, so we can probably get away with font face. My. Web. Font. src urlmyfont. Chrome. Safari. Firefox. Opera. IEAndroidi. OS55. 13. 61. 1. Slightly Deeper Browser Support. If you need a sort of a happy medium between full support and practical support, this will cover a few more bases font face. My. Web. Font. src urlmyfont. Chrome. Safari. Firefox. Opera. IEAndroidi. OS3. 533. 51. 0. Super Progressive Browser Support. If were staking the farm on WOFF, then we can expect things to shift toward WOFF2 at some point in time. That means we can live on the bleeding edge with font face. My. Web. Font. src urlmyfont. Chrome. Safari. Firefox. Opera. IEAndroidi. OS3. 6No. 35 with flag. No. 37. No. Alternative Techniquesimport. While font face is excellent for fonts that are hosted on our own servers, there may be situations where a hosted font solution is better. Google Fonts offers this as a way to use their fonts. The following is an example of using import to load the Open Sans font from Google Fonts import urlfonts. OpenSans Then we can use it to style elements body. Open Sans, sans serif. If you open 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 to include all the font file variations, which ensures deep cross browser compatibility without having to host all those files ourselves. See the Pen Using import for custom fonts by CSS Tricks css tricks on Code. Pen. lt link ing a stylesheet. Similarly, you could link to the same asset as you would any other CSS filter, in the lt head of the HTML document rather than in the CSS. Using the same example from Google Fonts, this is what we would use lt link hreffonts. OpenSans relstylesheet typetextcss Then, we can style our elements like the other methods body. Open Sans, sans serif. Again, this is importing the font face rules but, instead of injecting them to our stylesheet, they are added to our HTML lt head instead. See the Pen Using for custom fonts by CSS Tricks css tricks on Code. Pen. Its about the same thing. Understanding Font File Types. The original snippet at the top of this post references a lot of files with strange extensions. Lets go over each one and get a better understanding of what they mean. WOFF WOFF2. Stands for Web Open Font Format. Created for use on the web, and 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 Open. Type OTF and True. Type TTF fonts. This format can also include metadata and license info within the font file. This format seems to be the winner and where all browsers are headed. WOFF2 is the next generation of WOFF and boasts better compression than the original. SVG SVGZStands for Scalable Vector Graphics FontSVG is a vector re creation of the font, which makes it much lighter in file size, and also makes it ideal for mobile use. This format is the only one allowed by version 4. Safari for i. OS. SVG fonts are not currently supported by Firefox, IE or IE Mobile. Firefox has postponed implementation indefinitely to focus on WOFF. SVGZ is the zipped version of SVG. EOTStands for Embedded Open Type. This format was created by Microsoft the original innovators of font face and is a proprietary file standard supported only by IE. In fact, its the only format that IE8 and below will recognize when using font face. OTF TTFStands for Open. Type Font and True. Type Font. The WOFF format was initially created as a reaction to OTF and TTF, in part, because these formats could easily and illegally be copied, However, Open. Type has capabilities that many designers might be interested in ligatures and such. A Note on Performance. Web fonts are great for design but its important to also understand their impact on web performance. Custom fonts often cause sites to take a performance hit because the font must be downloaded before its displayed. A common symptom used to be a brief moment where fonts first load as the fallback, then blink to 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 font 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 heres 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 size. Fonts can be surprisingly heavy, so lean towards options that offer lighter versions. For example, favor a font set that is 5. KB versus one that weighs 4. KB. Limit the character set, if possible. Do you really need the bold and black weights for one font Limiting your font sets to load only what is used is a good idea and there are some good tips on that here. Consider system fonts for small screens. Many devices are stuck on crappy connections. One trick might be to target larger screens when loading the custom font using media. In this example, screens smaller than 1. Font. Name, Fallback, sans serif. Font Services. There are a number of services that will host fonts and provide access to 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. CDN. Here are a few hosted font services What About Icon Fonts Its true, font face can load a font file full of icons that can be used for an icon system. However, I think youre far better off using SVG as an icon system. Heres a comparison of the two methods.