Archived topic
Local font not displaying on mobile
3 replies · Started by Jem on June 28, 2021
Hi team
I have a local font set up, League Gothic (from Font Squirrel), in use for all headings on the site. It's working as intended on MacOS in various different browsers (tested on 2 Macs), but not on Win10 (Firefox and Edge) and not on iOS (Firefox and Safari) - the Inspector reveals the font name is being called correctly but it displays as a sans-serif fallback, though weirdly the main page headings are displaying as sans-serif but a thin one, not League Gothic. I've searched the forum and checked and re-checked the code, cleared browser caches etc.
This is what I have for CSS (the font name is as specified by Font Squirrel):
/* Custom font */
@font-face {
font-family: 'league_gothicregular';
src: url('https://DOMAIN/wp-content/uploads/2021/06/leaguegothic-regular-webfont.eot');
src: local('League Gothic'), local('league_gothicregular'),
url('https://DOMAIN/wp-content/uploads/2021/06/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('https://DOMAIN/wp-content/uploads/2021/05/leaguegothic-regular-webfont.woff2') format('woff2'),
url('https://DOMAIN/wp-content/uploads/2021/05/leaguegothic-regular-webfont.woff') format('woff'),
url('https://DOMAIN/wp-content/uploads/2021/06/leaguegothic-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And this in functions.php:
/**
* Add custom fonts (local, Typekit, Fonts.com, etc.) to local font list.
* @link https://docs.generatepress.com/article/adding-local-fonts/
*/
add_filter( 'generate_typography_default_fonts', 'gpc_add_custom_local_fonts' );
function gpc_add_custom_local_fonts( $fonts ) {
$fonts[] = 'League Gothic';
return $fonts;
}
It's been working fine since the start of development (on a Mac), it shows up inthe customiser and generally behaves as expected. I only noticed the issue when I checked on my phone and old Win10 laptop once it was on a test server. What am I doing wrong? The site is still being developed so I'll send the URL privately (all caching currently disabled).
I'm just going to try installing the fonts from a different source, using different names. I'll report back.
It works with differently sourced fonts (woff only), but I had to choose League Gothic-Regular, if I choose just league Gothic it's the same problem.
All good, sorry to take your time.
Hi Jem,
Glad you figured it out!
And thanks for share with the solution with us!