Google Font installed in System Fonts not rendering on devices other than my own

Solved...

Applying and using System Fonts

1 Download and Install the font required to your PC eg AHDN.tff

2 Restart the PC so it and therefore Themler can pick up the new System font

3 Apply the new System Font in Themler as required eg to Heading H1 then save your template

4 Check the browser rendering/correct display on own PC first. This will display correctly because the System Font is installed on the same PC

To display on all other devices and browsers the font needs uploading to your server template and then Themler told where it is ...

5 Upload the AHDN.tff font file to

http://www.yourdomainname.com/templates/yourtemplatename/css/

6 Add following to 'Additional CSS'

@font-face {
font-family: "AHDN";
src: local("AHDN"), url("http://www.yourdomainname.com/templates/yourtemplatename/css/AHDN.ttf")
format("truetype");
}

7 Your font should now display on Safari, Android, iOS

NOTE: The above steps apply to the the Truetype font only. For all other font types you can use the following guide for adding to 'Additional CSS'

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes /
src: url('webfont.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
url('webfont.woff2') format('woff2'), / Super Modern Browsers /
url('webfont.woff') format('woff'), / Pretty Modern Browsers /
url('webfont.ttf') format('truetype'), / Safari, Android, iOS /
url('webfont.svg#svgFontName') format('svg'); / Legacy iOS */
}

Further info below

https://css-tricks.com/snippets/css/using-font-face/

Last edited 20 June 2016 by richard25

Hi

For some reason I cannot get this to work on another website although I have used exactly the same principal

The Additional CSS code is

@font-face {
font-family: "EUROSTI3";
src: local("EUROSTI3"), url("http://www.delta-global.co.uk/templates/themler_showcase/css/EUROSTI3.ttf") format("truetype");
}

