Everyone would like to have the font on their website according to their ideas, especially for corporate websites, where we have to stick to the set corporate identity. Using your own font on the web may not be as problematic as it may seem at first glance, you just need to “line up” the font. There are several ways to achieve this, and each has its advantages and disadvantages.
But first, you need to know which fonts we can use safely on the web without forcing the user to download additional files. The CSS Font Stack service, for example, will help us with this. Thanks to this, we immediately see that, for example, the familiar Arial font is safe to use on both Windows and Mac.
Web font formats
In order to use our own font on the web, we need to have it in a format that web browsers know and can work effectively with. Today’s obsolete formats include TTF, OTF, SVG and EOT, which we will not even deal with. These formats are really history for use on the web. There are currently WOFF and WOFF2 formats, which are already true web font formats and are optimized for use on the web. Compared to older formats, it offers many times better data compression, so downloading your own font does not burden the user as much.
For more information on web fonts, visit w3schools.com.
Font conversion to WOFF and WOFF2
We most often get a font from a graphic in the TTF or OTF format, so in order to be able to use it on the web, we need to convert it to a web format. To do this, we can use the online Font Squirrel tool, which is free and offers a lot of setting options.
We can choose from basic, optimal or advanced mode for experts. In advanced mode, I recommend focusing on the Subsetting settings, where we choose which characters we want to include in the webphone. Of course, the more characters a font contains, the more data-intensive it is. However, if we want to be sure that the font will contain all the necessary characters, check No Subsetting. I recommend this especially for multilingual websites. For websites in Czech, Slovak and similar languages, it is necessary to include at least characters from the so-called Latin Extended.
Font face – Link your own web font to a template
We get the custom font into the web template using the @font-face declaration within CSS.
Within the font-face declaration we set:
- font-family – The name of the font
- font-style – font style (normal, italic, …)
- font-weight – typeface (so-called “bold”)
- font-display – rules for rendering fonts when loading
- src – path to webfont files
To optimize page load speed, it’s especially important to set the font-display value correctly. A great article on controlled font rendering using font-display was written by Martin Michálek, from whom we can read recommendations to set the value of font-display: fallback in most cases.
Use a font from Google Fonts
Another way to get a font into our template is to use Google Fonts, which is a huge database of web fonts. It is very easy to use, just select the font we like, set the necessary cuts and subset (even here I recommend always setting Latin Extended) and the service will generate the necessary code, which we will insert into our template.
The main advantage of using Google Fonts is its simplicity. Furthermore, fonts are downloaded from fast servers / Google CDNs and there is a chance that the same font is used on another website that the user visited before ours, so it will be cached – that is, the theoretical acceleration of page loading, but in practice there is a chance that it happens, relatively small. However, the use of CDNs, of course, has other advantages that are worth thinking about.
The main disadvantage is the dependence on the service of third parties, and in the event of its failure, it will also affect our website.
Connecting fonts from Google Fonts can be used for simple, placeholder and temporary pages, for example. For classic “full-fledged” websites, I recommend linking your own font files.
We have a choice of two ways to attach a font from Google Fonts to a template:
1. Link a separate CSS file in the of our template
This is the recommended way, the code of which can then look something like this:
2. Import within a CSS file
We can also link Webfont using the CSS declaration @import within our .css style file.
Missing character accents – Latin Extended subset
If you encounter a problem where you do not want to display some characters in your own font, it will most likely be a problem with the range of characters used (subset). Typically, for example, the Czech characters ě, š, Č, etc. are problematic. In order to prevent these problems, I recommend choosing the Latin Extended subset already mentioned.
If we do not use this subset, these accented characters will be displayed in a placeholder font, which at first glance will not look nice at all. Example of displaying accents with incorrect subset settings:
Leave a Reply