How to add and use custom fonts

In this tutorial, we are going to learn how to add a custom font to a Joomla theme and how to apply it.

1. Download your font from Internet to your local machine and make sure it’s either in TTF or OTF format.

2. Navigate to http://www.font2web.com/ and upload the font file using the Browse button. Convert and download the font by clicking Convert & Download button.

3. You will receive a zip file, extract the archive.

4. The content of “fonts” folder needs to be transferred to “templates/themeXXXX/fonts/” folder in your Joomla root directory. Now open font.css and change the relative path to the fonts files by adding ../ to fonts/XXX.xxx in url() attributes.

5. So you should get ../fonts/XXX.xxx as a result and your code will look like this:
   
6. Once you are done editing, go to the “templates” folder in your Joomla root, then open your theme directory and proceed to the “css” folder inside. Edit the template.css by adding the code from font.css file at the very top.

7. In order to apply the font you need to add a CSS rule, specify the CSS selector and use font-family property to set the font. Here is an example:
   
   Note, it’s important to use the correct name of the font family, the one that’s used in the fonts.css file you have downloaded.
   Look for font-family property value under @font-face command.

8. Place the rule(s) at the very bottom of the template.css file and save the changes.

Congratulations. Now you know how to add custom fonts and use them within your website. Have a nice day!