Flash Sale. Use code FLASHOCT18 at checkout for 40% Discount!!

logo-responsive
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 4 months 6 days ago #14523

  • JohnO
  • JohnO's Avatar
  • Offline
  • Administrator
  • Posts: 4939
  • Thank you received: 816
  • Karma: 95
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. **

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

Step:2
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 code into the custom css code parameter in the templates styling parameters. 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;
font-weight:100;
font-size:20px;
}


Your new locally installed google font should now be working.
The topic has been locked.
Time to create page: 0.115 seconds
Powered by Kunena Forum

Use code   OCT18 at checkout

     October    

10% off Everything!