Font Basics to Consider for a Fun and Functional Website

There's no refuting that web fonts are the cornerstone of credible web design, tactful branding, and overall appeal. What's more, a cohesive web font theme directly correlates to a designer's merit and a sites performance. Establishing the importance of web fonts fuels the desire to understand the basics.

The font-family can be broken down into three periods: block, swap, and failure. While in the block period, the browser will make the font indiscernible, unable to be seen by the public. In some cases, generally during the initial load, sites fall susceptible to the dreaded phantom underline. Furthermore, the swap period consists of the fallback font while the failure period is just that - failure to find the font.

Now that we've covered all the bases, let's delve into the intricacies of font-display. With font-display, curators can manipulate the length of the aforementioned font-family periods. Font-display consists of four predominant values: block, swap, fallback, and optional. Auto is another option, but it's presumed to be interchangeable with the block feature.

During the font-display block period, the browser dictates how long the block period will be in effect. If you're looking to secure the block period indefinitely, Chrome, Firefox, and Safari are the recommended browsers. During this phase, if the custom font has yet to be downloaded the browser will revert to the fallback font, resulting in a flash of invisible text.

The font-display swap period, on the other hand, does away with invisible text. While the custom font loads, the text will display in fallout font. The final product is a flash of unstyled text.

Font-display fallback is a blend of both block and swap. The text remains invisible for a brief period of time, roughly 100ms, transitions to the fallback font, and finally swaps into the custom font.

The font-display optional value is comparable to the fallback. However, if you're utilizing the optional period and have subpar connectivity, the browser can override the process and choose to snub the custom font altogether.