Google Fonts –

[TRDK]

Would it improve performance if I would install Open Sans on the server?

——————–

/* open-sans-regular – latin */
@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 400;
src: local(‘Open Sans’), local(‘OpenSans’),
url(‘https://cdn.example.com/fonts/open-sans-v13-latin-regular.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://cdn.example.com/fonts/open-sans-v13-latin-regular.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 – latin */
@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 700;
src: local(‘Open Sans Bold’), local(‘OpenSans-Bold’),
url(‘https://cdn.example.com/fonts/open-sans-v13-latin-700.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://cdn.example.com/fonts/open-sans-v13-latin-700.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

[David Martin – Support]

Hi,

You would still need to load the two assets from the server.

If your CDN is faster than Google’s then you may get a faster speed, but only in terms of ms.

Thanks.

[Frankytank]

Sorry to revive an old post, but is there an easy way to download google fonts into the server/theme?

I think that fontdesk is not an option anymore to get customizable fonts.

Thanks

[Rui Guerreiro – SUPPORT]

Hi,

Not sure about it. I found this on google search using only the last year results.
https://www.news47ell.com/how-to/host-google-fonts-locally-wordpress/

-Rui

[Frankytank]

HI Rui,

Thanks for the link, it work!
I just need a bit of help:

I uploaded the css into the custom css of dante theme but I would like to specify 3 things :
I would like to use open-sans 600 for body text
I would like to use open-sans 700 for headings texts
How could I adjust the font size for the different headings (h1, h2..)?

Thanks!

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v14-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../fonts/open-sans-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v14-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v14-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v14-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
       url('../fonts/open-sans-v14-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v14-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v14-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v14-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v14-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v14-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/open-sans-v14-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
       url('../fonts/open-sans-v14-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v14-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v14-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v14-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v14-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

[Rui Guerreiro – SUPPORT]

I’m not sure about this, will forward to my colleague David.

-Rui

[Frankytank]

It is very complicated?

[David Martin – Support]

Hi,

You would use simply font CSS properties to change the weights. Ref: https://www.w3schools.com/css/css_font.asp.

Ex:

h1,
h2 {
   font-weight: 700 !important;
}
body,
p,
ul,
ol {
   font-weight: 600 !important;
}

[Frankytank]

Hi,

Just a question about the whole process.

SO I uploaded the files into download from the google web font helper into one of my uploads folder

I added the css code to the custom css into dante’s area for this

But how to I get the theme to actually use that css, that font. In the font options, if either I choose standard or default fonts, it do not load the right font.

So I’m kind of stuck here

THanks!

[David Martin – Support]

Hi,

You won’t need to upload/download anything. In Theme Options => Custom CSS, simply add their Google font supplied embed: @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');

[Frankytank]

Hi David,

Thanks for your answer

The goal is actually to host the fonts on my server so when the page load it wont have to call the information from google server…

Edit : using this tool https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin

[Swift Ideas – Ed]

Hi Frankytank,

You can use this Custom CSS to assign the font family:

/* Body Font */
body, h6, #sidebar .widget-heading h3, #header-search input, .header-items h3.phone-number, .related-wrap h4, #comments-list > h3, .item-heading h1, .sf-button, button, input[type="submit"], input[type="email"], input[type="reset"], input[type="button"], .spb_accordion_section h3, #header-login input, #mobile-navigation > div, .search-form input, input, button, select, textarea {

}

/* Headings Font */
h1, h2, h3, h4, h5, .custom-caption p, span.dropcap1, span.dropcap2, span.dropcap3, span.dropcap4, .spb_call_text, .impact-text, .impact-text-large, .testimonial-text, .header-advert, .sf-count-asset .count-number, #base-promo, .sf-countdown, .fancy-heading h1, .sf-icon-character {

}

/* Menu Font */
nav .menu li {

}

Hope that helps.

Ed

[Frankytank]

This reply has been marked as private.

[Swift Ideas – Ed]

No, it would be like so:

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v14-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* Body Font */
body, h6, #sidebar .widget-heading h3, #header-search input, .header-items h3.phone-number, .related-wrap h4, #comments-list > h3, .item-heading h1, .sf-button, button, input[type="submit"], input[type="email"], input[type="reset"], input[type="button"], .spb_accordion_section h3, #header-login input, #mobile-navigation > div, .search-form input, input, button, select, textarea {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
}

...

so the font-face is only declared once.

Hope that helps.

– Ed

[Frankytank]

This reply has been marked as private.