Archived topic

Local custom fonts only working on desktop

38 replies · Started by Stephen on September 19, 2020

Viewing posts 16–30 of 39

September 20, 2020 at 11:02 am #1451306

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.

September 20, 2020 at 11:37 am #1451331

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

September 20, 2020 at 11:37 am #1451333

/* 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 */
}

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

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

September 20, 2020 at 12:23 pm #1451373

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.

September 20, 2020 at 12:59 pm #1451389

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

September 20, 2020 at 1:53 pm #1451418

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 */
}

September 20, 2020 at 1:56 pm #1451419

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

September 20, 2020 at 2:17 pm #1451427

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.

September 20, 2020 at 2:26 pm #1451434

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

September 21, 2020 at 2:46 am #1451886

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

September 21, 2020 at 3:00 am #1451912

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 ?

September 29, 2020 at 1:58 am #1463323

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 */
}

September 29, 2020 at 3:10 am #1463421

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

September 29, 2020 at 3:20 am #1463435

Hi David, I have disabled my cache plugin

September 29, 2020 at 3:42 am #1463477

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.

This archived topic is closed to new replies.

Start building better websites today.