Welcome, Guest
Username: Password: Remember me

TOPIC: How to load a Google font locally in your template

How to load a Google font locally in your template 3 years 1 month ago #14523

  • JohnO
  • JohnO's Avatar
  • Offline
  • Administrator
  • Posts: 5605
  • Thank you received: 907
  • Karma: 99
How to load a Google font locally in your template.

** Should you no longer wish to load fonts from Googles webservers then this is the tutorial for you. **

Download the google font you wish to use. This is usually a zip file. When downloaded extract the files on your computer.

Upload font files to your template. Use FTP or your hosting account file manager to upload your font files to the fonts folder located in the template of your choice. Your templates are located in the templates folder on your server usually in a folder like PUBLIC_HTML/templates.

EXAMPLE - templates/joomlage0000-templatename/fonts

Step 3:
Add your downloaded google font files into CSS.

To use the fonts you need to load them in your css using @fontface. Just add the following css code into the bottom of the css/nexus.css file in your template. Edit as required.

In the example below I load 3 font files for the font Roboto.
/*My Custom Font*/
@font-face {
  font-family: 'roboto';
  src: url('../fonts/Roboto-Black.ttf') format('truetype'),
  src: url('../fonts/Roboto-Light.ttf') format('truetype'),
  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

Step 4:
Styling with your new font.
Note: Your newly added font will not be listed with the fonts in the dropdowns in the templates styling parameters. You will need to write the css required to style what you want in the template.
Below is an example of how to use your font for styling. Add your styling code into the custom css code parameter in the templates styling parameters.

Example 1 ( Using the Downloaded font to style H2 Heading )
h2 {
font-family: 'roboto', Arial, sans-serif;

Your new locally installed google font should now be working.
Last Edit: 2 years 7 months ago by JohnO.
The topic has been locked.
Time to create page: 0.095 seconds
Powered by Kunena Forum

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.