Adding Specific Font To Travus Template - Question | JoomShaper

Adding Specific Font To Travus Template

TD

TOCHTERMANN DAMIEN

Template 1 week ago

Hello How can i use specific (non- GoogleFont) font in my website ? Beyond the Mountains is the name of the font. I have otf and ttf files. Thanks

0
14 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago

Hi Damien,

we have guides for that, also on youtube you can find at least two.

Start from lecture of: https://www.joomshaper.com/documentation/sp-page-builder/sp-page-builder-3/google-fonts-and-dsgvo

there are tips and useful links inside that document. Remember that .woff is more recommended than .tff as web font format!

0
TD
TOCHTERMANN DAMIEN
Accepted Answer
1 week ago

Is it possible to continue using both Google Fonts and "specific" (non google) fonts with that tricks ? it would be fine to give both possibilities without coding 😉Thanks

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago

You can use both Google Fonts from both settings SPPB or Template, and extra custom font for selected classes, ID or HTML tags by custom CSS. CSS coding is necessery for Custom Font. But it's very easy task for most webmasters.

If you are webmaster from Germany or Austria - I don't recommend using Google Fonts loaded directly from Google server. EU Law restictions.

0
TD
TOCHTERMANN DAMIEN
Accepted Answer
1 week ago

I'm in France but i mean it is same...I would be great to have an option to automatically store selected Google fonts. For example Template Creator component does it.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago

Yes, I know that here in EU we all have almost this same GDPR law, but not all countries are so strick as German court.

Maybe in the near future, I will ask becuase it's a good idea, to have at least 5-10 popular Google fonts downloaded with option to choose them from Typography settings. But by now, you have to use your webmaster skills.

0
TD
TOCHTERMANN DAMIEN
Accepted Answer
1 week ago

If it may help, Template Creator includes a search engine allowing to select a font and download it directly in server for local use.

0
TD
TOCHTERMANN DAMIEN
Accepted Answer
1 week ago

I followed tutorials but my font doesnt look as expected. My customer would like this font https://www.dafont.com/beyond-the-mountains.font on the green links (title) here : https://www.jemangeterroir.2c-events.com/index.php/fr/content_page/item/78-domaine-de-la-tour-bajole-a-saint-maurice-les-couches

Thanks

PS : it works fine on smartphone but not on computer

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago

Desktop Firefox/Windows view

foto_8853_2022.png

maybe check from different browsers, on mine seems to be working fine.

0
TD
TOCHTERMANN DAMIEN
Accepted Answer
1 week ago

No;.... it should look like this : https://prnt.sc/3A-Hdg9ldyyt on all resolutions / browsers. Thanks for help to fix it.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago

Oh, now I see... wait a minute

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago

CSS analizing

0
TD
TOCHTERMANN DAMIEN
Accepted Answer
1 week ago

Take the needed time... i have whole day and more ;)

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago

UPDATED CSS

#flexicontent .fc_item_title {
@import url('www.jemangeterroir.2c-events.com/templates/travus/fonts/beyond_the_mountains1-webfont.woff');
font-family: 'Beyond The Mountains', cursive;
font-weight: normal; font-style: normal;
}
  1. Wrong order!
  2. use full URL to that font file, with https:// !!! add in my code
  3. you forgot about @import
  4. and ";" must be just after ")" !!

But our role here is not teaching CSS, please!

0
TD
TOCHTERMANN DAMIEN
Accepted Answer
1 week ago

Sorry, it is the first time i'm confronted to local fonts using in bought templates... I should change the code lines in custom.css , exact ? Thanks for all

0