An introduction to Fonts

Warning: You have Javascript disabled. No pictures will be displayed and the site will not adapt to small screens.

Home

Uniquely NZ

Travel

Howto

Pauline

Small Firms

An introduction to Fonts
in Linux and on the Web

This started in the Diary as a draft update of a section of common text found in several places including ubuntu.htm and ouopen.htm which needs updating to take account of the latest versions of Windows, Ubuntu and Mint.

RECENT: It has grown in scope and will now include the use of web fonts and will act as a prototype and test page for an investigation of web fonts

Part 1 - Adding Extra Fonts to Linux so they are accessible from Web browsers, Libre Office and programs running under Wine.

Mint (and Ubuntu) contain many extra fonts which can be installed using the synaptic package manager including the Microsoft Core Fonts which are not installed as standard as they are not Open Source. These fonts are used widely on the web and for older documents and include well known fonts such as Arial and Times New Roman. They can be installed using the ttf-mscorefonts-installer package (use the command line as you need to accept a licence agreement).

I also wanted to install some extra Fonts, namely the Nadianne True Type font I use for Invitations, Wine Labels etc., and the various Windings fonts which provide ticks and other symbols used by Pauline for marking Open University eTMA scripts. Nadianne is not a standard Windows font and originally I think came with a printer but the others are common to Windows and the defaults in Microsoft Office, hence the need to import them for marking of OU scripts.

This brings me to major issue in editing shared files originally created in Microsoft office. LibreOffice will do a good job of substituting fonts in the document with open source equivalents but a change of font will change the size and spacing of the text so the layout will be changed which may be unacceptable when the documents have to be converted back and returned. The worst problems seem to occur with drawings and mixed drawings and text and we have one example where equations have used some drawings overlaid and the meaning has been completely changed due to text slippage under brackets - that was obvious although the cause was not initially. Worse still text boxes may no longer be large enough to contain the text and the ends of text strings can be lost again changing the meaning completely in several cases we have seen. Combined with a double conversion from .docx to .doc and to LibreOffice which is used by many tutors, including ourselves, for marking one is no longer sure what one is seeing! This is not a satisfactory situation, one can just imagine the effects in complex technical commercial documents and agreements even if everybody is using Windows - thank you Bill for yet another setback to the progress of mankind. This means that one needs to add the common fonts used in Office such as Calibri which is the default font (starting at Office 2007) for Word, Powerpoint, Excel and Outlook.

There should be no licence issues in using them on a dual booted machine with a valid copy of Windows/Office or for viewing or editing existing documents created in Office. If you have doubts or wish to use them in documents you create a licence can be purchased from Microsoft. You can find the required fonts in c:\Windows\Fonts. In Windows 10 this is a 'virtual' folder and contains links which Linux does not understand so you need to copy/paste the fonts you need under Windows to a new folder for future use in Linux.

Having obtained any extra fonts you need they need to be installed in Linux. There is useful information at https://askubuntu.com/questions/3697/how-do-i-install-fonts but to summarise.

The fonts which are available to all users are stored in folders under /usr/share/fonts with truetype fonts in subfolder /usr/share/fonts/truetype in Ubuntu Linux so type in a terminal:

nemo admin:////usr/share/fonts/truetype

So I have created a new folder for my extra fonts which I call ttf-extra or ttf-all-extra by a right click -> create folder etc.

Drag the extra fonts into the ttf-extra folder from where they were stored

The folder and the files within it MUST have the permissions and owner set correctly to allow everyone to access it otherwise you may get some most peculiar errors in Firefox and some other programs. It should be OK if you use the procedure above but check just in case that they are the same as all the other folders and files.

If the fonts are only required by a single user then create, if not already present, a folder ~/.local/share/fonts in your home folder and copying the fonts into it may be a better solution for a single user. It has advantages as they are retained through a system reinstall.

Then alert Mint/Ubuntu that you added the fonts by typing the following in a terminal

sudo fc-cache -f -v

This rebuilds the font cache. You may also need to close and open programs needing the font or log out and back into a user. A reboot is the nuclear option. Recent experience shows that Mint seems to detect changes automatically.

You can check the fonts present by fc-list and the following gives an easy to read listing

fc-list -f '%{file}\n' | sort

Avoiding Duplicate Font files and use of Updated Font files.

The above procedure has ignored the issue of duplicated fonts. If you just pick up or install extra fonts without thought you will end up with duplicate fonts, this does not seem to crash anything but I can find nothing in the documentation covering how the font used is chosen if several are present.

