Joomla Templates Club 406,261 posts

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#188940

You maybe like: How to create new module position (Updated)

You are enjoying our T3 templates running on new T3v3 framework. Yeah, you want to make your website look more attractive with new awesome fonts (Google fonts, True Type fonts …), but you are still wondering how to add these new fonts into our T3 templates. So, the simple guide below will be the answer of your concern.

<blockquote>As an example of this post, the two font types (**) will be added to our JA Brisk template which has been displaying the default “sans-serif” font-family on the content and our integrated “roboto” font-family on the module titles, menu items. </blockquote>

(**): They are Google fonts and True Type fonts (.ttf file)

A. Google fonts.

1. Go to Google fonts webpage.
2. Selecting fonts by clicking “Add to collection” (i.e Hanalei)
3. Copy the generated font link (standard type)
i.e :
<link href='http://fonts.googleapis.com/css?family=Hanalei' rel='stylesheet' type='text/css'>
4. Call new font styles by adding copied font link into templatesja_brisketcassets.xml file. The codes should be:

<?xml version="1.0" encoding="utf-8"?>
<assets>
<scripts>
<file>js/script.js</file>
</scripts>
<stylesheets>
<file><link href='http://fonts.googleapis.com/css?family=Hanalei' rel='stylesheet' type='text/css'></file>
</stylesheets>
</assets>

5. At this step, you need to integrate new font styles into your css.
As you know, on T3 templates, we integrate Less technology of Twitter Bootstrap that requires you to edit/create the css variables for new font, then all .less files will be compiled to corresponding css files when you click “Compile Less to Css” or set Yes to Enable Development mode. In this case, we will change the default font with new font in body {} tag for displaying the font of content by editing the css variables which are located in templatesja_brisklessvariables.less. Open it & replace line:

@baseFontFamily: sans-serif;

with

@baseFontFamily: 'Hanalei', cursive; /*new font-family */


Save & click Compile Less to Css in Template Manager. Then check your website for new font affect.

Note: At step 3, if you need select @import type for font codes format, you need to put the @import url(http://fonts.googleapis.com/css?family=Hanalei); line at the beginning of templatesja_briskcsscustom.css file.

If you select Javascript codes type, you need to put these into the end of templatesja_brisktplsblockshead.php file.

B. TrueType fonts.

<blockquote>TrueType is an outline font standard developed by Apple and Microsoft in the late 80’s … The primary strength of TrueType was originally that it offered font developers a high degree of control over precisely how their fonts are displayed, right down to particular pixels, at various font sizes</blockquote> ~ Wikipedia.org

As you see that TrueType (.ttf) is an outline font format used on the operating systems of Apple and Microsoft so that you need to convert it to a web font format to be displayed on browsers. Web-font generator of FontsQuirrel is pretty good online tool for converting .ttf files.

1. Upload your .ttf file & accept the agreement, then Download your kit.
2. Create a new font folder in templatesja_briskfonts path and attract your generated font package into. (i.e I named this folder “new_fonts”).
3. Open ja_brisketcassets.xml file and add a line for calling new font style. The codes should be:

<?xml version="1.0" encoding="utf-8"?>
<assets>
<scripts>
<file>js/script.js</file>
</scripts>
<stylesheets>
<file>/fonts/new_fonts/stylesheet.css</file>
</stylesheets>
</assets>

5. As mentioned in the beginning of this post that we will use new TrueType font style for the font of menu items and module titles
a. Menu items: You need to open templatesja_brisklessnavigation.less file and replace lines:

// Links
// -----
.t3-mainnav .navbar .nav > li > a {
border-top: 0;
font-weight: normal;
font-family: 'robotobold';
padding: (@baseLineHeight / 4) (@baseLineHeight - 5);
text-shadow: none;
}

with

// Links
// -----
.t3-mainnav .navbar .nav > li > a {
border-top: 0;
font-weight: bold; // Tiny style for easy-looking menu item
font-size: 13px;
font-family: 'din-lightregular';
padding: (@baseLineHeight / 4) (@baseLineHeight - 5);
text-shadow: none;
}


b. Module titles: You need to open templatesja_brisklessvariables.less file, then replace lines:

@headingsFontFamily: sans-serif;

with

@headingsFontFamily: 'din-lightregular';

Note: You can know the font-family of new TrueType font in stylesheet.css file of generated package.

6. Save and click Compile Less to Css in Template Manager. Then you can enjoy with new font styles.

Hope this will be helpful. Any comments are really appreciated !

4 users say Thank You to phong nam for this useful post

1. pavit
2. TomC
3. JA Developer
4. lapixelerie

[Author]

Posts