How to add Google fonts to Joomla template?




Using Google fonts is a great way to make your Joomla site more attractive and professional. In this tutorial, we'll show you how to add Google fonts to the Joomla template.




Adding Google font


  1. Go to Google Fonts ➝ select font ➝ click Select this style ➝ copy the code.
  2. Log in to Joomla ➝ click System ➝ Templates ➝ Site Templates ➝ open the template you need ➝ go to edit the file index.php​.
  3. Paste the font code into between <head>...</head>.




Define Google font in CSS


Open your template CSS file ➝ add CSS rules to specify families from your selected Google font, e.g:

font-family: 'Roboto', sans-serif;




Using Google fonts


Here are examples of how the added font can be used on site. 


If you decided to use added font for the whole site add to the CSS file next code:

body {
 font-family: 'FontName';
}



For headings:

h1, h2, h3, h4, h5, h6 {
 font-family: 'FontName';
}



For paragraph:

p {
 font-family: 'FontName';
}



For specific element:

.element-class {
 font-family: 'FontName';
}



Didn't find the font you need in Google Fonts? See the documentation on how to add custom font to a website through @font-face. 




Adding Google fonts in minutes


The Gridbox comes with the Font Library that allows you to upload Google fonts quickly and easily. How to add Google fonts in minutes, see the documentation: 

Related articles