TOPIC: How to load a Google font locally in your template
How to load a Google font locally in your template
1 year 5 months ago #14523
Thank you received: 866
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
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.
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 )