I, and most people, start by installing and licencing in Linux the msttcorefonts font set using the ttf-mscorefont-installer package to add a number of important but not Open-source fonts for rendering web pages They are often known as Web Safe Fonts as you can be reasonably sure they will be present or aliased on most systems.

Andale Mono
Arial Black
Arial (Bold, Italic, Bold Italic)
Comic Sans MS (Bold)
Courier New (Bold, Italic, Bold Italic)
Georgia (Bold, Italic, Bold Italic)
Impact
Times New Roman (Bold, Italic, Bold Italic)
Trebuchet (Bold, Italic, Bold Italic)
Verdana (Bold, Italic, Bold Italic)
Webdings

The font files provided in msttcorefonts however date back to 1998 and are missing modern hinting instructions and the full character sets but render adequately for web use and are small. However each version of Windows (and MS Office) has improved versions of many of the same fonts but just adding the font files indiscriminately from say C:\Windows\Fonts will end up with duplicates of Arial, Times New Roman and Verdana and many of the others.

Current Situation on Font Installations on our systems (April 2021)

My current solution is to have two sets of all additional fonts files I need over and above a basic install - the first has the extra font files needed when the msttcorefonts are installed and is a folder called ttf-extra and the second is self contained, is used without msttcorefonts and is called ttf-all-extra. My machines may use either approach depending on their requirements.

The set in ttf-extra comprises the extra fonts I need beyond those provided by msttcorefonts such as Nadianne, the extra files for fonts such as Webdings and those used as defaults in MS Office such as Calibri. The ttf-extra approach has been been in use for many years - mine contains ~53 truetype font files and has advantages on Linux only machines as you explicitely accept the licence agreement. The font files in ttf-extra are more compact as they date from the Windows XP / Office 2003 days and should render faster through less accurately than more recent versions.

The self contained set in ttf-all-extra is however more up-to-date. It starts with those in as the msttcorefonts set to which I added the files in ttf-extra containing the extra font files as above. I then updated this complete set of font files with the latest versions from Windows 10 Pro, removed any symbolic links and converted all files to lower case. This gives me a folder with ~ 90 truetype font files. I add the ttf-all-extra folder (which is backed up in My Programs) to either /usr/share/fonts/truetype or preferably to ~/.local/share/fonts depending on whether I want to make it available to all users or just a single user. The msttcorefonts folder is not needed and, if present, should be removed from /usr/share/fonts/truetype to avoid duplication with the fonts in ttf-all-extra.

I favour adding fonts on a per user basis. The Fonts utility not only allows you to view fonts but you can install with a single click into the user folder ~/.local/share/fonts and people often have personal preferences for fonts and it is better if you are handling shaared documents from Windows users and have to have Windows fonts present to view documents. It also makes backing up more consistent and it easier when you come to update the system to a new version.

More on font substitution

Amongst many rabbit holes I have been down whilst looking at font issues I have found a lot of interesting information. Perhaps the biggest issue every different system has is what to do about working with proprietory fonts used in 'documents' including web sites. Even the most common fonts used are often proprietory examples being Times New Roman, Arial and Courier. These were the defaults in the early days of Windows and there use was licenced through Microsoft as part of Windows. This did not matter in the early days and nobody noticed when nearly all systems were Windows based but the situation is very different now where Apple and Google are big players and mobile devices dominate the commercial market place. Open Source solutions must now be addressed. This where Font Substitution comes in using equivalent Open Source licenced equivalents.

Liberation Sans, Liberation Serif and Liberation Mono are a set of serif, sans-serif and monospaced fonts with exactly the same metrics as the (non-free) Microsoft Times, Arial and Courier fonts, which implies those fonts can serve as a drop-in replacement. They are the default fonts in LibraOffice and are already installed in most Linux distributions. They can be installed from packages Liberation and/or Liberation2 if not already present. Liberation Mono is good for code as the 0 (zero) has a dot in the middle to distinguish it from letters o or O

Arimo, Cousine and Tinos were designed by Steve Matteson as innovative and refreshing designs that are metrically compatible with Arial, Courier New and Times New Roman, respectively. They can be installed from package fonts-croscore but this is not essential if the Liberation fonts are already installed. None of the fonts are exactly the same partly to avoid copyright issues but also because their authors have tried and often succeeded in making small improvements. Note croscore has a single s.

Carlito: Google's Carlito font, google-crosextrafonts-carlito is a modern, sans-serif font, metric-compatible with Microsoft Fonts Calibri font in regular, bold, italic, and bold italic. It has the same character coverage as Microsoft Fonts Calibri. Carlito is a default Calibri font replace in the LibreOffice Suite. It can be installed complete with the configuration to make it a substitution for Calibri from package fonts-crosextra-carlito

