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

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?

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

Thank you Tom!

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

Much appreciate the help!

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

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)

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

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.

Great to hear! Thank you :)