[HTML/CSS] Web-Fonts - Don’t let “them” get you

Thread: ttf works, why should I use woff?
A styled version of this document: http://www.uplawski.eu/articles/Linu...web-fonts.html
A hand-written version of this document: http://www.uplawski.eu/articles/Linu...eb_fonts1.html

One of my bosses once said that, when things start to become complicated, it means that an error has been committed.

Where programming is concerned, I usually arrive to back-trace my actions up to the point where an ill-chosen statement can be replaced by something more adequate.

But by evaluating their current uses against the history of the so called “Web-Fonts”, I conclude that a bunch of wrong decisions taken independently by different persons and organisms, sometimes in awareness of the consequences, require that the ordinary Web-author must stay ignorant and in blind awe. Else the whole system does not make sense.

What is a Web-Font?

The question had once been valid, but it is no more. This is just one of those things which you should invest some reflection in, when you want to style HTML-documents to use certain fonts:

Web-Fonts are nowadays (2020) just fonts that you use on the Web.

What “they” want you to believe is that a Web-Font is a font which “works” on the web, in contrast to others which do not! While nobody can give you a list of fonts which do currently not work on the Web, they do have so-called “Web-Fonts” to offer. And as you want to be sure that your documents are nice and readable.., you read on and do not take any decisions until you proved me right or wrong, at the end of this block-post and maybe some research and verification.

Font Formats for the Web

I give you this information right away. Should you have Open-Font-licensed or otherwise free fonts installed on your current system, all of these fonts are usable on the Web. Technically, any TrueType- or OpenType-font is. You should in any case, -Web-Font or not-, ensure that the license of a font allows its embedding in HTML (or PDF, if you want to embed fonts in a PDF-file). Even when you buy a font, it can still be illegal to use it on the Web.

The licensing question is probably the only reason why we talk about Web-Fonts in the first place. Font-designers, or rather big companies which sell fonts, wanted to exclude that their publicly accessible fonts could be used outside the Web-site that they had been embedded in.

WOFF

New font formats were developed to restrict the uses of fonts which were meant for the Web. One of these formats is “WOFF” (The Web Open Font Format). Licensing information is encoded in the font-file. But the WOFF format came long after most Web-Browsers have already supported the embedding of TrueType (ttf) and OpenType (otf) fonts. The WOFF format uses compression but is otherwise also just TrueType- or OpenType. So, apart from the resolved licensing trouble, which concerns proprietary fonts, only, there remains the compression as the single charm of WOFF. Let us keep that in mind for later, I will however advance in my presentation of Web-Fonts.

WOFF2

This is an improved Web Open Font Format with higher compression rates than WOFF.

Alternating between font formats

In 2020 all major Web-Browsers support fonts in WOFF, TrueType or OpenType format. With the exception of the Microsoft™ Internet-Explorer™, the same is true for WOFF2.

As nothing forces you to use copyrighted, proprietary- instead of Open Font licensed fonts, the only thing that interests us in the Web Open Font Format is the compression.

Comparing compression rates

So here is an authentic example of a font that I find installed on my own Debian system:
Linux Biolinum, the humanist sans-serif face of the Linux Libertine font-family.



The font is available either in TrueType or OpenType. To allow a comparison of these formats in addition to WOFF and WOFF2, I start with the TrueType version and convert it into the other formats, using one of the many online font-converters at https://font-converter.net/en.
The resulting font files are different in size:

Code:

LinBiolinum_Re.ttf	486K	        100%
LinBiolinumRe.otf	1,1M  / 378K	226% / 78%
LinBiolinumRe.woff	223K	         46%
LinBiolinumRe.woff2	146K	         30%

The converted OpenType font is much bigger than the version which is installed from the Debian package-resources. Apparently the font-converter does not apply compression correctly with the OpenType font.

But you do not need a font-converter if your font is already in WOFF- or WOFF2-format. You can get such fonts from https://www.cufonfonts.com/.

One of these fonts is Lato. You can have it in TrueType and WOFF; I compare only the “Regular” variants:

Code:

Lato-Regular.ttf	118K	100%
Lato-Regular.woff	45K	38%

Where’s the Beef?

Percentages impress politicians. I am no politician.

On my own Web-sites I use a maximum of three different fonts. For ordinary text it may be necessary to keep bold and italic glyphs available, too, which means that about five different font-files can be download by a Web-browser. But let us assume a site where the Lato-font with all of the available font-styles is needed, meaning 10 different font-files:
Lato-BlackItalic.ttf, Lato-HairlineItalic.ttf, Lato-Light.ttf, Lato-Black.ttf, Lato-Hairline.ttf, Lato-Regular.ttf, Lato-BoldItalic.ttf, Lato-Italic.ttf, Lato-Bold.ttf, Lato-LightItalic.ttf

The TrueType-variant of these files will take up 1,1M of hard-disk space, with individual file-sizes from 90K up to 119K. The WOFF-format saves you half a Megabyte, as the size of the whole font-family is only 452K.

If a font will be downloaded upon its first appearance on a web-page, then, apart from the space that is used on the Web-server, its size is most of the time of no importance. While big font-files can slow down the rendering process, you can use the following methods to accelerate the procedure:

• Indicate alternative rendering methods which accelerate the display of a web-page by using a fallback strategy and alternative fonts until the intended font is loaded successfully. This is achieved by the CSS “font-display” descriptor (does not work in Internet Explorer).
• Use the link tag with the attributes “rel='preload'” (also in XHTML) and “as='font'” (not in XHTML) to ensure that font-files are preloaded.
• Set the “src” descriptor with a call to the “local()” function, like in:
  
  Code:

  @font-face { /* usual definition of the font-face rule*/, src: local(‘same_font.ttf’), url(’server_side/same_font.ttf’), /* more fonts */}

  This way, a locally installed version of ‘same_font’ will have precedence over the embedded font. Like with the “url()” function, you can list more than one locally installed font.

These possibilities diminish considerably the impact of the actual size of a font-file.

If you still think that WOFF and WOFF2 make a big difference, also look at all the images that are part of a web-site. Changing image-formats, optimizing color palettes and resizing oversized graphics will probably gain much more space and accelerate the page rendering better than switching between font formats.

Conclusion

I do not care, how anybody embeds fonts in HTML-pages. But I do not like to read that you should subscribe to an online-service to embed fonts on Web-sites, that on the Web, you must use WOFF fonts or that only the WOFF- and WOFF2-formats were “web-safe”.

Do not adopt an attitude that is induced by slogans. At least, not before you have made your own experiments and won the necessary experience.

Ω

Attached Images

Linux-Biolinum-sample.png (25.4 KB, 35 views)