[Resolved] Can't get my Heading Font Bebas Neue to Show! What am I doing wrong?

Home Forums Support [Resolved] Can't get my Heading Font Bebas Neue to Show! What am I doing wrong?

Home Forums Support Can't get my Heading Font Bebas Neue to Show! What am I doing wrong?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #744885
    Bodie

    I am having the toughest time getting my key headline font “Bebas Neue” to load.

    I have meticulously gone over the steps outlined by Tom here: https://docs.generatepress.com/article/adding-local-fonts/

    I am locally loading two fonts: Minion Pro and Bebas Neue. Minion Pro loads fine. However, when I choose Bebas Neue for my H1 settings, Minion Pro loads there, too?

    Here is my setup. I can’t figure out what is going wrong:

    1) Fonts installed properly in Fonts Folder

    https://www.dropbox.com/preview/3.%20DOCUMENT%20ARCHIVES/BODIE%20DROPBOX%20FILES/zShared/Web/GP%20Files.png?role=personal

    2) CSS Created Based on Instructions (I’m sure this is where the problem lies)

    @font-face {
      font-family: 'BebasNeue';
      font-style: normal;
      font-weight: 400;
      src: url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsBebasNeue-Regular.eot'); /* IE9 Compat Modes */
      src: local('BebasNeue Regular'), local('BebasNeue-Regular'),
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsBebasNeue-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsBebasNeue-Regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsBebasNeue-Regular.woff') format('woff'), /* Modern Browsers */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsBebasNeue-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsBebasNeue-Regular.otf') format('embedded-opentype'), /* Open Type */
    }
    
    @font-face {
      font-family: 'Minion Pro';
      font-style: normal;
      font-weight: 400;
      src: url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsMinionPro-Regular.eot'); /* IE9 Compat Modes */
      src: local('Minion Pro Regular'), local('MinionPro-Regular'),
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsMinionPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsBebasNeue-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsBebasNeue-Regular.otf') format('embedded-opentype'), /* Open Type */
    }
    
    @font-face {
      font-family: 'Minion Pro';
      font-style: italic;
      font-weight: 400;
      src: url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsMinionPro-Italic.eot'); /* IE9 Compat Modes */
      src: local('Minion Pro Regular'), local('MinionPro-Regular'),
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsMinionPro-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsBebasNeue-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
    }
    
    @font-face {
      font-family: 'Minion Pro';
      font-style: bold;
      font-weight: 800;
      src: url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsMinionPro-Bold.otf'); /* IE9 Compat Modes */
      src: local('Minion Pro Regular'), local('MinionPro-Regular'),
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsMinionPro-Italic.otf?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    }

    3. Filter added in functions.php (also could be improved probably)

    add_filter( 'generate_typography_default_fonts', 'bq_add_minion_pro' );
    function bq_add_minion_pro( $fonts ) {
        $fonts[] = 'Minion Pro - Local';
        return $fonts;
    }
    
    add_filter( 'generate_typography_default_fonts', 'bq_add_bebas_neue' );
    function bq_add_bebas_neue( $fonts ) {
        $fonts[] = 'Bebas Neue - Local';
        return $fonts;
    }

    Everything comes up as expected in the Customizer, but when I choose Bebas Neue, it loads Minion Pro.

    Here is the Bebas Neue website if you are curious what the font is supposed to look like: http://bebasneue.com

    Love some help!

    Thanks so much.

    Bodie

    GeneratePress 2.2.1
    GP Premium 1.7.5
    #744934
    Bodie

    Ok I realized that none of my links were https, so I changed them and now it works on Chrome but not Safari.

    Maybe it’s caching at this point. Come up for you at all?

    #745119
    Tom
    Lead Developer
    Lead Developer

    I see a couple issues:

    1. There’s no / after /fonts in your URLs.

    2. The font name in your filter needs to match the font-family name in your CSS.

    So if your CSS has BebasNeue, your filter needs to be this:

    add_filter( 'generate_typography_default_fonts', 'bq_add_bebas_neue' );
    function bq_add_bebas_neue( $fonts ) {
        $fonts[] = 'BebasNeue';
        return $fonts;
    }

    That should do it ๐Ÿ™‚

    #745139
    Bodie

    Thank you Tom!

    I also noticed there were no / in the Google font example, so I will add that.

    Much appreciate the help!

    Bodie

    #745149
    Bodie

    Ok well I cleaned up all the names and paths mentioned above and it works great on Chrome, but still looks the same on Safari.

    How does it look for you? https://www.youcanlearnthebible.com

    My guess is caching but just to be sure I am sharing my updated code based on Tom’s recommendations:

    add_filter( 'generate_typography_default_fonts', 'bq_add_minion_pro' );
    function bq_add_minion_pro( $fonts ) {
        $fonts[] = 'MinionPro';
        return $fonts;
    }
    
    add_filter( 'generate_typography_default_fonts', 'bq_add_bebas_neue' );
    function bq_add_bebas_neue( $fonts ) {
        $fonts[] = 'BebasNeue';
        return $fonts;
    }

    And the CSS:

    @font-face {
      font-family: 'BebasNeue';
      font-style: normal;
      font-weight: 400;
      src: url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fontsBebasNeue-Regular.eot'); /* IE9 Compat Modes */
      src: local('BebasNeue'), local('BebasNeue'),
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/BebasNeue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/BebasNeue.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/BebasNeue.woff') format('woff'), /* Modern Browsers */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/BebasNeue.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/BebasNeue.otf') format('embedded-opentype'), /* Open Type */
    }
    
    @font-face {
      font-family: 'MinionPro';
      font-style: normal;
      font-weight: 200;
      src: url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/MinionPro-Regular.eot'); /* IE9 Compat Modes */
      src: local('MinionPro'), local('MinionPro'),
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/MinionPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/MinionPro-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/MinionPro-Regular.otf') format('embedded-opentype'), /* Open Type */
    }
    
    @font-face {
      font-family: 'MinionPro';
      font-style: italic;
      font-weight: 200;
      src: url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/MinionPro-Italic.eot'); /* IE9 Compat Modes */
      src: local('MinionPro'), local('MinionPro'),
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/MinionPro-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/MinionPro-Italic.ttf') format('truetype'), /* Safari, Android, iOS */
    }
    
    @font-face {
      font-family: 'MinionPro';
      font-style: bold;
      font-weight: 400;
      src: url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/MinionPro-Bold.otf'); /* IE9 Compat Modes */
      src: local('MinionPro'), local('MinionPro'),
           url('https://www.youcanlearnthebible.com/wp-content/themes/generatepress_child/fonts/MinionPro-Bold.otf?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    }
    #745153
    Bodie

    It loads on iOS! Still won’t load on Safari on my Mac. Whatever. It’s right.

    Next Question:

    The code above seems very repetitive and not D-R-Y, is there a way I might consolidate it?

    It works! (mostly)

    #745505
    Tom
    Lead Developer
    Lead Developer

    Your last src in each block should end with a ;.

    For example, replace format('embedded-opentype'),

    With: format('embedded-opentype');

    The multiple @font-face blocks are necessary, but you can simplify the function:

    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
        $fonts[] = 'MinionPro';
        $fonts[] = 'BebasNeue';
    
        return $fonts;
    } );
    #745730
    Bodie

    THANK YOU!! THANK YOU!! THANK YOU!!

    It is finally loading correctly everywhere. I didn’t even notice the trailing comma! Rookie mistake, always look for the trailing comma!

    Alas, I can get back to building the site. I sure learned a lot about self-hosting fonts through this exercise, though.

    Tom, I can’t thank you enough for your support and amazing theme. You are the best.

    #745737
    Tom
    Lead Developer
    Lead Developer

    Great to hear! Thank you ๐Ÿ™‚

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.