Caladea Google's Caladea font, is a modern, friendly serif font, metric-compatible with Microsoft Fonts Cambria font in regular, bold, italic, and bold italic. It has the same character coverage as Microsoft Fonts Cambria. Caladea is a default Cambria font replacement in the LibreOffice Suite. It can be installed complete with the configuration to make it a substitution for Calibri from package fonts-crosextra-caladea

Inconsolata is a very well thought of and favourite monospace font designed for code listings and the like, in print. There are a great many "programmer fonts," designed primarily for use on the screen, but in most cases do not have the attention to detail for high resolution rendering. It is based on and is an alternative to Microsoft Consolas. It is one of a few fonts which has a 0 with a line through it to avoid ambiguities in code - it is currently my 'favourite' font for coding and can be installed from package fonts-inconsolata

Fixing problems with LibreOffice displaying inappropriate Bitmapped versions of fonts such as Calibri

If you add fonts directly from Microsoft you will quickly find a problem with rendering some font sizes. Lets first have a look at the magnitude of the problem, the following piece of text show what can happen.The problem is well known and occurs when the display rendering reverts to a bitmap rather than the proper Truefont rendering using outlines. The problem does not show for all sizes of font, zoom and screen resolution. In my case it is obvious displaying Calibri at 6 and 11.5 point with no zoom in LibreOffice.

This is a problems mentioned on the Ubuntu and other forums. It occurs because certain font sizes and screen resolutions cause the rendering engine to revert back to using the embedded bitmap version which scales badly. It is not obvious why this occurs and even less obvious why use of an embedded version is allowed when bitmapped fonts are rejected by default. Fortunately the problem is known and the way to reject embedded bitmaps is simple and only involves adding a few lines of code. The simplest way is to add the code for rejection of embedded bitmaps to the code which is already present to reject simple bitmapped fonts.

The file in question is /etc/fonts/conf.avail/70-no-bitmaps.conf (which is actually symlinked into /etc/fonts/conf.d ). This symlinking is a simple way to allow the dozens of font configuration options to be simply enabled and disabled and are automatically brought into /etc/fonts/fonts.conf which should never be edited directly.

So /etc/fonts/conf.avail/70-no-bitmaps.conf has six lines added to become:

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <its:rules xmlns:its="http://www.w3.org/2005/11/its" version="1.0">
    <its:translateRule translate="no" selector="/fontconfig/*[not(self::description)]"/>
  </its:rules>
  <description>Reject bitmap fonts</description>

  <selectfont>
    <rejectfont>
      <pattern>
        <patelt name="scalable"><bool>false</bool></patelt>
      </pattern>
    </rejectfont>
  </selectfont>

  <match target="font">
    <edit name="embeddedbitmap" mode="assign">
      <bool>false</bool>
    </edit>
  </match>
</fontconfig>

You may need to regenerate the fonts cache by

sudo dpkg-reconfigure fontconfig
and certainly need to reopen programs such as LibreOffice Writer to see the changes.

The above solution applies to all users. Instead changes can be picked up from ~/.config/fontconfig/conf.d/70-no-embedded.conf for a single user and my file is just:

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

  <match target="font">
    <edit name="embeddedbitmap" mode="assign">
      <bool>false</bool>
    </edit>
  </match>
</fontconfig>

This is a more consistent solution if you are adding fonts on a per user basis

As an aside a useful diagnostic trick is to open an editor such as mousepad like this:

FC_DEBUG=1024 mousepad
Which will list all the files that are being scanned for font configuration as it opens, there will be dozens. For some reason it does not work with xed! The following is the result when passed through grep.

peter@defiant:~$ FC_DEBUG=1024 mousepad | grep -i bitmaps
Loading config file from /etc/fonts/conf.d/70-no-bitmaps.conf
Loading config file from /etc/fonts/conf.d/70-no-bitmaps.conf done
Scanning config file from /etc/fonts/conf.avail/70-force-bitmaps.conf
Scanning config file from /etc/fonts/conf.avail/70-force-bitmaps.conf done
Scanning config file from /etc/fonts/conf.avail/70-yes-bitmaps.conf
Scanning config file from /etc/fonts/conf.avail/70-yes-bitmaps.conf done
peter@defiant:~$

Changing the default fallback subsitution fonts in linux

I have not done this but see http://eosrei.net/articles/2016/02/changing-default-fallback-subsitution-fonts-linux and

https://eev.ee/blog/2015/05/20/i-stared-into-the-fontconfig-and-the-fontconfig-stared-back-at-me/

LibreOffice Font substitution table

I have not used this but it is included for reference as it looks a useful feature

https://blog.documentfoundation.org/blog/2020/09/08/libreoffice-tt-replacing-microsoft-fonts/

Google Fonts for documents

So far we have largely been covering fonts that are available from packages in the Mint/Ubuntu repositories. Another important source is Google who provide a huge number of fonts licensed under the Open Font License which one can use freely in ones products & projects - print or digital, commercial or otherwise. The only restriction seems to be that you can't sell the fonts on their own. Ubuntu/Mint packages some of these fonts as OpenSource replacements for the Microsoft "C" fonts series which provide most of the Windows and Office Default fonts as mentioned above.

Any of these fonts can be very easily added to Mint for use in LibreOffice or more widely. First go to https://fonts.google.com where you will find ~1000 fonts to start to choose from! There are many easy to use selection tools and it seems sensible to start sorting by popularity and reducing the selection by Categories to serif, sans serif, monospace etc. You can then order by trending, popularity etc. Once you have found a font you like it is possible to download it in zipped form, extract and examine what you have by extracting and opening a font with the font viewer built into Mint. You can then install directly from the font viewer and the font will be immediately availble although you will probably have to close and open a programme such as LibreOffice before it will show in the list.

One font you may like to look at is Lobster Two which can also be installed as a package in Ubuntu/Mint- I now use it instead of Comic Sans MS with a bright colour for the ultimate emphasis and as a pseudo handwriting for signitures.

Part 2 - Using Fonts on Web Sites

Introduction

This is a new section and is where it gets even more interesting as you have cater for a huge range of devices from computers with high resolution monitors to phones with tiny low resolution screens using a wide range of operating systems. No single font can cover every eventuality - some fonts are common on a range of devices but currently none are common to all. There are two major ways that this issue is addressed. Firstly the web site font selection has provision to try a series of different fonts until one is found that the system has available - as part of the process every operating system supports a set of fallback generic fonts which may well also serve as the system fonts. There are historically a set of fonts, originally used by Microsoft which are supported by many different operating systems or are 'aliased' to fonts which are supported. These were often refered to the Web Safe fonts and the original list is above. The situation is also made slightly more complex as it seems that some browsers have a few fonts actually built in as fallbacks as well as using the mechanisms in the operation system to find matches between the web site requests and the fonts installed in the operating system or by a specific user. Android has a very restricted number of fonts but many aliases from the WebSafe set.

The second approach is to provide the fonts as part of the web site using CSS Web Fonts. Web fonts allow Web designers to use fonts that are not installed on the user's computer which makes the web site much less dependent on the vagaries of the devices displaying it but does come at price as fonts have to be downloaded. The download of the font information will typically be hundreds of kbytes the first time the site is visited after which it will be cached for a long period within most browsers. The support for downloading of fonts has improved steadily and is fully supported by most current browsers so is now a practical approach if one can accept the data overhead. A good introduction is at https://www.w3schools.com/css/css3_fonts.asp.

A subset of this approach of Web Fonts is to use fonts hosted by Google rather than host them yourself, this makes the addition to a site almost trivial as the required css inserts or files are generated for you and may reduce the data overhead as common fonts may already have been downloaded and cached on your machine and also the code is optimised 'on-the-fly' for the target browser/operating system. I am using Google Fonts whilst exploring use of Web Fonts on our sites but may switch to hosting myself to aid offline working and development and to avoid dependence on Google.

Specifying the fonts you want to use

You can associate a font-face with any element in CSS using the font-family property. You can and should specify a list of fonts. The list should contain the fonts you want to use in order of priority and should contain the fonts you would expect to find installed on the various operating systems such as the so called 'web safe' fonts. Every machine will also offer a number of 'generic fonts, one of which which should be the last in the list. It will differ on every operating system but at least you will display something! Even if you use Web Fonts it is sensible to have some fallbacks if the mechansim is not available on a particular browser. Early copies of Internet explorer and Opera Mini for Android to not support all forms of Web Fonts. The list may be quite long when one takes all the major conputer and mobile systems into account. I looked at the code for the Stackoverflow web site which supports may professional code writers and was surprised how many coding fonts were supported. We will have alokk at the font stacks in more detail stating with the generic-family

The generic-family (fallback fonts)

The following generic family keywords are defined: ‘serif’, ‘sans-serif’, ‘cursive’, ‘fantasy’, and ‘monospace’. These keywords can be used as a general fallback mechanism when an author's desired font choices are not available. As keywords, they must not be quoted and by convention are lower case. Authors are encouraged to append a generic font family as a last alternative for improved robustness. To quote W3.org

Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in the worst case when none of the specified fonts can be selected. For optimum typographic control, particular named fonts should be used in style sheets.

