[Resolved] self-hosting fonts changed the font style

[markus]

Hi, followed the very nice guide here: https://docs.generatepress.com/article/adding-local-fonts/

– Selected and unzipped the Google font files to: public_html/stellarsoundlabs.com/wp-content/themes/generatepress/fonts
– Added the CSS Google code with correct paths for the fonts to Appearance>Theme Editor
– Added function php snippet:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Poppins';

    return $fonts;
} );

-Changed to the new system font for all styles in Appearance>Customize>Typography

Now, my main body font is very heavy/bold now (wasn’t before) though ‘300’ is selected in Typography>Body. Could you advise, thanks.

[Tom]

Hi there,

When you downloaded the fonts, did you download the styles you needed? For example, there might be 300, 400, 500, 900 etc..

Your @font-face CSS should have blocks for each weight (style/variant).

Also, be sure to upload the fonts to your child theme, or you’ll need to re-do the process once you update the theme.

[markus]

Yes I did those steps. I see all the weights in wpcontent-themes-gp-fonts folder.

I put the css in Appearance>Theme Editor, i will have to learn about child themes next. But this folder should work, no?

[David]

Hi there,

this document explains Child Themes:

https://docs.generatepress.com/article/using-child-theme/

Would recommend you do this – as any changes you make to the Theme folders will be lost when the theme is updated.

[markus]

Fonts have been moved to public_html/stellarsoundlabs.com/wp-content/themes/generatepress-child/fonts

Font CSS links have been moved to https://stellarsoundlabs.com/wp-admin/theme-editor.php?theme=generatepress-child&Submit=Select

Here is the CSS content:

--------------------------------------------------
/*MJS042120 SELF-HOSTING GOOGLE FONT */
/* poppins-200 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-200.eot'); /* IE9 Compat Modes */
  src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'),
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-200.woff') format('woff'), /* Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-200.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-300 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Poppins Light'), local('Poppins-Light'),
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-300.woff') format('woff'), /* Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-300.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-300italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Poppins Light Italic'), local('Poppins-LightItalic'),
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-300italic.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-regular - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Poppins Regular'), local('Poppins-Regular'),
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Poppins Italic'), local('Poppins-Italic'),
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-italic.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-500 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Poppins Medium'), local('Poppins-Medium'),
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-500.woff') format('woff'), /* Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-500.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-600 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-600.woff') format('woff'), /* Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-600.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-700 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Poppins Bold'), local('Poppins-Bold'),
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-700.woff') format('woff'), /* Modern Browsers */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://stellarsoundlabs.com/wp-content/themes/generatepress/fontspoppins-v9-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
}

AFter these lines, all the other custom CSS site tweaks appear.

I also added this to child theme functions.php (as per the article/guide above):

//REQ'D BY GENERATEPRESS FOR GOOGLE FONT HOSTING
add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Poppins';

    return $fonts;
} );

[markus]

I have also set the Typography in the Customizer to use the installed hosted fonts, but I still cannot get the hosted fonts to work. stellarsoundlabs.com Thanks

[Tom]

That all looks good. In your actual content, is the text bolded using the editor? I’m seeing some <strong> tags in there surrounding the bold text.

[markus]

Yes, bolding is mine, and it’s funny how the bolded text looks like the correct font but the rest is wack.

I’m somewhat new to customizing a site, and learning a lot from you guys. But I have been over the Customization and CSS options several times now, and cannot get this to work with a child theme installed. Hope you come up with something, thanks !

[Tom]

Can you link me to a specific page where I can see non-bolded text showing up as bold?

[markus]

confused. that is not the issue.

on https://stellarsoundlabs.com/ bolded text is somehow in the correct font. All non-bolded copy, and all headings, are messed up.

[Tom]

Ah I see now.

It’s hard to view your source because you’re minifying your HTML, but I am seeing this: https://www.screencast.com/t/LztFsHyZAG

You can see it’s only defining the 700 weight, which is the one that’s working on your website.

[markus]

Problem solved–just a backslash typo in the path of the font files (fontspoppins > fonts\poppins)
Thank you!

[Tom]

Glad you got it sorted 🙂

[Author]

Posts