[Resolved] Custom fonts

[Jason]

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.

[Fernando]

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. 🙂

[Jason]

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

[Fernando]

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. 🙂

[Jason]

I have tried a few different alterations of the font name and it does not work

[Fernando]

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. 🙂

[Jason]

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

[David]

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

[Jason]

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

[David]

Glad to hear you found a solution!

[Author]

Posts