Archived topic

Local Font Not Loading

10 replies · Started by Brent on May 23, 2022

Viewing posts 1–11 of 11

May 23, 2022 at 9:53 am #2229857

Hi Guys -

I'm trying to get a local font to display. I've uploaded the font to the host files and I've added this to the CSS:

@font-face {
font-family: ‘HoffersScript-DEMO’;
font-style: normal;
font-weight: 400;
src: url('https://myfoodpreneur.com/wp-content/themes/generatepress_child/fonts/HoffersScript-DEMO.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://myfoodpreneur.com/wp-content/themes/generatepress_child/fonts/HoffersScript-DEMO.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://myfoodpreneur.com/wp-content/themes/generatepress_child/fonts/HoffersScript-DEMO.woff2') format('woff2'), /* Super Modern Browsers */
url('https://myfoodpreneur.com/wp-content/themes/generatepress_child/fonts/HoffersScript-DEMO.woff') format('woff'), /* Modern Browsers */
url('https://myfoodpreneur.com/wp-content/themes/generatepress_child/fonts/HoffersScript-DEMO.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://myfoodpreneur.com/wp-content/themes/generatepress_child/fonts/HoffersScript-DEMO.svg#HoffersScript-DEMO') format('svg'); /* Legacy iOS */
}

When I click on any of the links above, the font file does open, so I think the links are good. I've added this to the Child Theme functions.php file:

add_filter( 'generate_typography_default_fonts','tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
$fonts[] = 'HoffersScript-DEMO';
return $fonts;
}

I'm using the font with Elementor and it's working alright there. I've cleared my cache, both on the site and on the server and have new versions of everything installed. Any idea why I can't get it to work? I'm using the font on the Site Title.

Thanks!

May 23, 2022 at 10:41 am #2229920

Hi there,

I believe the links are the issue.

Can you try the steps here first?
https://docs.generatepress.com/article/adding-local-fonts/

Let me know :)

May 23, 2022 at 10:49 am #2229931

Hi Leo -

I just replaced all the links with the direct media upload option and changed the css and it is still not working:

@font-face {
  font-family: ‘HoffersScript-DEMO’;
  font-style: normal;
  font-weight: 400;
  src: url('https://myfoodpreneur.com/wp-content/uploads/2022/05/HoffersScript-DEMO.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://myfoodpreneur.com/wp-content/uploads/2022/05/HoffersScript-DEMO.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://myfoodpreneur.com/wp-content/uploads/2022/05/HoffersScript-DEMO.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://myfoodpreneur.com/wp-content/uploads/2022/05/HoffersScript-DEMO.woff') format('woff'), /* Modern Browsers */
       url('https://myfoodpreneur.com/wp-content/uploads/2022/05/HoffersScript-DEMO.ttf) format('truetype'), /* Safari, Android, iOS */
}

Thoughts?

May 23, 2022 at 4:26 pm #2230125

Can you provide password to see your site?

May 23, 2022 at 4:45 pm #2230139

Hi Ying -

Sure thing, thanks

May 23, 2022 at 4:51 pm #2230141

Hi Ying -

I just realized, you meant the front end password. I've included it.

May 23, 2022 at 5:21 pm #2230159

Can you replace your font face CSS with below code?



@font-face {
  font-family: 'HoffersScript-DEMO';
  font-style: normal;
  font-weight: 400;
  src: url('https://myfoodpreneur.com/wp-content/uploads/2022/05/HoffersScript-DEMO.eot'); /* IE9 Compat Modes */
  src: 
       url('https://myfoodpreneur.com/wp-content/uploads/2022/05/HoffersScript-DEMO.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://myfoodpreneur.com/wp-content/uploads/2022/05/HoffersScript-DEMO.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://myfoodpreneur.com/wp-content/uploads/2022/05/HoffersScript-DEMO.woff') format('woff'), /* Modern Browsers */
       url('https://myfoodpreneur.com/wp-content/uploads/2022/05/HoffersScript-DEMO.ttf') format('truetype');/* Safari, Android, iOS */
}

May 23, 2022 at 5:32 pm #2230163

Hi Ying -

I replaced, but not seeing a change. Actually, I reviewed my @font-face and yours, and I didn't see a difference?

Thanks for the help

Brent

May 23, 2022 at 5:41 pm #2230171

I updated the code here:
https://generatepress.com/forums/topic/local-font-not-loading/#post-2230159

Give it another try.

Actually, I reviewed my @font-face and yours, and I didn’t see a difference?

Oh there's difference :)

May 23, 2022 at 5:47 pm #2230174

Hi Ying -

You're awesome, thanks. That did it. I think it was due to having a "," instead of a ";"?

Thanks again!

May 23, 2022 at 5:48 pm #2230179

There're more :P

This archived topic is closed to new replies.

Start building better websites today.