Archived topic
Custom fonts
9 replies · Started by Jason on April 21, 2022
What am I missing with custom font?
1. Upload font file to server - check
2. @fontface in CSS - check
3. Load font through font section of Customiser - check (if I am correct this negates the need for the pho snippet previously used?)
4. Watch my font load when setting it for a header etc - fail
All cache and optimisations disabled, have tried turning off every other plugin. Struggling to figure out how I am going wrong. I have used this exact method on other websites with success.
Suggestions on where to look would be appreciated.
Hi Jason,
To clarify, are you using the same font-family name set in the @font-face rules?
For instance:
https://share.getcloudapp.com/DOu4EoQ1
https://share.getcloudapp.com/xQuqoYWW
https://share.getcloudapp.com/YEurwQ1Q
If so, to have a better understanding of the issue, may you kindly provide the link to the site in question? May we also know the specific font-family and where you’re applying it to?
You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Hope to hear from you soon. :)
Hi Yes, I have followed all those steps.
I am attempting to install "rm-typerighter-old.regular" which is in customiser and hosted locally
I can successfully load 'Special Elite" which is hosted on a separate domain
Can you try removing the .regular in your @font-face font-family as such?: https://share.getcloudapp.com/L1uRbNxN
Then try using it with just rm-typerighter-old.
Kindly let us know how it goes. :)
I have tried a few different alterations of the font name and it does not work
It seems that the font is failing to be decoded: https://share.getcloudapp.com/RBunA4Rq
It may be that the font is corrupted or there is another issue with the font file. Kindly try re-uploading the font and test again.
Hope this clarifies. :)
I have tried with other fonts and get the same issue unfortunately.
I think I will just have to use a Google font and let Perfmatters take care of storing it locally as that seems to work
Hi there,
remove you current CSS.
And at the very top of your Customizer > Additional CSS add this:
@font-face {
font-family: 'typerighter';
font-weight: normal;
font-style: normal;
src: url('https://needleninja.shop/wp-content/uploads/fonts/rm-typerighter-old.regular.woff2') format('woff2');
}Then in the Typography Font Manager add: typerighter
Then try setting that font to an element
Thanks, I am going with a different font and found that placing @font-face at the beginning of css has got me across the line. Many thanks
Glad to hear you found a solution!
