Joomla 3.x. How to change a Google web font

This tutorial shows how to change a Google web font in Joomla 3.x template.

Joomla 3.x. How to change a Google web font

In order to change a Google web font in Joomla 3.x template, you should follow these steps:

1. Let’s change font for the menu items. You can use the Firebug plugin to find the font used for the particular text on your template. Information on how to use firebug you can find at Firebug. Mozilla Firefox plugin:

   

2. Open templates/themeXXXX/index.php file and locate the link to the Google font:

   

3. We need to replace this font with modified one or just add line with the new font in case original font will be also used.

   1. Open http://www.google.com/webfonts and select appropriate font using filters:

      

   2. Pay attention to the character set. Select the font that supports your character set. We have selected Cyrillic Extended in order to be able to use Cyrillic fonts:

      

   3. Add font to collection and click Use:

      

   4. Select appropriate character set and Copy the generated code:

      

4. Replace original code or just add code in case you are going to use old font as well. Modified code you can see on the screenshot below:

   

5. Now we need to change the font in CSS file. You can modify this file by using firebug (right click > ‘Copy location’, you can also see the line that code is located):

   

6. Scroll down to the page with Google font and copy font to your CSS file:

   

7. Modified code should look like on the screenshot below:

   

8. Refresh home page and check how menu looks:

   

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to change a Google web font