All five generic font families are defined to exist in all CSS implementations (they need not necessarily map to five distinct actual fonts). User agents should provide reasonable default choices for the generic font families, which express the characteristics of each family as well as possible within the limits allowed by the underlying technology.

Fonts used by Stackoverflow - a starting point for code

This seemed a good starting point for monospace used for code as Stackoverflow attracts many professional programmers.

font-family:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;

Note: This list was extracted from the .css file on stackoverflow and have not been "quoted" as recommended by W3C in the CSS3 standards but the list is clear. Another unusual feature is the two genericc fonts at the end as one would never use a sans-serif for code which needs fixed spacing.

Current Fonts Stacks used on our web sites

The fonts used before this work started came from the conventional "web safe" set and all had a series of fallbacks which were set up prior to the growth of mobile computing.

font-family: Georgia,"Times New Roman", Times, serif;

font-family: Arial, Helvetica, sans-serif;

font-family: "Courier New", Courier, monospace;

font-family: "Comic Sans MS", cursive;

Latest Font Stacks for our web site in responsive.css and in use on this page

The font-face commands now proposed to update our site are:

font-family: Georgia, Caladea, "Liberation Serif", Cambria, "Dejavu Serif", "Times New Roman", Times, serif;

font-family: "Liberation Sans", Calibri, Carlito, "Helvetica Neue", Helvetica, Arial, sans-serif;

font-family: Inconsolata,"Liberation Mono", Consolas, Menlo, Monaco, "Lucida Console","DejaVu Sans Mono","Bitstream Vera Sans Mono", "Courier New", Courier, monospace;

font-family: "Lobster Two", "Comic Sans MS", "Dancing Script", cursive;

These cover the main computer systems but depend on the built in features of Android. Android has a very limited number of built in fonts primarily from Droid and Roboto fonts which it seems to automatically substitute for Times New Roman, Arial and Courier. I will cover Android further lower down.

Inconsolata is a Google font which seems perfect for code. It is a modern, friendly serif font, metric-compatible with Microsoft Fonts Cambria font in regular, bold, italic, and bold italic. It has the same character coverage as Microsoft Fonts Cambria. Caladea is a default Cambria font replacement in the LibreOffice Suite. Its installation for documents has been covered above.

Lobster Two a substitute/improvement for Comic Sans MS but both have to be manually installed or be provided as Web Fonts as covered below.

The serif stack is the most important and I spent a long time looking for a perfect font to replace Georgia - Libre Baskerville and Merriweather are both popular Open candidates from Google but I also looked at PT Serif, Noto Serif and Lora which are also in the top 8 most popular serif fonts served by Google. In the end I found that Caladea ticked all the boxes in appearance for me. Caladea is a modern, friendly serif font, metric-compatible with Microsoft's Cambria font in regular, bold, italic, and bold italic. Its installation for documents has been covered above.

Use of Web Fonts

There is currently a major shortfall on our web site in the way it displays on mobile devices, in particular those using Android. Android currently only offers three or four built in fonts namely three versions of Droid and Roberto on latter versions. This means our web site is always falling back to these fonts and does not display the same or as well on phones and pads as on computers and laptops. There is however a way, largely championed by Google, to use fonts down-loaded from the web on web sites which this section will investigate.

One can use fonts hosted by Google rather than host them yourself. That makes the addition to a site almost trivial as the required css inserts or files are generated for you and also the code is optimised 'on-the-fly' for the target browser/operating system. Using hosted fonts may also reduce the data overhead as common fonts may already have been downloaded and cached on your machine. I am using Google Fonts whilst exploring use of Web Fonts on our sites but may switch to hosting myself to aid offline working and development and to avoid dependence on Google.

The 'importing' of the optimised code can be done in two ways which involve one or more lines of code added either in the <head> block of HTML code or in the CSS file. The addition in the <head> block has various advantages in timing and can also preload some of the data however the addition of a single line to the CSS file is all that is needed to cover the entire site whilst additions to the <head> involve hundreds of files. Changes using the CSS will be used for development and then I may possibly edit the <head> with a series of global edits starting with the diary which has lots of code which will benefit from use of Inconsolata as will Howto pages.

See note below: The code added to the top of responsive.css is

@import url('https://fonts.googleapis.com/css2? &family=Caladea:ital,wght@0,400;0,700;1,400;1,700 &family=Inconsolata:wght@400;600 &family=Lobster+Two &display=swap');

See note below: Or the following can be used in the <head> block of an individual page.

NOTE: The code above must not have the spaces which have been included so it dos not overflow the screen in browsers. It must be a single line without any white space in responsive.css or the head block. If you copy and paste you Must edit them out.

