- This topic has 38 replies, 4 voices, and was last updated 3 years, 6 months ago by David.
-
AuthorPosts
-
September 19, 2020 at 2:34 pm #1450347Stephen
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 #1450418DavidStaffCustomer SupportHi there,
i am seeing the same font on desktop and my iphone.
Maybe a browser cache issue?September 20, 2020 at 12:33 am #1450590StephenHI 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 #1450634StephenJust 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 #1450848DavidStaffCustomer SupportWhere did you upload the fonts to?
And did you add the @font-face CSS?September 20, 2020 at 8:26 am #1451122Stephen/* 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 #1451123StephenThe 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 #1451130StephenI’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 #1451217TomLead DeveloperLead DeveloperHi 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 #1451239StephenAh 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 #1451243TomLead DeveloperLead Developer.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 #1451254Stephen/* 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:02 am #1451256StephenHad success with the ‘Didot’ font now but still no success with ‘Perpetua’..
September 20, 2020 at 10:15 am #1451270StephenThe 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 #1451272StephenThanks so much for your help. I feel like I’m close now!
-
AuthorPosts
- You must be logged in to reply to this topic.