add new font to themler

Hi,

Themler uses system fonts (installed in your system) and google fonts. It does not provide own fonts library.
If you want to use custom font I suggest that you try the following solution:
1. install it in your system and use it as system font. But in this case the font will not be visible to your site visitors who do not have it installed. So you need to link it to the project.
2. For this you need to upload font file (ttf, woff, etc) to your webserver and link to the theme using @font-face css rule.
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

The custom css can be added to he Themler Home tab >> Settings >> Additional CSS.

Thank you,
Olivia

Hi,

How can i do this?

i have this font:
https://www.dafont.com/search.php?q=kg+somebody

Download it and installed on Windows.
Then uploaded to the root folder of WWW.

And in the Settings of Themler:
Additonal CSS:

@font-face {
font-family: KG-somebody;
src: url(https://www.domeinname.com/KGSomebodyThatIUsedToKnow.ttf);
}

I dont see the font appear into the text fonts.

Hi,

You need to apply the font to some element. For example:
h1
{
font-family: KG-somebody;
}
It will work of the link to the font is correct, if browser can display ерша format of font and the font was not blocked by CORS policy.

Thank you,
Olivia

Hi Olivia,

Thanks for your quick reply.
But im sorry, but I cant make this work :(

I have add this into the Additional CSS:

@font-face {
font-family: 'KG-somebody';
src: local('KGSomebodyThatIUsedToKnow'), url(https://www.domeinname.com/KGSomebodyThatIUsedToKnow.ttf) format('truetype');
}

h1
{
font-family: KG-somebody;
}

Then I add a text element, with H1. But it shows the chosen font of Themler, not the CSS one.

Last edited 23 January 2018 by plexforce

Hi,

Do you mean that you're using exactly the code you provided?
The link to the font is not real:
https://www.domeinname.com/KGSomebodyThatIUsedToKnow.ttf
Looks like this is dummy code. You need the real link to the existing font.

Thank you,
Olivia

Yes ofcourse :) haha, I just put a dummy, the real link works. (when i click, it download the font.)

plexforce,

Have you managed to solve the issue with custom fonts?
If not please create a new private topic and provide us with the code you're using with real links and a link to the website that demonstrates the issue.

Thank you,
Olivia

i have get this code (its ok on pc but i cant see it on android phone)
what is wrong in this code for see it in my phone ?

@font-face {
rc: url('HTTPS//.....................');
font-family: 'market_decoregular';
src: url('market_deco-webfont.eot');
src: url('market_deco-webfont.eot?#iefix') format('embedded-opentype'),
url('market_deco-webfont.woff2') format('woff2'),
url('market_deco-webfont.woff') format('woff'),
url('market_deco-webfont.ttf') format('truetype'),
url('market_deco-webfont.svg#market_decoregular') format('svg');
font-weight: normal;
font-style: normal;
}

Hello,

The second line is definitely wrong, maybe a typo.
Then, it is recommended to use absolute URLs for font sources.

Sincerely,
Nettie