How to add a custom font in Cassiopeia

After breaking Joomla with the remove of Font Awesome from Cassiopeia, I've decided to show you how to break the entire Web by adding a new font in Cassiopeia. #PrivateJoke

More seriously, none of the tips given in my articles will break Joomla or the Web. The solutions provided in my articles are always tested and controlled before posted.

Moreover, editing a child template can only break the design of your site, not the CMS. But and because it's always better to be serious when it come to Joomla, I strongly recommand you to take a backup before any edition / modification on your website.

Last tip before starting the article: if you're not confident enough to apply these changes yourself, do not hesitate to contact me!

Usual recommendations

Take a backup of your site before any modification, and test your backup
Work on a child template, not on your default template
If you don't understand what you read, do not apply it

The default font scheme in Cassiopeia

By default, Cassiopeia lets you choosing different options for the fonts scheme of your website:

System fonts, with various options for the body and for the headings;
Roboto from a local folder in your template (/media/vendor/roboto-fontface/fonts);
Google Fonts form the Web (external server);
none

Fonts Scheme Cassiopeia parameters — Font Scheme in Cassiopeia parameters

At this point, it's useful to keep in mind this warning displayed in Casssiopeia's parameters:

System fonts are the most performant although there may be small differences between operating systems.
Loading fonts from external sources might be against privacy regulations in some countries.
Loading fonts from a local folder might have a performance impact on your site.

How to add a custom font in Cassiopeia?

If none of these natives options meets your requirements, select None as fonts scheme in Cassiopeia parameters. So, if you want to add a custom font in Cassiopeia, here is a solution for you.

Open an online font service like FontSquirrel or similar.
Search for your custom font. Let's say: Cantarell.
Open the tab "Webfont Kit".
Choose a subset (The subsetting reduces the number of glyphs in the font to generate a smaller file. If the font supports a particular language, it will appear in the dropdown).
Choose your font formats: .woff (for modern browsers) and .ttf (for Safari, Android, iOS) are recommanded.
Click the button Download @FontFace Kit to dowload the archive cantarell-fontfacekit.zip on your computer.

Unzip the zip archive you've just downloaded and open the folder web fonts
In the sub folders, you'll find the 2 following files:
- Cantarell-Regular-webfont.ttf
- Cantarell-Regular-webfont.woff
Open your SFTP client (FileZilla or similar)
Log to your server and access to the folders: /media/templates/site/cassiopeia of your site
Create a new folder fonts: /media/templates/site/cassiopeia/fonts
Upload in your new folder fonts, the Cantarell-Regular-webfont.woff and the Cantarell-Regular-webfont.ttf files seen previoulsy
In your Joomla backend, open Site template from your admin dashboard
Select your Cassiopeia child template
Click on the CSS folder to open your user.css file in the editor (create one if you still don't have one)
Copy/paste the following lines at the top of your user.css file:

@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 500;
font-display: swap;
src: local(''),
url('../fonts/Cantarell-Regular-webfont.woff') format('woff'), 
url('../fonts/Cantarell-Regular-webfont.ttf') format('truetype'), 
}

Click the "Save" button
Clear your caches (Joomla and browser) to check your new font is now loaded and displayed as expected.

Explanations about font-display: swap - The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid a flash of invisible text (FOIT) in most modern browsers.

Let's get further with preload !

Last part but not the least, I'll show you now how to preload your web fonts using rel="preload" to remove any flash of unstyled text (FOUT) and to to improve their loading speed.

Adapt these codes to your fonts and add these links elements at the <head> of the index-php file of your Cassiopeia child template.

<link rel="preload" href="/media/templates/site/cassiopeia/fonts/mycustomfont.woff" as="font" type="font/woff" crossorigin>
<link rel="preload" href="/media/templates/site/cassiopeia/fonts/mycustomfont.ttf" as="font" type="font/ttf" crossorigin>

Explanations

The as="font" type="font/woff" attributes tell the browser to download this resource as a font and helps in prioritization of the resource queue.

The crossorigin attribute indicates whether the resource should be fetched with a CORS request as the font may come from a different domain. Without this attribute, the preloaded font is ignored by the browser.

With preload, the browser knows that it needs to download this file earlier. It is important to note that if not used correctly, preload can harm performance by making unnecessary requests for resources that are not used.