Local custom fonts only working on desktop

[Stephen]

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

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Stephen]

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

[Stephen]

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/

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

[Stephen]

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;
} );

[Stephen]

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.

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Stephen]

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

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

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

[Stephen]

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

[Stephen]

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

[Stephen]

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

[Author]

Posts