Use Google Fonts in Joomla

Google also offers fonts you can use in your website, you can find them at https://www.google.com/fonts . If you want to use these fonts in Joomla and the template you're using doesn't these fonts it self you can add the fonts yourself. The only thing you have to do is find the font you like and edit two files. Here follows the description on how you can make this work.

Find the font you want to use on https://www.google.com/fonts and click on the button Quick use. On the next page you can copy the link from option 3 "Add this code to your website".

google fonts

 

Paste this link in the index.php of your template (not the one of your joomla website). Follow the following steps:

  • Go to Extensions - Template
  • Click in the column "Template" on your template name
  • Click on index.php
  • Scroll to </head> and paste directly above this the link you copied from the google fonts page.

Now you have to edit the CSS-file from your website.

Back on the google fonts page, copy the link from Option 4, Integrate the fonts into your CSS.

How to add this link to your template.css file of your template:

  • Go to Extensions - Template
  • Click in the column "Template" on your template name
  • Click on the folder css
  • Click on template.css

In this file search for the term "body {" and paste the link in that section.

When the title of the articles doesn't change you can use Firebug to retrieve the class of it (for example <h2 class="item-title">). You now can add a new class to the template.css file:

Open the file template.css again
Add the following code:

h2.item-title {
font-family: 'fontnaam', serif
font-size: 28px;