

The concept of a font stack comes from early in the web, when there were only a few trustworthy fonts that one could installed on the majority of computers. Setting Up the HTML and Creating the Initial Font Stack If you’re new to HTML, try out the whole How To Build a Website with HTML series. To get started, check out our How To Set Up Your HTML Project tutorial, and follow How To Use and Understand HTML Elements for instructions on how to view your HTML in your browser.

Knowledge of type selectors, combinator selectors, and selector groups, which you can find in How To Select HTML Elements to Style with CSS.An understanding of CSS’s cascade and specificity features, which you can get by reading How To Apply CSS Styles to HTML with Cascade and Specificity.Lastly, you will load a self-hosted font family using the rule, followed by a self-hosted variable font. Then, you will use a font-hosting service, Google Fonts, to find, select, and load custom fonts onto your page. You will use the font stack, a rank ordering of fonts based on availability, to use fonts that may be installed on the user’s device. In this tutorial, you will try out examples of loading fonts onto your website. Web browsers have also implemented support for variable fonts, which are single font files from which multiple fonts can be interpolated, providing a high-degree of tuning and font customization.

In the last decade, there have been great strides in providing custom fonts to users with more preloaded fonts on devices, the ability to load custom fonts with the rule, and the use of font hosting services. The visual identity of a website is largely dictated by two principles of design: color and typeface. The author selected the Diversity in Tech Fund to receive a donation as part of the Write for DOnations program.