To jump ahead I now favour the <head> approach as I can choose which pages have the potential additional data download impact of web fonts.

Tools

WhatFont Extension to Chrome, Opera and Firefox (Essential)

There is an excellent Chrome Extension WhatFont which has also been ported to Firefox which enables one to find out details of the font in use at any point on any website. There are several extensions with the the same name but the Whatfont originated by Chengyin Liu for Chrome and its Firefox wrapper by Zack Michener are the ones to use. It is also possible to load chrome extensions in Opera via an Opera Extension so I have WhatFont installed in my development machine in all three browsers.

When it is loaded an icon appears in the toolbar or in the Extensions dropdown depending on whether you have pinned it. NOTE: Pages should be refreshed before using or it will be greyed out or not appear at all. On clicking it will show the font under the cursor where you hover and provide additional info if you click. It shows the whole font stack which has been specified. When you have finished inspecting it has to be closed before you can use the site. I find it essential to understand how the font selection is working and wish there was a version working under Android Browsers.

The built in Font Utility

The built in Font utility accessed by Menu -> Fonts should not be forgotten as it enables on to see all the installed fonts and available styles and has a feature which is less well known to install any font file you right click -> Open with Font viewer to display the font and install it to the current user in ~/.local/share/fonts. You however have to manually delete the font file(s) to uninstall them.

Overheads in Data Usage with Web Fonts

One of my major concerns was the overhead in downloading the fonts. When fonts are installed on ones machine the size can be appreciable and I could envisage a first time figure of a megabyte or more before they were hopefully cached for a long period, The fonts ae downloaded by the browsers in one of 5 major formats which are compressed to various degrees and different browsers have support for different algorithms.

The font formats specifically designed for web use include the .woff and .woff2 formats. WOFF stands for Web Open Font Format and is a web-exclusive font format that cannot be used anywhere else or in any other environment. It’s a compressed format created especially to be “read” by browsers that will then render the website texts in it. Both are compressed and the newer WOFF2 is more highly compressed but slightly less well supported. Neither can be be converted back to desktop font to be permanently installed. There are also a number of legacy web font formats which may have to be considered if you need to support older browsers. If you use the Google font APIs then the constriants are taken care of for you and only the neccesary fonts are downloaded for your specific situation.

When any modern website is visited the first time there are considerable overheads. The HTML file for this page is about 60 kbytes as I write this section but there are also a few identical images on every page which need downloading such as the hamburger menu icon and the validation icon and background 'wallaper' image (total ~13 kbytes). There are also standard files for my responsive javascript and CSS - rbox.js (28 kbytes), responsive.css (16 kbytes) and media.css (3 kbytes) and the lightbox2 code is present on most pages and adds another 115 kbytes overhead as it also load jQuery.

These can be measured by clearing the browser cache then refreshing the page which loads icon images, javascript (.js) and .css files [including lightbox code in most cases] some basic results follow. The measurements were checked on several browsers and machines using both the internal browser cache and after the page load and the actual download on Mint machines using my Network Data Monitoring applet cummulative data facility which gave a slightly higher figure as it included both downloaded and uploaded data for the transfers, a more realistic overhead value.. The measurements below were made in Firefox, those in Opera were slightly lower for the web font downloads.

A few test results

homepage.htm with (no lightbox) 110 kbytes

Current font.htm without any web fonts specified, including associated javascript .js and .css files and lightbox2. Baseline total of 250 kbytes.

I then carried out tests with a large bumber of different combinations of downloaded fonts including Merriweather, Libre Baserville, Caladia, Inconsolate, Lobster and Lobster Two using firefox and clearing cache using

3 Fonts with Caladia, Inconsolate and Lobster are 560 kbytes total, ie an extra 310 kbytes

2 font files for Inconsolate and Lobster total 450 kbytes ie fonts are an extra 200 kbytes (Inconsolata is a variable font)

Lobster font only 300 kbytes ie an extra of 50 Kbytes only for Lobster

3 font files covering Libre Baserville, Inconsolate and Lobster total of 650 kbytes ie extra 400 kbytes (Libre Baskerville is a variable font)

3 fonts with Merriweather, Inconsolate and Lobster are 700 kbytes total ie an extra 450 Kbytes (Merriweather is a Variable Font)

As above but with Georgia installedd gave significantly lower figures confirming the system recognises that caladea is not required ie overheads can be controled to some extent by order so only Android potentially has full overheads. In any case overheads from css and javascript files for site and lightbox are a similar magnitude. And they are all one offs on first visit!

Summary of Web Font overheads

