Choosing Web Safe Fonts for Your Websites
A brand new technology shipped with it: OpenType font variations, also known as variable fonts. This technology allows a single font to behave like multiple fonts. These variations come from the fact that each character only has one outline. The points that construct this outline have instructions on how they should behave.
This also makes it possible to generate styles in between — for example, semi-bold and bold. These variations may act along one or more axes of the font. On the image below, we have an example of this outline interpolation on the letter A. Variable fonts can bring both simplicity to our font structure and performance improvements.
Take for example a situation where our website needs five font styles. It would be significantly smaller and faster to provide a single variable font capable of rendering those five styles than to have to load five different font files. There are currently two different ways to use variable fonts.
The CSS specification strongly prefers using font-optical-sizing , font-style , font-weight and font-stretch for controlling any of the standard axes. This property allows developers to control whether or not browsers render text with slightly different visual representations to optimize viewing at different sizes. It can take the value none , for when the browser cannot modify the shape of glyphs, or auto for when it can. On a browser that supports font-optical-sizing , a font where the value is set to auto can vary like the font in the image below:.
This property specifies whether a font should be styled with a normal, italic, or oblique face from its font family. It can take the normal , italic or oblique values. This property specifies the weight or boldness of the font. One thing to note is that, with normal fonts, named instances can be defined. For example, bold is the same as font-weight: or extra-light is the same as font-weight: The font-weight property can also be any number between 1 and , but when using variable fonts, due to the interpolarity, we can have a much finer granularity.
For example, a value like font-weight: This property selects a normal, condensed, or expanded face from a font.
Also, named instances will map to known percentages. For example, extra-condensed will map to To use a variable font, we must find a suitable file. The v-fonts project provides a font repository where we can search and experiment with all type of variable fonts. I decided to use the AvenirNext font and link it from its official GitHub page.
Why web fonts?
Then we need to create a CSS file to load this new font:. Due to browser support issues, this example will only apply font variations in Safari and Chrome. With our font loaded, we can now use the font-weight property to manipulate the weight axis of our variable font. This happens because the construction of these fonts can be radically different.
The second way of using variable fonts is by using the font-variation-settings CSS property. This property was introduced to provide control over OpenType or TrueType font variations , by specifying the four-letter axis names of the features you want to vary along with their variation values.
Currently, we have access to the following aspects of the font:. According to the specification , this property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists. I chose to use the CS-Light font as a base font because it seemed easier to match with the other fonts. The first word here looked acceptable, but then it gets pretty wild. However, I could see some similarities so I tried to get a closer match by playing a little with some CSS:. By playing with two CSS properties, letter-spacing and line-height , which are both well supported , I could actually get a better match:.
I really liked the result. You can feel a slight difference, especially when the text is made a bit larger, but overall it looks similar.
Then, I wanted to also check the other font we have, called CS-Demi, to see if I could get similar results:. So, I went through the same process and played again with some CSS properties, also adding a font-weight property since this font was much bolder than the other one:. In the end, I got a pretty decent result. So, now we can get a pretty similar result by loading only one file instead of three. Not bad. You can definitely see it visually when the network is a bit slower than usual. The Lighthouse audit has also been complaining about it:.
Thanks to the font-display property, we can avoid a FOIT pretty easily, using the fallback value:. Be careful though: font-display is not fully supported yet! Finally, after adding this property, we can fix our FOIT, at least on browsers supporting this feature:.
So I decided to preload the critical web font by simply adding 1 line on the head section see preload specifications :. I could then see straight away that Chrome was loading the main font file before the other ones, and faster too:. Therefore, we started to download our critical web font resource after 1. This meant it took 2. After all those optimizations, we could finally put everything together. We ended up with something that looked like this:.
CSS Fonts Module Level 3
- Borehole Climatology: a new method how to reconstruct climate;
- Add fonts to a Web Project.
Related CSS Fonts: Web Typography Possibilities
Copyright 2019 - All Right Reserved