Embed fonts

How to use/embed Web and Google fonts in your template

For templates developed with JA T3v2 framework, you can embed any Google font.

#1: select Google font

Access the Google font main site: https://www.google.com/fonts, select Google font you want to use for your site, copy the font name.

Select google font

#2: embed Google font

From back-end setting panel of your site, access Extensions >> Template Manager then open JA Template style. In the Profiles tab, select profile you want to embed Google fonts for, edit Google font.

Select google font

You can use different Google fonts for supported content types here: logo, slogan, Main menu, sub menu... If you leave the fields blank, it will get the setting of Global. You can also configure different different Google fonts for different layouts.

An other way to embed Google font is using templates/ja_template/cssctemplate.css file. Open the file then embed the Google font you want to use in your site.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=greek,latin>);

You can embed any web font to use for templates developed with JA T3v2 framework.

#1. add web font folder

Copy your web font folder to: templates/ja_template/fonts/.

Add font folder

#2: embed font

Open file template.css located in the templates/ja_template/css them import font(s) you just added.

embed fonts

@import url(../fonts/tex_gyre_adventor/stylesheet.css);

T3 Framework supports Google font or Web font, you can embed the any font you want to use for your template.

#1: get Google font url

Get google font url

#2: embed the Google font

Open the assets.xml file located in templates/template_folder/etc folder, define the Google font(s).

Add google fonts

<stylesheets>
<file>http://fonts.googleapis.com/css?family=Raleway:400,100,300,500,600,700c</file>
</stylesheets>

You can embed any font to use for templates developed with T3 framework.

#1. add web font folder

Copy your font folder to: templates/ja_template/fonts/.

Add font folder

#2: embed web font

Open file assets.xml located in the templates/ja_template/etc them define font(s) you just added.

Define fonts

<stylesheets>
<file>fonts/novecentowide/stylesheet.css</file>
</stylesheets>

You can replace Google font using in your site with other Google font or web fonts.

#1. declare font

Open file assets.xml located in the templates/ja_template/etc them declare Google font you want to replace for current font.

declare fonts

<stylesheets>
<file>fonts/font-awesome/css/font-awesome.min.css</file>
<file>http://fonts.googleapis.com/css?family=Raleway:400,100,300,500,600,700c</file>
<file>http://fonts.googleapis.com/css?family=Arvo</file>
</stylesheets>

#2: replace global font

Open the variables.less in templates/ja_template/less/, replace the font family. The font define in the variables.less file is for global.

Replace global font

// Typography
// -------------------------
@font-family-sans-serif: "Arvo", serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;

#3: replace font for specific element

You can declare font for specific element, for example, we'll change the font setting for megameu so let's open the megamenu.less, declare font for megamenu.

// The caption
// -----------
.mega-caption {
color: @gray Light;
font-size: @T3smallFontSize;
margin-top: 3px;
font-weight: normal;
text-transform: none;
font-family: 'Arvo',serif;
}

#4: compile LESS to CSS

Now compile LESS to CSS so that the customization is compiled to CSS and get it worked when you turn the dev mode off.

compile LESS to CSS

T3 framework supports Font Awesome by default. Font awesome version 4 is supported from version 2.0.0+ for T3 BS3 blank template so it's only available for templates that are developed with T3 BS3 blank template. Templates developed with T3 Blank template supports Font awesome 3. That mean one template will support one version of Font awesome only.

Font awesome detail and focs

List of templates support font awesome 3

  • JA T3 Blank
  • JA Brisk
  • JA Mero
  • JA Onepage
  • JA Mitius
  • JA Argo
  • JA Fubix
  • JA Hawkstore
  • JA Smashboard
  • JA Beranis
  • JA Fixel
  • JA Muzic

List of templates support font awesome 4

  • JA T3 BS3 Blank
  • JA Magz
  • JA Obelisk
  • JA Appolio
  • JA Bookshop
  • Purity III
  • JA Biz
  • JA Decor
  • JA Sugite

From now, the monthly templates will be developed with T3 BS3 blank template then they support Font awesome 4.

For languages that has special characters like Arab, Greek ... when you get font issues, please check:

#1: Database collation

For those languages, you need to change your database collation to UTF8. You can use tool to do that or manually fix it.

When creating new database, please make sure you select utf8_general_ci collation.

create database

For existing database, you can use querry to change its collation to utf8.

ALTER DATABASE  CHARACTER SET utf8 COLLATE utf8_unicode_ci;

#2: Check if your font supports the language

After change the database to utf8 but font issues still happen, please check if your font supports the language or not. If your font does not support the language, you need to embed new font that support the language.

Firstly, get the font that supports your language, it can be Google fonts or Web fonts

Example:

get font

Secondly, embed the font