Web fonts add ~ 40 to 50 Kbytes per style added, most fonts need 4 styles added (Regular 400, Italic 400, Bold 700 and Bold Italic 700), Lobster is an exception with only one style available (I ended up using Loster Two in the end with two styles). The proposed Web Fonts add 300 Kbytes when using Firefox but this is only the first time the site is visted as the fonts remain in cache. This is nearly twice the overheads for all the 'standard' javascript and CSS files on most of our pages of 165 kbytes so it may be best to apply selectively - ie entry pages do not need monospace fonts or lightbox halving the overhead.

Using Media Queries to reduce overheads on Mobile Data

Mobile data connections are getting much better with the advent of 3, 4 and shortly 5g but in many areas still aren’t as good as desktop ones and may not exist at all in much of the world. So on a mobile connection the download time of custom fonts could take up to several extra seconds before the page renders the first time the font is used. There is no way to identify when 'mobile data' as opposed to static broadband is in use but it is possible to change behaviour based on the screen size as a surrogate. The following is part of my trial to see if it is worth restricting use of downloaded fonts to laptop and desktop screen sizes - I have chosen a breakpoint of 930 pixels width which matches the maximum width of my responsive pages. Most affordable mobiles will have a viewport in either orientation below that breakpoint, pads will mostly cross it between portrait and landscape and desktops and laptops will exceed it in full screen mode.

body {
  color: black;
  max-width: 930px;
  margin: 0 auto;
  padding: 0px;
  font-family: Georgia, "Liberation Serif", Cambria, "Dejavu Serif", "Times New Roman", Times, serif;
}
@media only screen and (min-width: 930px) {
  body {
    font-family: Georgia, Caladea, "Liberation Serif", Cambria, "Dejavu Serif", "Times New Roman", Times, serif;
  }
}

Similar CSS is used for code blocks where the Inconsolata font is downloaded and in areas using Lobster Two.

Why does this help?

This exploits the fact that most browsers won’t download web fonts unless needed. This means you can specify the all of your web font choices outside of any media queries, and then only use that font in the font-stack for certain resolutions. Early versions of Internet Explorer are the only exception and usage is tiny by now and they will still render but use more data. There are a wide range of usage stats available at StatCounter. The only parameter in the @media queries means that they will fail gracefully for legacy browsers that do not support @media queries at all. [only is not present in media.css which handles my css for picture blocks and should probably be added to all the @media statements!]

This gives us extra control over how we balance te data overhead on pages and devices. we can select pages which link specific fonts in the head block eg pages which are travel write-ups do not need to download a font specific to code and in many cases the default fonts on a mobile device with a small screen may be a better choice in any case. You have to be a little careful as many pads have quite a wide screen in landscape view and you do not want a too large a change in appearance when the orientation of a device is changed.

You can try it with a pad on this page and you will see little difference in the body text with an android pad as you change the orientation. The & symbol is distinctive in Caladea and the way some numerals hang below the baseline (1234567890) is a distinctive feature of Georgia. There are obvious improvements in code with use of Inconsolata where the zero has a slash through it.

Android built in Font Mapping

Android has its own built in defaults fonts for many common fontsincluding the web safe fonts. The following is a sample part of the mapping from Android 4.4 whish helps understand some of what I have observed as it prempts the font stacks I have set up

This lists the font families that will be used by default for all supported glyphs. Each entry consists of a family, various names that are supported by that family, and up to four font files. The font files are listed in the order of the styles which they support: regular, bold, italic and bold-italic. If less than four styles are listed, then the styles with no associated font file will be supported by the other font files listed

<family>
    <nameset>
        <name>serif</name>
        <name>times</name>
        <name>times new roman</name>
        <name>palatino</name>
        <name>georgia</name>
        <name>baskerville</name>
        <name>goudy</name>
        <name>fantasy</name>
        <name>ITC Stone Serif</name>
    </nameset>
    <fileset>
       <file>NotoSerif-Regular.ttf</file>
       <file>NotoSerif-Bold.ttf</file>
       <file>NotoSerif-Italic.ttf</file>
       <file>NotoSerif-BoldItalic.ttf</file>
       </fileset>
</family>

Many more families follow

In my Font stack Georgia preceeds the first web font Caladea, and my intention was Caladea, would be used if Georgia was not available but what happens is that Androids internal mapping means a NotoSerif font is always used. The mechanism changes slightly in latter versions and becomes more comprehensive but still seems to always replace Georgia, my chosen font, with a suitable alternative for a small screen. Since over 99% of Windows and Apple machines already support Georgia it looks very unlikely Caladea will every need to be downloaded appart from Linux machines without the Web Safe set installed by, for example, msttcorefonts.

