The downside is that this blocks the processing of further stylesheets until the font styles have been parsed. The font will be downloaded and processed in parallel with your own stylesheet.Īlternatively, you can use a CSS url('') To embed a font in a page, use the standard tag in the HTML head:
It provides a searchable list, weight and style customization options, and load time estimation.Įxample: How to add the Open Sans font in CSS Google Fonts is the most popular font repository. If a system typeface makes your marketing manager wince, there are several repositories that offer a wide range of open-source fonts that are served from a content delivery network (CDN). body How to use web fonts in CSS from a font repository
Each platform differs in the fonts it offers, but fallbacks can be specified as well as the generic font family names of serif, sans-serif, monospace, cursive, fantasy, system-ui, etc.
Operating system fonts come for free and can provide a noticeable performance boost. The days of every site using standard OS fonts such as Helvetica or Times New Roman have long gone - there are fewer reasons not to use them.
This can be especially problematic on mobile devices and slower networks
The more you add, the larger your page weight, and the worse your page performance.