Archived topic
OTF won't load
6 replies · Started by troyw on July 22, 2021
Hey team,
I have added the following HelveticaNeue OTF fonts to the Child Theme.
Once again I am trying to use your help document https://docs.generatepress.com/article/adding-local-fonts/ but again, I am not using a Google Font, so these instructions do not help at all.
Please, please, please can Generatepress create a Help Page for adding non Google Fonts?
As I have added these to the Child Theme, what do I do next?
Thanks
Hi troy,
The documentation didn't include mime type for OTF.
Try adding this and see if it makes any difference. :D
$existing_mimes['otf'] = 'application/otf';
or
$existing_mimes['otf'] = 'application/font-sfnt';
Or better yet, if you have access to FTP, just upload the file through that. :D
Hey,
I have given up on the OTF files for now as I can't obtain the CSS for it. I know I can add $existing_mimes['otf'] = 'application/otf'; but how do I generate the code for the Style Sheet?
What I have done for now is converted some of my OTF files to WOFF & WOFF2 using Font Squirrel. This provides me with the Style Sheet CSS as well. However I still can't figure out how to tell the site where to find the fonts. Again, the documentation on https://docs.generatepress.com/article/adding-local-fonts/ is unclear about this and uses the Google Fonts Helper.
How do I do this without the Google Fonts Helper?
Here is an example of the style sheet code I have created;
@font-face {
font-family: 'helvetica_neueregular';
src: url('https://www.mywebsite.com.au/public_html/wp-content/themes/mywebsite-child/fonts/helveticaneue-blackitalic-webfont.woff2') format('woff2'),
url('https://www.mywebsite.com.au/public_html/wp-content/themes/mywebsite-child/fonts/helveticaneue-blackitalic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Even adding the url, I am still not getting the fonts to show up?
I have changed the URL to the following, but still no luck?
@font-face {
font-family: 'helvetica_neueregular';
src: url('https://www.mysite.com.au/wp-content/themes/mysite-child/fonts/helveticaneue-blackitalic-webfont.woff2') format('woff2'),
url('https://www.mysite.com.au/wp-content/themes/mysite-child/fonts/helveticaneue-blackitalic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Just to be clear, I can see the fonts in the Customiser, but when I chose the Fonts, it does not give me the fonts. I just get a standard wWordpress font (not sure which one)?
OK, so I seem to have limited success. The fonts are appearing in every known browser such as Firefox, Brave, Safari and Opera. But they do not show in Google Chrome?
Does Chrome not recognise WOFF or WOFF2?
Here is example of code;
@font-face {
font-family: 'Helvetica Neue LT Std';
src: url('https://www.mysite.com.au/wp-content/themes/mysite-child/fonts/HelveticaNeueLTStd-XBlkCn.woff2') format('woff2'),
url('https://www.mysite.com.au/wp-content/themes/mysite-child/fonts/HelveticaNeueLTStd-XBlkCn.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
OK, all fixed. It was that dreaded Cache again!
OK, all fixed. It was that dreaded Cache again!
Nice one. glad you got it sorted. Thanks for letting us know.
But to still answer the question:
For OTF importation, you basically add a new URL(); for the file on the src: property.
Example:
url('https://www.mysite.com.au/wp-content/themes/mysite-child/fonts/HelveticaNeueLTStd-XBlkCn.otf') format('otf');
You do this for every font file type you want to include. :D