Archived topic

Local custom fonts only working on desktop

38 replies · Started by Stephen on September 19, 2020

Viewing posts 1–15 of 39

September 19, 2020 at 2:34 pm #1450347

Hi,

I have an issue with the http://www.londonsteakhousecompany.com/beta.
The custom fonts that I've uploaded work fine on the desktop version of the site but as soon as I try testing the website on my phone the fonts revert to the default fonts. This seems odd because when I test the mobile version in Elementor it all works fine but on an actual phone the fonts aren't coming through.

Thanks in advance.

Stephen

September 19, 2020 at 5:31 pm #1450418

Hi there,

i am seeing the same font on desktop and my iphone.
Maybe a browser cache issue?

September 20, 2020 at 12:33 am #1450590

HI David,

That's so odd. Is the text serif on your phone and desktop? I've tested on multiple phones (only on chrome though) and the fonts are always sans serif on phones but serif on desktop for me.

They should be serif everywhere. Please let me know if you have any idea of how I could solve this.

Thanks,

Stephen

September 20, 2020 at 1:49 am #1450634

Just looked into this a bit more and have tested on other desktops too. The serif fonts are only working on my laptop that I've been building the site on. They're not working on any other device...

This is what the fonts should look like: https://postimg.cc/gnVF3T6G

This is the code I've used as snippets:

For both fonts:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'Didot';
$fonts[] = 'Perpetua';

return $fonts;
} );

I also added:

add_filter( 'upload_mimes', function( $mimes ) {
$mimes['woff'] = 'application/x-font-woff';
$mimes['woff2'] = 'application/x-font-woff2';
$mimes['ttf'] = 'application/x-font-ttf';
$mimes['svg'] = 'image/svg+xml';
$mimes['eot'] = 'application/vnd.ms-fontobject';

return $mimes;
} );

I was using the instructions here:https://docs.generatepress.com/article/adding-local-fonts/

September 20, 2020 at 5:26 am #1450848

Where did you upload the fonts to?
And did you add the @font-face CSS?

September 20, 2020 at 8:26 am #1451122

/* 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.eot’); /* 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.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-L96-Light.woff2') format('woff2'), /* Super Modern Browsers */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-L96-Light.woff') format('woff'), /* Modern Browsers */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-L96-Light.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-L96-Light.svg#Didot') format('svg'); /* Legacy 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.eot’); /* 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.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-M96-Medium.woff2') format('woff2'), /* Super Modern Browsers */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-M96-Medium.woff') format('woff'), /* Modern Browsers */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-M96-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-M96-Medium.svg#Didot') format('svg'); /* Legacy 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.eot’); /* 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.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-B96-Bold.woff2') format('woff2'), /* Super Modern Browsers */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-B96-Bold.woff') format('woff'), /* Modern Browsers */
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/Didot-HTF-B96-Bold.svg#Didot') format('svg'); /* Legacy 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.eot’); /* IE9 Compat Modes */
src: local('Perpetua font'), local(‘Perpetua-font'),
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-font.woff2') format('woff2'), /* Super Modern Browsers */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-font.woff') format('woff'), /* Modern Browsers */
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-font.svg#Perpetua') format('svg'); /* Legacy 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.eot’); /* 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.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.woff2') format('woff2'), /* Super Modern Browsers */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.woff') format('woff'), /* Modern Browsers */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.svg#Perpetua') format('svg'); /* Legacy iOS */
}

September 20, 2020 at 8:26 am #1451123

The CSS above is what I added to the theme customiser, apologies for the length!
Then I added this code as a snippet:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'Didot';
$fonts[] = 'Perpetua';

return $fonts;
} );

September 20, 2020 at 8:31 am #1451130

I'm finding this very confusing because I can use both fonts absolutely fine on the customizer and on Elementor and it all works fine on my laptop....but on any other device the fonts are just replaced for sans-serif, default versions.

September 20, 2020 at 9:41 am #1451217

Hi there,

Issue seems to be that the URLs to the fonts aren't working. For example: https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Perpetua-Bold-font.woff2

Those need to point to the font files on the server in order for the font to be downloaded by the browser and displayed.

September 20, 2020 at 9:52 am #1451239

Ah ok, thanks. The only file types I have on the server are .ttf versions. Do I need .woff2 versions etc?

September 20, 2020 at 9:53 am #1451243

.woff2 files are more modern than .ttf files, but I don't believe it's necessary.

You will need to remove the references to the files that don't exist in your @font-face definitions.

September 20, 2020 at 10:02 am #1451254

url('https://www.londonsteakhousecompany.com/beta/wp-content/uploads/2020/09/Didot-HTF-L96-Light.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 10:02 am #1451256

Had success with the 'Didot' font now but still no success with 'Perpetua'..

September 20, 2020 at 10:15 am #1451270

The CSS I am using now is:

/* 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 10:17 am #1451272

Thanks so much for your help. I feel like I'm close now!

This archived topic is closed to new replies.

Start building better websites today.