fbpx

Astroid 2.4 Landed with Joomla 4 Compatibility Download Now

Welcome, Guest
Username: Password: Remember me

TOPIC: (SOLVED) Local google fonts

Local google fonts 1 year 7 months ago #12018

  • SaMILE
  • SaMILE's Avatar
  • Offline
  • Senior Member
  • Posts: 48
  • Thank you received: 1
  • Karma: 0
Hi,
I would like to import google fonts locally. I uploaded the fonts I use on my website to my webspace and tried to link them via custom.css
/* amatic-sc-regular - latin */
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/amatic-sc-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'),
       url('../fonts/amatic-sc-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/amatic-sc-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/amatic-sc-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/amatic-sc-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/amatic-sc-v11-latin-regular.svg#AmaticSC') format('svg'); /* Legacy iOS */
}
/* andada-regular - latin */
@font-face {
  font-family: 'Andada';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/andada-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Andada Regular'), local('Andada-Regular'),
       url('../fonts/andada-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/andada-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/andada-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/andada-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/andada-v10-latin-regular.svg#Andada') format('svg'); /* Legacy iOS */
}
/* varela-round-regular - latin */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/varela-round-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Varela Round Regular'), local('VarelaRound-Regular'),
       url('../fonts/varela-round-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/varela-round-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/varela-round-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/varela-round-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/varela-round-v11-latin-regular.svg#VarelaRound') format('svg'); /* Legacy iOS */
}

The website still connects to fonts.gstatic.com though. How can I stop it from doing so?
Here is the link to my website: t1p.de/lutv
Thanks for your help!
Sam
The topic has been locked.

Local google fonts 1 year 7 months ago #12023

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 3769
  • Thank you received: 576
  • Karma: 98
Hello,

Please watch this video. It will help you.



Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The topic has been locked.

Local google fonts 1 year 7 months ago #12067

  • SaMILE
  • SaMILE's Avatar
  • Offline
  • Senior Member
  • Posts: 48
  • Thank you received: 1
  • Karma: 0
Hi,
Well it kind of worked. It does load the fonts locally. The website also connects to the google server though.

First I had the same fonts set in Helix3 under typography as I added in the custom.css. The website had the right fonts but I wasn't sure if they where loaded locally or not. So I changed the fonts in Helix3 but kept the custom.css file.
@font-face {
  font-family: 'varela_roundregular';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/varela-round-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/varela-round-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/varela-round-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/varela-round-v11-latin-regular.svg#VarelaRound') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'amatic_scregular';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/amatic-sc-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/amatic-sc-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/amatic-sc-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/amatic-sc-v11-latin-regular.svg#AmaticSC') format('svg'); /* Legacy iOS */
}
@font-face {
 font-family: 'andadaregular';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/andada-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/andada-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/andada-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/andada-v10-latin-regular.svg#Andada') format('svg'); /* Legacy iOS */
}
body, h3, h4, h5 {
    font-family: varela_roundregular !important;
}
h1, h2, h6, .sp-megamenu-parent {
    font-family: amatic_scregular !important;
}
flipbox {
    font-family: andadaregular !important;
}
Now it does show the right font but it still connects to fonts.googleapis.com to load the fonts set in Helix3. It does that even if the fonts in helix3 and the custom.css are the same.
How do I stop the website from connectiong to fonts.googleapis.com?

Thanks for your help! Sam
The topic has been locked.

Local google fonts 1 year 7 months ago #12115

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 3769
  • Thank you received: 576
  • Karma: 98
Disable Google font from the template setting. See the attachment

Thanks,
Chandan
Attachments:
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The topic has been locked.

Local google fonts 1 year 7 months ago #12145

  • SaMILE
  • SaMILE's Avatar
  • Offline
  • Senior Member
  • Posts: 48
  • Thank you received: 1
  • Karma: 0
Oh, why didn't I think about that... :silly:
It's an easy solution. It works now with local fonts!
Thank you so much for your help!
Cheers Sam
The topic has been locked.

Local google fonts 1 year 7 months ago #12155

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 3769
  • Thank you received: 576
  • Karma: 98
Great!

Let us know if you have any more question for us.

Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The topic has been locked.
Moderators: chandandeep
Time to create page: 0.342 seconds