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 1 year 4 days ago #14523

  • JohnO
  • JohnO's Avatar
  • Offline
  • Administrator
  • Posts: 5236
  • Thank you received: 858
  • Karma: 98
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: 6 months 2 weeks ago by JohnO.
The topic has been locked.
Time to create page: 0.094 seconds
Powered by Kunena Forum

Use code   JUNE19 at checkout


10% off Everything!

Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.