Do you want to add custom fonts in Joomla? Custom fonts can help you freshen up your template and make it unique among others. In this article, we will show you how to add custom fonts in Joomla.
There are Joomla templates which come with fully loaded with lots of fonts. But loading too many fonts can slow down your website. That’s why I am going to show you how you can add Custom Fonts to your Joomla template, so it doesn’t slow down your website.
But before adding the fonts, you need to find out some unique and best fonts for your website which can match to your business theme as well as website.
Add Custom Font To Your Joomla Template
How to Find Fonts for Your Joomla?
There are so many places where you can get your custom fonts. You can get a premium font as well as if your budget doesn’t allow you, you can get the free one. Here are few well know resources to find the custom fonts for your website.
From the above sources, you can find a good font for your website.
I’ll be using Houstander by Typia Nesia from www.1001freefonts.com. You’ll most likely get a TTF (TrueType Font) file from this website, which is installable on your operating system.
To be able to use it on your website we have to convert the font to WOFF.
Convert the Font to ‘Web-Friendly’ Formatting
When you download the font from any of above-mentioned resource, you’ll most likely get a TTF (TrueType Font) file from this website, which is installable on your operating system. To be able to use it on your website we have to convert the font to WOFF (Web Open Font Format) using an online converter. I use the Web Font Generator, you can find others too.
Since you have a custom font file, go ahead and convert your font file to WOFF format. Once done, download the converted zip file and extract it. You should see the following files in there:
If you use another converter you may only see the woff and woff2 file, which is fine as well.
Add Custom Fonts To Joomla Template
Once, your fonts are ready for web, you can easily add them to your Joomla website. you just need to follow the simple steps. Here we are using Astroid Framework as our template.
Video Tutorials
Create a new folder called fonts in your template folder and upload the woff files in that folder.
Now go to your primary stylesheet (in this case templates/astroid_template_zero/css/custom.css (if it doesn’t exist you can create one)) and add the following CSS.
@font-face {
font-family: 'houstander_demoregular';
src: url('../fonts/houstanderdemo-webfont.woff2') format('woff2'),
url('../houstanderdemo-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}Please note that my font family name above is (‘houstander_demoregular’) and your’s may be different, so you’ll have to change the file name and font-family name to your font name.
The src URL must point to the actual URL of the woff file, My fonts folder is on the same level as the CSS file, thus I am using ../ to go back a level and access the file using a relative path. You may just use a static path i.e. www.yoursite.com/templates/YOURJOOMLATEMPLATE/fonts/fonename.woff
Once done, save the file and you have your custom font done.
Now if you want to apply it on the body, you can just write the following CSS to your stylesheet.
body {
font-family: houstander_demoregular !important;
}And this should get you the font and styling you need.
We are adding important at the end since that will override the default styles from the stylesheet/backend.