Tentative plans

The font mapping built into Android means that the selection of font stacks by media queries is not be needed to save data on most mobile devices and is largely redundant for the bulk of the text. The major gain from the use of web fonts comes with monospaced fonts for code where the downloading of Inconsolata is a worthwhile price and my current plan is only add the Google Web Font code to the <head> block of pages with blocks of source code which means current Diary pages, Howto pages and a few Open University support pages - most visitors will see no overhead on most systems.

No changes required or made for the uniquelynz.com domain beyond the improved font stacks in responsive.css

All Diary pages have the Google Web Font code added in the Head block

Howto Pages which have been converted to HTML5 in

Background Articles,

Ubuntu and Linux Mint Articles,

General "Howto" Articles including Web Site Design and

Howto Articles appropriate for OU Students and Tutors

have had the Google Web Font code added in the Head block.

@media queries restrictions for mobiles are only being tested on this page

That gives an approximate total of 85 pages which currently use web fonts. A few "Small Firms" pages may be added where they include code.

This will be reviewed after a period of time

Other Changes made as a result of the work on fonts.

I spent a lot of time looking at blocks of 'code' during this work and also had to rationalise the CSS to experiment with use of the media queries to control web font usage. This gave the chance to make some minor changes to the appearance of the various code block displays and some other blocks and these are now included in responsive.css

The borders of .code, .terminal, .terminaloutput, .scriptcode, .updatecode have changed to distiguish them more clearly and the backgrounds are now all white.
The edge of howtoblock has been toned down to a duller blue.
generalblock now has a border with drop shadow to be consistent with the other blocks such as homeblock and howtoblock.

In many ways these changes have more impact than the use of web fonts or even the improved font stacks!

Appendices

Links to useful information

https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file is quite old but includes some interesting discussion on the two mechanisms provided by Google

https://stackoverflow.com/questions/12316501/including-google-web-fonts-link-or-import/ more about link versus import.

https://fonts.google.com entry page - THE starting point for use of Google fonts for the web or local use

https://www.youtube.com/watch?v=sqesm0euf9M - Video, rather long but a good sales pitch for using google fonts and via their API - influenced me to consider Google Fonts

https://fonts.google.com/analytics - Google Font popularity analytics

https://github.com/majodev/google-webfonts-helper Helps one install web fonts locally. Looked a viable alternative to using hosted fonts. To quote "A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets " However it may need updating - chech the issues. as it may now be unusable

https://css-tricks.com/snippets/css/using-font-face/ Has more on self hosting and other information on overheads

https://www.cssfontstack.com/ Operating system support

https://www.w3.org/TR/css-fonts-3/ - Very useful reference from W3C

https://jigsaw.w3.org/css-validator/ - W3C CSS Validation Service to Check Cascading Style Sheets (CSS) documents with style sheets. Essential final check. If used on the html file it checks all the css including imported files and gives listing which may be useful to see what other sites are doing!.

https://stackoverflow.com/questions/19691530/valid-values-for-androidfontfamily-and-what-they-map-to - again quite old but one of the few places with a table showing mapping of 'generics' to actual fonts in different Android versions

https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml - this is a fascinating one and shows that android has an internal aliasing which maps many common 'web safe' fonts to a superset of generic fonts within android as well as the defaults applied for generic fonts. This link applies to most recent version currently android 11 but true to a large extent for earlier versions. This is why our site displays quite well on android without web fonts.

https://www.webfx.com/blog/web-design/a-web-designers-guide-to-linux-fonts - has a number of suggested font stacks

https://caniuse.com/ - find out if and when the latest css was first available on every common browser.

https://web.dev/optimize-webfont-loading/ Optimize WebFont loading and rendering

https://www.webfx.com/blog/web-design/a-web-designers-guide-to-linux-fonts/

https://modernweb.com/solving-problem-font-face-inside-media-queries/ - Very useful thoughts here but one needs to read the end part and comments

https://gs.statcounter.com/ - Statistics on many useful factors in site design such as browser share, screen sizes, mobile/tablet/desktop breakdown

Experiment Area

This will always be in flux as I carry out tests or may even be empty!

It has become obvious to me that experimenting may be the only way to find out what happens with the various web browsers as they have some fonts built into them as well as the defaults so I am going to try various font stacks on the paragraph. & @ o0O123456789
This with the default stack.

Before You Leave

I would be very pleased if visitors could spare a little time to give me some feedback - it is the only way I know who has visited, if it is useful and how I should develop it's content and the techniques used. I would be delighted if you could send comments or just let us know you have visited by Sending a quick Message to me.