Categories

Featured templates

Joomla 3.x. How to add and use custom fonts

Guillaume Dumas August 10, 2015
Rating: 5.0/5. From 1 vote.
Please wait...

This tutorial shows how to add any custom font to your Joomla site and apply it to text.

Joomla 3.x. How to add and use custom fonts

In order to apply a custom font to your site’s text, you should perform the following:

  1. Download a font from the Internet or just copy it from your system folder. For example, Windows stores its fonts in the C:\Windows\Fonts directory. Make sure the font format is either TTF (TrueType Font) or OTF (OpenType Font).

  2. Go to Font 2 Web website, choose the font file from your local system and hit the CONVERT&DOWNLOAD button:

    Joomla_3.x._How_to_add_and_use_a_custom_font-1.jpg

  3. You’ll get a zip archive. We need the fonts folder and fonts.css file that are inside the archive:

    Joomla_3.x._How_to_add_and_use_a_custom_font-2.jpg

  4. Upload the contents of the fonts folder to the templates/themeXXXX/fonts/ directory on your server. Make sure the files have the permissions set to 644:

    Joomla_3.x._How_to_add_and_use_a_custom_font-3.jpg

  5. Open up the fonts.css file, locate url() attributes and correct their URLs from fonts/XXX.xxx to ../fonts/XXX.xxx (add two periods and a forward slash at the beginning). You also should change the font-family attribute to coincide with the names of files:

    Joomla_3.x._How_to_add_and_use_a_custom_font-4.jpg

  6. Open up the templates/themeXXXX/css/template.css file and scroll down to the very bottom. There you need to paste the code copied from the fonts.css file.

  7. Now you can apply the new font to any element by specifying the font-family attribute. You should add the following code to the very bottom of the file templates/themeXXXX/css/template.css

    			.icemegamenu > ul > li > a.iceMenuTitle {
    			font-family: newfont;
    			}
    		

    .icemegamenu > ul > li > a.iceMenuTitle is the element specific selector. Sometimes the font-family attribute may already be declared in another file, and to overwrite it, you need to either find that place in code and put your font name instead or add the important specifier:

    			.icemegamenu > ul > li > a.iceMenuTitle {
    			font-family: newfont !important;
    			}
    		

    The resulting code should look like this:

    Joomla_3.x._How_to_add_and_use_a_custom_font-5.jpg

  8. Save the changes in the templates/themeXXXX/css/template.css file and upload it to the server.

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to add and use custom fonts

Creative Joomla Templates
This entry was posted in Joomla! Tutorials and tagged custom, font, joomla. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket