[Resolved] Local custom fonts only working on desktop

[Tom]

I just formatted your CSS above – see how you have a mix of straight quotes ' and curly quotes ‘?

Replace those curly quotes with straight quotes and it should work.

[Stephen]

Hi Tom, I have actioned this but still no luck unfortunately.

[Stephen]

/* Didot-Light */
@font-face {
font-family: ‘Didot’;
font-style: normal;
font-weight: 300;
src: url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-L96-Light.ttf’); /* IE9 Compat Modes */
src: local(‘Didot HTF L96 Light’), local(‘Didot-HTF-L96-Light’),

url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-L96-Light.ttf’) format(‘truetype’), /* Safari, Android, iOS */
}

/* Didot-Medium */
@font-face {
font-family: ‘Didot’;
font-style: normal;
font-weight: 400;
src: url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-M96-Medium.ttf’); /* IE9 Compat Modes */
src: local(‘Didot HTF M96 Medium’), local(‘Didot-HTF-M96-Medium’),
url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-M96-Medium.ttf’) format(‘truetype’), /* Safari, Android, iOS */
}

/* Didot-Bold */
@font-face {
font-family: ‘Didot’;
font-style: normal;
font-weight: 600;
src: url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-B96-Bold.ttf’); /* IE9 Compat Modes */
src: local(‘Didot HTF B96 Bold’), local(‘Didot-HTF-B96-Bold’),
url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-B96-Bold.ttf’) format(‘truetype’), /* Safari, Android, iOS */
}

/* Perpetua-font */
@font-face {
font-family: ‘Perpetua’;
font-style: normal;
font-weight: 400;
src: url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-font.ttf’); /* IE9 Compat Modes */
src: local(‘Perpetua font’), local(‘Perpetua-font’),

url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-font.ttf’) format(‘truetype’), /* Safari, Android, iOS */
}

/* Perpetua-Bold-font */
@font-face {
font-family: ‘Perpetua’;
font-style: normal;
font-weight: 600;
src: url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.ttf’); /* IE9 Compat Modes */
src: local(‘Perpetua Bold font’), local(‘Perpetua-Bold-font’),

url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.ttf’) format(‘truetype’), /* Safari, Android, iOS */
}

[Elvin]

Hi Stephen,

Looking at your CSS code, there still are plenty of syntax errors.

Example/s:

1.) The use of ‘ and ’.

CSS properties like font-family: ‘Perpetua’; should instead use straight quotes rather than curly quotes.

Meaning font-family: ‘Perpetua’; should be font-family: 'Perpetua';

2.) Incorrect source URLs.

I’ve checked the URLs provided. The current URLs seem invalid. Removing the Unicode Decimal Code for right single quotation mark in the URL points it to the proper font files.

Ex: This link – https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.ttf’ is not found. Changing it to this – https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.ttf lets me download the font file.

I’ve tried to fix the problems. Hopefully I didn’t miss anything.

You can try this CSS code.

/* Didot-Light */
@font-face {
font-family: 'Didot';
font-style: normal;
font-weight: 300;
src: url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-L96-Light.ttf); /* IE9 Compat Modes */
src: local('Didot HTF L96 Light'), local('Didot-HTF-L96-Light'), url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-L96-Light.ttf) format('truetype'), /* Safari, Android, iOS */
}

/* Didot-Medium */
@font-face {
font-family: 'Didot';
font-style: normal;
font-weight: 400;
src: url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-M96-Medium.ttf); /* IE9 Compat Modes */
src: local('Didot HTF M96 Medium'), local('Didot-HTF-M96-Medium'),
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-M96-Medium.ttf) format('truetype'), /* Safari, Android, iOS */
}

/* Didot-Bold */
@font-face {
font-family: 'Didot';
font-style: normal;
font-weight: 600;
src: url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-B96-Bold.ttf); /* IE9 Compat Modes */
src: local('Didot HTF B96 Bold'), local('Didot-HTF-B96-Bold'),
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-B96-Bold.ttf) format('truetype'), /* Safari, Android, iOS */
}

/* Perpetua-font */
@font-face {
font-family: 'Perpetua';
font-style: normal;
font-weight: 400;
src: url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-font.ttf); /* IE9 Compat Modes */
src: local('Perpetua font'), local('Perpetua-font'),

url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-font.ttf) format('truetype'), /* Safari, Android, iOS */
}

/* Perpetua-Bold-font */
@font-face {
font-family: 'Perpetua';
font-style: normal;
font-weight: 600;
src: url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.ttf); /* IE9 Compat Modes */
src: local('Perpetua Bold font'), local('Perpetua-Bold-font'),

url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.ttf) format('truetype'), /* Safari, Android, iOS */
}

Let us know if it works for you.

[Stephen]

Really helpful of you to write it out for me, thanks. I have updated on the site but unfortunately the issue with the fonts is still happening on mobiles (only on mobiles now it seems).

Thanks

[Elvin]

Can you try this instead?

/* Didot-Light */
@font-face {
font-family: 'Didot';
font-style: normal;
font-weight: 300;
src: url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-L96-Light.ttf'); /* IE9 Compat Modes */
src: local('Didot HTF L96 Light'), local('Didot-HTF-L96-Light'), url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-L96-Light.ttf') format('truetype'); /* Safari, Android, iOS */
}

/* Didot-Medium */
@font-face {
font-family: 'Didot';
font-style: normal;
font-weight: 400;
src: url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-M96-Medium.ttf'); /* IE9 Compat Modes */
src: local('Didot HTF M96 Medium'), local('Didot-HTF-M96-Medium'),
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-M96-Medium.ttf') format('truetype'); /* Safari, Android, iOS */
}

/* Didot-Bold */
@font-face {
font-family: 'Didot';
font-style: normal;
font-weight: 600;
src: url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-B96-Bold.ttf'); /* IE9 Compat Modes */
src: local('Didot HTF B96 Bold'), local('Didot-HTF-B96-Bold'), url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-B96-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
}

/* Perpetua-font */
@font-face {
font-family: 'Perpetua';
font-style: normal;
font-weight: 400;
src: url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-font.ttf'); /* IE9 Compat Modes */
src: local('Perpetua font'), local('Perpetua-font'), url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-font.ttf') format('truetype'); /* Safari, Android, iOS */
}

/* Perpetua-Bold-font */
@font-face {
font-family: 'Perpetua';
font-style: normal;
font-weight: 600;
src: url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.ttf'); /* IE9 Compat Modes */
src: local('Perpetua Bold font'), local('Perpetua-Bold-font'), url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.ttf') format('truetype'); /* Safari, Android, iOS */
}

[Stephen]

Hi, afraid this hasn’t worked either. Not sure if perhaps it could be caused by something separate to this CSS?

[Elvin]

Can you try the css code previous reply again? I missed an important } syntax on the last one. I’ve edited the previous reply to add the missing } in the code. It should work now.

Hi, afraid this hasn’t worked either. Not sure if perhaps it could be caused by something separate to this CSS?

You can try clearing your browsing and WP cache every time you make any changes to see if its not the one causing the issue.

[Stephen]

I have tried the edited code but still no luck.

From running a quick F12 check I can see the following issues:
https://postimg.cc/t1TfdNYB

Both are a bit concerning…

Thanks again for your support

[Stephen]

Please let me know if there is anything else I might be missing or should try, thank you

[David]

There are quite a few reasons that this can occur.
One of them is the @font-face URL – but this looks correct and the fonts are loading and rendering on Safari. So we can dismiss that.

Others are how the font was uploaded – if the file was converted to ASCII on upload as opposed to Binary then that can break them. Again is they’re loading on Safari then we can dismiss that.

Most likely is poor TTF support. Any chance you can use WOFF ?

[Stephen]

Hi David,

Thank you for running through the options. I’m afraid I’m still having no luck seeing the Perpetua font on mobile devices. I have added the Perpetua fonts as .woff files and still having no luck. Here is the code I’m using:

/* Perpetua-font */
@font-face {
font-family: ‘Perpetua’;
font-style: normal;
font-weight: 400;
src: url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/perpetua.woff’); /* IE9 Compat Modes */
src: local(‘Perpetua font’), local(‘Perpetua-font’), url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/perpetua.woff’) format(‘web open font format’); /* Safari, Android, iOS */
}

/* Perpetua-Bold-font */
@font-face {
font-family: ‘Perpetua’;
font-style: normal;
font-weight: 600;
src: url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.woff’); /* IE9 Compat Modes */
src: local(‘Perpetua Bold font’), local(‘Perpetua-Bold-font’), url(‘https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.woff’) format(‘web open font format’); /* Safari, Android, iOS */
}

[David]

Can you disable your cache plugin so we can check what the issue may be.

[Stephen]

Hi David, I have disabled my cache plugin

[David]

Just checked on my iPhone and the fonts are being loaded and the site looks the same as it does on desktop. Maybe browser caching ? Or can you test on another device.

[Author]

Posts