Hi. You are wrong. This works exactly the same as in J3. This is a very simple procedure and no one would reinvent the wheel to do this job any other way. Most likely you are just doing something wrong. For example, the css file name is not correct or the path to the font files in your code is not correct.

Hi Pavel, I just can say I copied the google font ttf and woff file into the fonts folder and created a custom.css and embedded / amatic-sc-regular - latin / @font-face { font-family: 'Amatic SC'; font-style: normal; font-weight: 400; src: url('../fonts/amatic-sc-v24-latin-regular.eot'); / IE9 Compat Modes / src: local(''), url('../fonts/amatic-sc-v24-latin-regular.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('../fonts/amatic-sc-v24-latin-regular.woff2') format('woff2'), / Super Modern Browsers / url('../fonts/amatic-sc-v24-latin-regular.woff') format('woff'), / Modern Browsers / url('../fonts/amatic-sc-v24-latin-regular.ttf') format('truetype'), / Safari, Android, iOS / url('../fonts/amatic-sc-v24-latin-regular.svg#AmaticSC') format('svg'); / Legacy iOS / } body,p,h1,h2,h3,h4,h5,h6 {font-family: 'Amatic SC', Verdana;}

inside, I also deactived in the template options all typographics

but the google font is not displayed

I also went to pages > options and there I also disabled the google fonts...

still no google font loaded.... :-(

see also https://www.sevika.de/

Hi. In the code of your site there are no google fonts. You can check this by opening the source page's code in the browser.

If you mean Roboto and others, it is from youtube player

Hi Pavel, thnx for quick reply. I made short video about my uploaded google fonts: https://www.loom.com/share/a5051d7a6cc648c7ba08f3250ebdf246 I guess Amatic is a google font for I got it from https://google-webfonts-helper.herokuapp.com/fonts

I meant that there is no font connection through URL like //fonts.googleapis.com/. So you have selfhosted font which you downloaded from Google Fonts site.

For clarity. Under the term "Google font" on the site, usually means a font connected through the URL from Google.

Perhaps due to the inconsistency of terms, I did not understand your question correctly. Now I assume that you make in mind that the font that you uploaded to the site does not work. Right?

If so, go to the template settings and delete wrong code from Custom CSS field

In custom.css file сorrect the path for confidence

from ../fonts/amatic----- to /templates/shaper_helixultimate/fonts/amatic-----

And this is not necessarily

body,p,h1,h2,h3,h4,h5,h6 {font-family: 'Amatic SC', Verdana;}

Enough so

body {font-family: 'Amatic SC', Verdana;}

Pavel you are great, you got the point. Because of you and Paul I stay with joomshaper!!! The path was wrong, got it!

One more: now as I dont configure the font-sizes of the headings and menu items any more through the template options, do I have to configure them in custom.css or can I still use template options and enable typography and choose again the google font and choose correct font size?

I guess I cant because then again google fonts will be loaded from USA, right? so better use custom.css?

I guess I cant because then again google fonts will be loaded from USA, right? so better use custom.css?

Yes, that's right

puuuh , lots of work for I need to style also responsive view for all headings :-(, thanks

sorry Pavel. stille one google font os loaded and I cant find it anywhere:

Font - https://fonts.gstatic.com/s/roboto/v18/kfomcnqeu92fr1mu4mxk.woff2

I disabled in page builder options google fonts I disabled font awesome in advanced template settings but still robot is loaded from google server....

maybe it is in the youtube iframe ???

yes I found out that this is from youtube!

puuuh , lots of work for I need to style also responsive view for all headings :-(, thanks

Not so lots. You can override code from bootstrap just replacing it with your values. At the same time, do not use the values of the font sizes inside the addons - delete all values.

Here example for h2 how you can find it

Css set for h2 that makes font-size responsive on mobile devices

.h2, h2 {
    font-size: calc(1.325rem + .9vw);
}
@media (min-width:1200px) {
    .h2,
    h2 {
        font-size:2rem;
    }
}

Starting from 142 line in bootstrap.min.css you will find all the code for headings that you just need to copy and replace the values. Open this through browser code inspector since the real code is minified

For example, if you want your H1 has 60px font-size for Desktop and proportionally changed font-size depending on the width of the mobile device, configure this so

.h1, h1 {
    font-size: calc(1.375rem + 3.5vw);
}
@media (min-width:1200px) {
    .h1, h1 {
        font-size: 3.75rem;
    }
}

Maybe it's time for a new detailed tutorial how to serve your fonts from your own server. This is a different approach then in the JS documentation.

Most other frameworks offer simple and friendy solutions for Google fonts and the forbidden connection to the google servers because this is set by regulation in a lot of countries.

Hi Robert

Maybe it's time for a new detailed tutorial how to serve your fonts from your own server. This is a different approach then in the JS documentation.

Maybe. But I'm not a member of the JoomShaper team. Just a user like you and share my experience here.

The above today last posts refers to the knowledge of Bootstrap, but not Helix. Since Helix uses Bootstrap you can use the entire power of this framework in addition to Helix options