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

[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

[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?

[Tom]

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 🙂

[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

[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 */
}

[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)

[Tom]

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

[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.

[Tom]

Great to hear! Thank you 🙂

[Author]

Posts