Using Google fonts in Joomla is really easy, because modern templates like ours use the Google fonts API, and from their settings they are easily selected.
The web is growing more and more and with it comes the need to add a custom or commercial font to your site to give it a unique design that distinguishes your brand. The other reason we want to load local fonts is to comply with new privacy rules like Europe, US and others, which don't allow to use fonts from Google Fonts servers.
In this guide we will explain how to use Google Fonts and custom fonts locally on a Joomla site. For this explanation we are going to use Joomla and Helix Ultimate, although it is valid for any template that has the possibility of loading a custom.css file or similar. This guide is intended for end users.
1. Download the font.
Go to https://fonts.google.com/ and select your favorite font and press the Download Family button, this will download a ZIP file with the fonts, unzip it in a folder and choose the fonts you are going to use. If you have a commercial source, this step is obvious.
2. Convert to Webfonts
Go to https://transfonter.org/ and upload the TTF or OTF files of the font you have selected, then press convert, this will generate a new ZIP file with WOFF, WOFF2 and css files that are the ones we are going to use.
Remember that converting to WOFF and WOFF2 is enough to support browsers like: Firefox since version 3.6, Google Chrome since version 6.0, Internet Explorer 9, Opera since version 11.10, Safari 5.1, other WebKit-based browsers since WebKit build 528. That is, a excellent compatibility, if you want more compatibility you can investigate more about it in Google because it is ample to explain it here.
3. Upload font files
We will upload all font files (those with extension woff, woff2 or eot, ttf, svg if you have decided to give more browser compatibility) to /templates/YOUR TEMPLATE_NAME/fonts/
4. Adding the sources to Joomla
For this step we will need an editor like Textedit, NotePad, NotePad++, Sublime Text or another and. Let's open or create the /templates/YOUR_TEMPLATE_NAME/css/custom.css file in the case of Helix Ultimate generated templates like ours, or edit the main style file if your template doesn't support custom.css or similar.
- Copy all the CSS that is in the stylesheet.css file that is inside the zip that was generated when converting to Webfonts (in step 2), and paste in your custom.css file. The code should be similar to:
@font-face {
font-family: 'Roboto';
src: url('Roboto-Black.woff2') format('woff2'),
url('Roboto-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
} - Change the font path adding ../fonts/, resulting in code similar to:
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Black.woff2') format('woff2'),
url('../fonts/Roboto-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
5. Using the font
You decide how to use the font but the basics are the following:
body{font-family: 'Roboto'; font-weight: normal;}
h1, h2, h3, h4, h5, h6{font-family: 'Roboto';font-weight: bold;}
6. Disabling Google Fonts (external) in Helix.
To disable the fonts that are loaded from Google servers you must go to: System >> Templates >> Site Template Styles >> YOUR_TEMPLATE - ALL STYLES THAT YOU USING >> Template Options button >> Typography Tab >> Disable all fonts from the toggle
If you have followed the steps correctly Joomla should already load your local font.