Custom Fonts Not Working in Cornerstone

[rscreativ]

Not really sure where to start. I’ve tried adding custom fonts through the Font Manager as well as the styles.css in a child theme of Pro. I cannot get my fonts to appear in Cornerstone or front-end viewports or devices.

I’m using TypeKit and custom fonts. The TypeKit fonts load perfectly through the Font Manager. I’ve assigned the custom fonts as below in the screenshot. And it’s weird, when I try to select one of these fonts for my palette, the changes don’t save. It always reverts back to ‘Select Font.’ The only font that actually saves in the palette is the one from TypeKit.

Now, in the ‘Global CSS’ editor in Cornerstone, I can force all but the ‘ABCGintoNord-Medium’ font using:

h1, h2, h3 {
  font-family: 'ABCGintoNord-Bold' !important;
}

or similar. Again, this seems to work for all but the ‘Medium’ font variant above. I’ve included screenshots of the fonts loaded into the Font Manager as well as how they appear when I try to set my palette choices.

Thanks for any and all help.

[marc_a]

Hey Ryan,

Thanks for reaching out!

We are unsure why it reverts back to select a font when you select your font. There could be a custom code or plugin that conflicts with the functionality. I Would suggest that you run through with these troubleshooting procedures.

1. TESTING FOR THEME RELATED ISSUE
2. TESTING FOR PLUGIN CONFLICT
3. THEME UPDATE
4. CHILD THEME
5. CSS/JS CUSTOMIZATION
6. VERSION COMPATIBILITY

It would also be best to check our Font Manager docs:

• https://theme.co/docs/font-manager

If none of that helps, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[rscreativ]

I’ve already run through that troubleshooting list. I should have mentioned that. I’m not runny any plugins aside from WP Rocket, which is disabled entirely. I’ve also disabled caching server-side.

Since I posted, I removed the custom fonts from the Font Manager and added this code the the child theme stylesheet:

@font-face {
  font-family: 'ABCGintoNord-Bold';
  src: url('https://rscreativ.flywheelsites.com/wp-content/uploads/2023/04/ABCGintoNord-Bold.woff2') format('woff2'),
  	   url('https://rscreativ.flywheelsites.com/wp-content/uploads/2023/04/ABCGintoNord-Bold.woff') format('woff');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'ABCGintoNord-Medium';
  src: url('https://rscreativ.flywheelsites.com/wp-content/uploads/2023/04/ABCGintoNord-Medium.woff2') format('woff2'),
  	   url('https://rscreativ.flywheelsites.com/wp-content/uploads/2023/04/ABCGintoNord-Medium.woff') format('woff');
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Fleya-Medium-Italic';
  src: url('https://rscreativ.flywheelsites.com/wp-content/uploads/2023/04/Fleya-Medium-Italic.woff2') format('woff2'),
  	   url('https://rscreativ.flywheelsites.com/wp-content/uploads/2023/04/Fleya-Medium-Italic.woff') format('woff');
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

And this code to the Global CSS editor in Cornerstone:

h1, h2, h3 {
	font-family: 'ABCGintoNord-Bold', sans-serif !important;
	font-weight: 700;
}

h4, h5, h6, .x-anchor-text-primary {
	font-family: 'ABCGintoNord-Medium', sans-serif !important;
	font-weight: 500;
}

So when your team goes in to have a look this is what they’ll see. The font files, etc. are loaded into the Media Library so your team can do whatever they need to do with them to get them to work.

Thanks. Login details coming in a secure note.

[marc_a]

Hey Ryan,

I’ve checked te custom CSS in the child theme and the Global CSS inside Cornerstone then the font is just showing fine properly on the frontend. If your problem is something to do with the font weight, you can add the !important so that you can override it.

Hope that helps.

[rscreativ]

Hey Marc, thanks for the reply. The problem is only the ‘Ginto Bold’ and ‘Fleya’ fonts appear. The ‘Ginto Medium’ does not. I’m not sure what the issue is there.

Also, when viewing the front end on my testing devices (iPhone, Android, etc.) none of the custom fonts appear, just the fall back sans-serif. See screenshot.

I would 100% prefer to be able to use the Font Manager rather than have to code which elements receive which fonts–this is one of the major appeals of Cornerstone to me because I can use the palettes universally.

If you’re able to help me sort out why the Font Manager isn’t working for these custom fonts that would be helpful.

[rscreativ]

Marc, it looks like I’ve got the problem sorted. I think this was an issue related to CORS. The woff2 files were serving via HTTPS but the woff files were serving from HTTP. Not really sure how this is possible when they’re both in the same Media Library in WP.

Either way. I had my host force all requests from HTTPS and after clearing browser cache and waiting about 30-minutes it appears everything is working fine.

I’ve even removed all CSS from child theme and the Global CSS editor and reverted back to the Font Manager with preset palettes and it’s working great.

Thanks for your help. If you can add a topic for your Common Issues items 1-6 that you posted, as well as in your help docs it would be to include the CORS issue. It was the last thing I thought to check and only thought of it after browsing dozens of other forum threads about custom fonts not working. Could have saved me a lot of time I think.

For anyone else experiencing custom fonts not displaying correctly it’s worth checking the HTTP or HTTPS from within the Console in DevTools.

Cheers.

[charlie]

Very glad you figured that out. I actually remember this happening once in Pro6 beta so writing troubleshooting notes on this font serving over HTTP issue would do us some good. Redirecting all HTTP to HTTPS will be good for your server in the long run too. I’m guessing it was an absolute path that didn’t get changed as the site went from HTTP to HTTPS. Thanks for the notes have a great day!