[Resolved] self-hosting fonts changed the font style

Home Forums Support self-hosting fonts changed the font style

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1248214
    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.

    #1248574
    Tom
    Lead Developer
    Lead Developer

    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.

    #1248605
    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?

    #1249008
    David
    Staff
    Customer Support

    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.

    #1251813
    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;
    } );
    #1252196
    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

    #1252352
    Tom
    Lead Developer
    Lead Developer

    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.

    #1252467
    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 !

    #1253809
    Tom
    Lead Developer
    Lead Developer

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

    #1253872
    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.

    #1254309
    Tom
    Lead Developer
    Lead Developer

    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.

    #1261540
    markus

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

    #1262113
    Tom
    Lead Developer
    Lead Developer
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.