Operating system fonts come for free and can provide a noticeable performance boost. 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 and system-ui, etc.
font-family: Arial, Helvetica, sans-serif;
Alternatively, a CSS @import can be used:
Make your own font? All modern browsers support WOFF format, so any font file can be used on your webpage!
Custom CSS properties using
:root or CSS Preprocessors like SASS and LESS are additional ways to add webfonts into your project. An open source repository, like Google Fonts or _________, is also a great option, and one of the most easiest. Consider the amount of fonts you select as well as the load time estimation when choosing a font pair.
To embed a font in a page, use the standard <link> tag in the HTML head, e.g:
<link href="https://webfonts.brand.ucsb.edu/webfont.min.css" rel="stylesheet">
Icons are some of the most-used graphics in web and application design. Icon collections and libraries are where you can find the best in icons for their website and app project. Listing out common interactions like profile or settings and starting to build out this list will help you to start sketch out what icons you think you’ll need, especially with the variety of options that both the university and open source libraries provide.