This article describes how to use google or any other external font in Themler themes.
- Download the font:
Please note that google provides .ttf files to download only.
In our example we'll use Roboto font.
- Extract Roboto.zip file and you will see all 10+ Roboto fonts with .ttf file extension. Usually you just need regular, bold and italic fonts on your site. They are called like this:
- Roboto-Regular.ttf
- Roboto-Bold.ttf
- Roboto-Italic.ttf
- Now you need to convert your .ttf font file to woff2, eot, wof formats also. You can do it with any font converter service.
- Upload the downloaded font file(s) to your server. In our example we'll upload them into the
/fonts
folder in the web root directory.
- Open Themler >> Home tab >> Settings >> Additional CSS and add css rule to load custom font into the theme stylesheet:
/* Roboto regular */ @font-face { font-family: "Roboto"; src: url("/fonts/Roboto-Regular.eot"); src: url("/fonts/Roboto-Regular.eot?#iefix") format('embedded-opentype'), url("/fonts/Roboto-Regular.woff2") format('woff2'), url("/fonts/Roboto-Regular.woff") format('woff'), url("/fonts/Roboto-Regular.ttf") format('truetype'); font-weight: 400; font-style: normal; } /* Roboto italic */ @font-face { font-family: "Roboto"; src: url('/fonts/Roboto-Italic.eot'); src: url('/fonts/Roboto-Italic.eot?#iefix') format('embedded-opentype'), url('/fonts/Roboto-Italic.woff2') format('woff2'), url('/fonts/Roboto-Italic.woff') format('woff'), url('/fonts/Roboto-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; } /* Roboto bold */ @font-face { font-family: "Roboto"; src: url('/fonts/Roboto-Bold.eot'); src: url('/fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('/fonts/Roboto-Bold.woff2') format('woff2'), url('/fonts/Roboto-Bold.woff') format('woff'), url('/fonts/Roboto-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }
The relative path to the font can be replaced with absolute path e.g.
http://mysite.com/fonts/Roboto-Regular.eot
.
- Set the desired font-family to the theme text, headings or links:
body { font-family: "Roboto"; font-weight: 400; font-style: normal; } h1, h2, h3, h4, h4, h6 { font-family: "Roboto"; font-weight: 700; font-style: normal; } a { font-family: "Roboto"; font-weight: 400; font-style: italic; }
NOTE: In order to apply the desired font to specific control or text inside control you will need to find the class or other identifier which can be used to apply font-family manually. For this open website front end, select the desired text >> then right click and "Inspect". Then find the class of the element or class of the parent element. As alternative you can open browser developer tools with F12 on keyboard and then use navigation option on the "Elements" tab to inspect the desired element.
This is example of the menu item text css selector:

Custom CSS should look as follows:
.bd-menu-42.nav-pills .bd-menuitem-22:not(.bd-mega-item) > a, .bd-menu-42.nav-pills .bd-menuitem-22:not(.bd-mega-item) > a:link, .bd-menu-42.nav-pills .bd-menuitem-22:not(.bd-mega-item) > a:visited
{
font-family: "Roboto";
font-weight: 400;
font-style: normal;
}
This article describes how to use google or any other external font in Themler themes.
<ol>
<li>Download the font:
!google-fonts-1.png!
Please note that google provides .ttf files to download only.
In our example we'll use **Roboto** font.
</li>
<li>Extract *Roboto.zip* file and you will see all 10+ Roboto fonts with *.ttf* file extension. Usually you just need regular, bold and italic fonts on your site. They are called like this:
<ul>
<li>Roboto-Regular.ttf</li>
<li>Roboto-Bold.ttf</li>
<li>Roboto-Italic.ttf</li>
</ul>
</li>
<li>Now you need to convert your .ttf font file to *woff2, eot, wof* formats also. You can do it with any font converter service.
</li>
<li>Upload the downloaded font file(s) to your server. In our example we'll upload them into the `/fonts` folder in the web root directory.
</li>
<li>Open **Themler** >> **Home tab** >> **Settings** >> **Additional CSS** and add css rule to load custom font into the theme stylesheet:
/* Roboto regular */
@font-face {
font-family: "Roboto";
src: url("/fonts/Roboto-Regular.eot");
src: url("/fonts/Roboto-Regular.eot?#iefix") format('embedded-opentype'),
url("/fonts/Roboto-Regular.woff2") format('woff2'),
url("/fonts/Roboto-Regular.woff") format('woff'),
url("/fonts/Roboto-Regular.ttf") format('truetype');
font-weight: 400;
font-style: normal;
}
/* Roboto italic */
@font-face {
font-family: "Roboto";
src: url('/fonts/Roboto-Italic.eot');
src: url('/fonts/Roboto-Italic.eot?#iefix') format('embedded-opentype'),
url('/fonts/Roboto-Italic.woff2') format('woff2'),
url('/fonts/Roboto-Italic.woff') format('woff'),
url('/fonts/Roboto-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
/* Roboto bold */
@font-face {
font-family: "Roboto";
src: url('/fonts/Roboto-Bold.eot');
src: url('/fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
url('/fonts/Roboto-Bold.woff2') format('woff2'),
url('/fonts/Roboto-Bold.woff') format('woff'),
url('/fonts/Roboto-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
The relative path to the font can be replaced with absolute path e.g. `http://mysite.com/fonts/Roboto-Regular.eot`.
</li>
<li>Set the desired font-family to the theme text, headings or links:
body
{
font-family: "Roboto";
font-weight: 400;
font-style: normal;
}
h1, h2, h3, h4, h4, h6 {
font-family: "Roboto";
font-weight: 700;
font-style: normal;
}
a
{
font-family: "Roboto";
font-weight: 400;
font-style: italic;
}
</li>
**NOTE:** In order to apply the desired font to specific control or text inside control you will need to find the class or other identifier which can be used to apply font-family manually. For this open website front end, select the desired text >> then right click and "Inspect". Then find the class of the element or class of the parent element. As alternative you can open browser developer tools with F12 on keyboard and then use navigation option on the "Elements" tab to inspect the desired element.
This is example of the menu item text css selector:
!google-fonts-2.png!
Custom CSS should look as follows:
.bd-menu-42.nav-pills .bd-menuitem-22:not(.bd-mega-item) > a, .bd-menu-42.nav-pills .bd-menuitem-22:not(.bd-mega-item) > a:link, .bd-menu-42.nav-pills .bd-menuitem-22:not(.bd-mega-item) > a:visited
{
font-family: "Roboto";
font-weight: 400;
font-style: normal;
}