Archived topic

self-hosting fonts changed the font style

12 replies · Started by markus on April 21, 2020

Viewing posts 1–13 of 13

April 21, 2020 at 9:16 am #1248214

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.

April 21, 2020 at 3:49 pm #1248574

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.

April 21, 2020 at 4:33 pm #1248605

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?

April 22, 2020 at 3:40 am #1249008

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.

April 23, 2020 at 10:28 am #1251813

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;
} );

April 23, 2020 at 2:51 pm #1252196

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

April 23, 2020 at 4:46 pm #1252352

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.

April 23, 2020 at 7:40 pm #1252467

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 !

April 24, 2020 at 9:52 am #1253809

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

April 24, 2020 at 10:14 am #1253872

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.

April 24, 2020 at 4:29 pm #1254309

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.

April 29, 2020 at 9:22 am #1261540

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

April 29, 2020 at 5:02 pm #1262113

Glad you got it sorted :)

This archived topic is closed to new replies.

Start building better websites today.