Video Transcript:

Hi, I’m John from JoomlArt. And today we will talk about how to add new font and how to replace font for your template.

T3 Framework supports Google fonts, font awesome version 3 and 4 and any web font. Firstly, we will add new web font. Copy the font package to the fonts folder inside your template folder. Open the font package, you see list of files here. Now open the assets.xml file then define the new font, add path to the font stylesheet.

Now to use the font, open the variables.less file in the less folder. Scroll down to find the font style. Here is the global font style of your template, now let’s change to the new font. You should open the font style.css file to get the font family name, copy it and paste to the variables.less file and save the file. Reload your site front-page, font is changed.

Next, we will add Google fonts. Here is the main page of Google font. Search fonts, add the font to your collection. You can select font styles, then copy the font code. Open the assets.xml file again, paste the font code here. Open the variables.less file again, replace web font with google font, you can change, customize other elements. Reload the front-page, see, font is changed.

You can add many fonts as you want. For example, here we add Raleway and roboto fonts. You can customize font of any element in your site. Let try to change font of main menu. Find navbar-nav class then add font style, let’s use roboto font. Main menu font is changed. Now track the full path to the less file to add the style to.

That’s it for today, for more video tutorials, please check more videos at: http://www.youtube.com/user/JoomlArt

Thanks for watching.