and the ttf file is uploaded up to the site correctly(visit the url below and it will download

http://www.delta-global.co.uk/templates/themler_showcase/css/EUROSTI3.ttf

Cheers

Hi

I have followed the post below

http://answers.themler.com/questions/41734/how-to-add-chinese-font-like-microsoft-yahei

But although I have followed it exactly, the font I have uploaded and set in Additional CSS is not rendering on any other device but my own

The additional CSS is

@font-face {
font-family: "EEUROSTI1";
src: local("EUROSTI1"), url("http://www.delta-global.co.uk/templates/themler_showcase/css/EUROSTI1.TTF") format("truetype");
}

@font-face {
font-family: "EUROSTI3";
src: local("EUROSTI3"), url("http://www.delta-global.co.uk/templates/themler_showcase/css/EUROSTI3.TTF") format("truetype");
}

@font-face {
font-family: "EUROSTI4";
src: local("EUROSTI4"), url("http://www.delta-global.co.uk/templates/themler_showcase/css/EUROSTI4.TTF) format("truetype");
}

All the fonts are on the server at the locations above. I have also attached them

Cheers

Hi,

This question is not related to the theme.
The font you provided can be rendered in IE only. In case you properly specified the font-family of html elements. Currently I see 'EurostileExtended-Roman-DTC' instead of 'EUROSTI4', for example.

You can generate the proper code and fonts here using different free services like:
https://www.fontsquirrel.com/tools/webfont-generator

Thank you,
Olivia

Hi

Thanks. I have uploaded the resulting .woff and .woff2 files and applied the Additional CSS code to the template below

@font-face {
font-family: 'eurostileregular';
src: url('http://www.delta-global.co.uk/templates/themler_showcase/css/eurosti-webfont.woff2') format('woff2'),
url('http://www.delta-global.co.uk/templates/themler_showcase/css/eurosti-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

How do I now go about applying this font in Themler. Should it appear as a Web Font in the Font list?

Cheers

Hi

Ive just tried this as well and it has not worked

Cheers

@font-face {
font-family: 'Eurostile';
src: url('http://www.delta-global.co.uk/templates/themler_showcase/css/eurosti-webfont.woff2') format('woff2'),
url('http://www.delta-global.co.uk/templates/themler_showcase/css/eurosti-webfont.woff') format('woff'),
url('http://www.delta-global.co.uk/templates/themler_showcase/css/Eurosti.TTF') format(truetype);
}

Last edited 22 July 2016 by richard25

Hi

Apologies the css code above has worked just needed a browser cache clear

Cheers

You are welcome. Feel free to contact us in any other occasion.

Sincerely,
Hella

Hallo,
leider funktioniert das bei mir auch nicht. Google-fonts werden immer noch vom Google-Server abgerufen.

Was habe ich gemacht.
1. Google Fonts (ttf) auf den Rechner geladen.
2. Google Fonts konvertiert (woff, woff2, eot)
3. Alle Fonts (ttf, woff, woff2, eot) in das CSS-Verzeichnis meines Templates geladen
4. In Themler Additional CSS folgenden Eintrag gemacht.

@font-face {
font-family: 'signika_negativeregular';
src: url('http://...../templates/...../css/signikanegative-regular-webfont.eot');
src: url('http://...../templates/...../css/signikanegative-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://...../templates/...../css/signikanegative-regular-webfont.woff2') format('woff2'),
url('http://...../templates/...../css/signikanegative-regular-webfont.woff') format('woff'),
url('http://...../templates/...../css/signikanegative-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

In Themler konnte ich die Schrift unter System-Fonts finden, auswählen und anwenden.
Ich habe diese global aber auch überall einzeln (h1...h2... body) ausgewählt.

Im Quelltext der Seite sehe ich aber das die Schrift immer noch vom Google-Server geladen wird, ob wohl diese nicht in Themler nicht über Google-Webfont sondern System-Fonts gladen wurde.

Wo könnte der Fehler liegen?
Das Problem, ich brauche ein Lösung, habe knapp 30 Themlerprojekte wo ich die google-Fonts entfernen muss oder serverseitig einbinden muss.

Der Trick mit: body h1, h2, h3, h4, h5, h6 {font-family: 'signika_negativeregular';} in der Additional CSS funktioniert zwar, hilft mir leider nicht viel, da damit nur Text und Überschriften verändert werden. Ich verwende aber spezifisch für Blockheader und Menüs manchmal andere Schriften.
Ich weiß aber nicht wie ich die über die Additional CSS ansprechen kann.

Hello,
unfortunately that does not work for me either. Google fonts are still being retrieved from the Google server.

What have I done.
1. Google fonts (ttf) loaded on the calculator.
2. converted Google fonts (woff, woff2, eot)
3. All fonts (ttf, woff, woff2, eot) are loaded into the CSS directory of my template
4. Made the following entry in Themler Additional CSS.

@ font-face {
font-family: 'signika_negativeregular';
src: url ('http: //...../templates/...../css/signikanegative-regular-webfont.eot');
src: url ('http: //...../templates/...../css/signikanegative-regular-webfont.eot? #iefix') format ('embedded-opentype'),
url ('http: //...../templates/...../css/signikanegative-regular-webfont.woff2') format ('woff2'),
url ('http: //...../templates/...../css/signikanegative-regular-webfont.woff') format ('woff'),
url ('http: //...../templates/...../css/signikanegative-regular-webfont.ttf') format ('truetype');
font-weight: normal;
font-style: normal;

}

In Themler I was able to find, select and apply the font under system fonts.
I've selected these globally but also individually (h1 ... h2 ... body).

In the source code of the page, but I see that the font is still loaded from the Google server, although probably not in Themler not via Google Webfont but System fonts was gladen.

Where could the mistake lie?
The problem, I need a solution, have nearly 30 Themlerprojekte where I have to remove the google fonts or server-side must integrate.

The trick with: body h1, h2, h3, h4, h5, h6 {font-family: 'signika_negativeregular';} in the Additional CSS works, unfortunately does not help me much, because it only changes text and headlines. However, I sometimes use different fonts specifically for block headers and menus.
I do not know how I can address the additional CSS.

How do I do it right now? Thank you for your help.
Greeting Frank

Last edited 10 June 2018 by info1360

Hi,

In Themler I was able to find, select and apply the font under system fonts.

In the source code of the page, but I see that the font is still loaded from the Google server

Unfortunately Themler does not know from what list (google fonts or system fonts) you selected the font. Themler see the google font and generated the link to the font. If you want to select google font from the system fonts list and use it in this way you will need to manually remove links to google fonts from the theme.

As alternative you can use custom css to apply the desired font. In this case you will need to use non-google font as basic font for headings and text in Themler and then inspect the desired elements in browser to find the classes which can be used to apply the custom font.

http://answers.themler.io/articles/9064/how-to-use-google-fonts-locally

Thank you,
Olivia