Custom Font not working on mobile

[BurntMatch]

Hi there.

I have been researching old support threads in the previous knowledge base, and this one, but cannot seem to find one that works. I have included the custom font script in my custom CSS a few times now thinking i may have left something out, but the font still doesn’t want to show up on mobile. Any assistance would be greatly appreciated.

Thanks very much.

Adam.

[thai]

Hi Adam,

Could you please provide us with your website URL and let us know which devices you’re testing?

Thanks.

[BurntMatch]

Login Information

[BurntMatch]

I am previewing my page on my Apple iPhone 7 Plus.

[christopher]

Hi there,

Thank you for providing the login information, but please kindly consider that this is a public forum and giving the login information openly is not a good idea, I removed the post you made and added as a Secure Note which also you can use to send a private note to us in the forum:

How To Get Support

Actually, the font is not showing in Chrome desktop browser either:

Would you please kindly give us more detailed information on how you added the custom font so we can check the case on your website and follow up?

Thank you.

[BurntMatch]

Hello Christopher. Thanks for your response. Sorry for not making the last post private. I will keep that in mind for the future. Please find below the CSS I have used for the custom font.

@font-face {
font-family: ‘GarageGothic-Bold’ !important;
src: url(‘http://www.burntmatch.com.au/public_html/wp-content/themes/x/Fonts/GarageGothic-Bold.ttf’);
src: url(‘http://www.burntmatch.com.au/public_html/wp-content/themes/x/Fonts/GarageGothic-Bold.eot?#iefix’) format(‘embedded-opentype’),
url(‘http://www.burntmatch.com.au/public_html/wp-content/themes/x/Fonts/GarageGothic-Bold.woff’) format(‘woff’),
url(‘http://www.burntmatch.com.au/public_html/wp-content/themes/x/Fonts/GarageGothic-Bold.svg’) format (‘svg’);
}
@font-face {
font-family: ‘GarageGothic-Regular’ !important;
src: url(‘http://www.burntmatch.com.au/public_html/wp-content/themes/x/Fonts/GarageGothic-Regular.ttf’);
src: url(‘http://www.burntmatch.com.au/public_html/wp-content/themes/x/Fonts/GarageGothic-Regular.eot?#iefix’) format(‘embedded-opentype’),
url(‘http://www.burntmatch.com.au/public_html/wp-content/themes/x/Fonts/GarageGothic-Regular.woff’) format(‘woff’),
url(‘http://www.burntmatch.com.au/public_html/wp-content/themes/x/Fonts/GarageGothic-Regular.svg’) format (‘svg’);
}

I hope that helps.

Thanks.

[christopher]

Hi there,

Thank you for the information the problem seems to be the URLs you used in the FontFace declaration.

I pasted the woff URL exactly to my browser window and it says not found:

Please remove the public_html part of the URLs, so the URL for the woff font will be this:

http://www.burntmatch.com.au/wp-content/themes/x/Fonts/GarageGothic-Bold.woff

Thank you.

[BurntMatch]

Hi Christopher. Thanks for that. So I tried your idea but it still doesn’t show the correct font on mobile. Did you mean to remove public_html from the woff only, or from each of the URLs? I have done it to each of them.

[friech]

Hi There,

You declared the @font-face statement on the Customizer > Custom CSS that would not work there.

Please setup a Child Theme then place your @font-face statement on the child theme’s style.css file.

Also remove the !important statement from your @font-face declaration (https://prnt.sc/ft1xrq).

Hope it helps,
Cheers!