Fonts on Mobile

[srundle]

I am having problems getting correct fonts to display on mobile browsers. I have uploaded both fonts to the media library as .tff files. Using the font manager to install them, and then adding the fonts in via PRO V2 elements. The fonts show up fine on desktop browsers, however when viewed on mobile, iPhone for example Safari, the fonts default back to the default font.

poisepilatesbarre.com

Latest version of PRO.

Thanks,

Sean

[mldarshana]

Hi Sean,

Thanks for writing in! It’s simply because some browsers or different devices such as mobile devices does not support some font types, so it will render default font. Please refer to the following example.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

So basically .ttf, .woff and .woff2 is needed so that there is a font file fallback when the browser does not support the font file.

However when I have checked your site on a Android device, your font rendered correctly and also I have tested it on chrome’s mobile testing tool. Perhaps you can mention your iOS version and also Safari browser versions as well to check your issue further.

Please make sure to clear all caches when testing your issue again (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

Hope that helps.

[srundle]

Thanks, I am using iPhone X with latest version of iOS. I have reset browser history in iOS and turned off breeze caching plugin. Still seeing default fonts in Safari and chrome.

[rad]

Hi @srundle,

Thanks for reaching out.

It appears your selected or uploaded font doesn’t really work on Safari, the iOS safari doesn’t have support for Century Gothic, could you try another font?

Please check this https://stackoverflow.com/questions/10309510/mobile-safari-does-not-accept-century-gothic

Thanks!