Self Hosted Fonts not working on iOS

Support
,
1

Site: https://thirsty-chandrasekhar-4f19a6.netlify.app/

The problem is with iOS 14.1. The custom font doesn’t load. There are no errors in the console. I’ve checked Safari, Chrome, and Firefox.

Custom font is loading and working fine on:

  • Windows 10
  • MacOS Catalina
  • Android 10

The font provider, MyFonts, has a troubleshooting item on their instructions that refers to an iOS issue:

Webfonts not working on an iPhone or other iDevice?
This happens frequently when using IIS as a webserver. IIS will not serve file types (MIME types) it is unfamilar with, so you must set the MIME type for SVG to “image/svg+xml” in the server settings.

The WOFF file isn’t loading
This happens frequently when using IIS as a webserver also, IIS will not serve file types (MIME types) it is unfamilar with, so you must set the MIME type for WOFF to “application/font-woff” in the server settings.

2

@justin_bhi Welcome to the Netlify community.

I’m not seeing this issue. Granted, it may be subtle, and I don’t have a way of viewing the source on my iPhone as I can in Safari, but the fonts at least look OK.

Have you tried viewing your page in a new private / incognito browser window to see if this might be related to a local caching issue?

3

The font you’re seeing on iOS is Roboto, the fallback font.

The custom fonts, HelveticaNowDisplay are not loading on iOS. They’re working fine on everything but iOS devices.

staging.bighonkinideas
staging.bighonkinideas2505×717 169 KB

4

@justin_bhi I’m seeing Roboto both in macOS Safari and iOS Safari. If you’re seeing something else, it may be a caching issue.

5

Your main style sheet seems to load – and refer to – the Helvetica font before the Helvetica font is loaded. In fact, I’m not seeing where your fonts.css file is called. Maybe you’re calling it using the JavaScript at the bottom of the page? I would think the better approach would be to call and load the font you want before you specify it for use.

6

Also, the code that seems to call instantiate this font – which is at the bottom of the page – refers to a CSS file that seems not to exist in a folder that seems not to exist:

                plugin: n("LhCt"),
                options: {
                    plugins: [],
                    custom: {
                        families: ["HelveticaNowText-ExtraLight", "HelveticaNowDisplay-XBd", "HelveticaNowDisplay-Blk"],
                        urls: ["/fonts/fonts.css"]
                    },
                    google: {
                        families: ["Roboto", "Roboto Condensed"]
                    }
                }
7

You’re correct, I am seeing the same issue in Safari on OSX.

This same issue occurs even when I’m not using gatsby-plugin-web-font-loader. I was importing the fonts.css file in my main stylesheet and was seeing the same issue.

The fonts.css file does exist - https://thirsty-chandrasekhar-4f19a6.netlify.app/fonts/fonts.css

8

When I downloaded the site, that file was MIA. Now that you mention i, though, I do remember seeing them on the list of resources in Safari.

However, for years the best practice has been to load (or import) specialty fonts before trying to use them in CSS declarations. Maybe your SSG has a way to get around this, but if you can, you might try manually loading your Helvetica font before you load your style sheet, or importing your font at the top of your style sheet as a test.

1 Like
9

I found the issue!

The fonts.css file had font-style and font-weight rules that weren’t compatible with Safari or iOS.

Thanks for your help @gregraven

1 Like