How do you get Font-Face to load fonts on iOS?

Question

I'm building a website using Gatsby.js, Styled-Components, and a custom font called 'Montserrat'. The font loads for desktop browsers when built and while being hot-reloaded. It isn't loading on mobile iOS (I don't have access to an Android). I'm trying to figure out where I'm going wrong.

I've tried:

• Using Google Fonts;

• Using direct url imports from the filepath;

• Using js imports of the file path;

• Using separate font-face calls for each individual font.

I've read several questions on SO and searched Google but most results are general formatting issues or things I've attempted already.

This is my main.js where I'm importing the local fonts:

import { createGlobalStyle } from 'styled-components';
import theme from './theme';
import * as MontserratRegularEOT from './fonts/MontserratRegular.eot';
import * as MontserratRegularOTF from './fonts/MontserratRegular.otf';
import * as MontserratRegularTTF from './fonts/MontserratRegular.ttf';
import * as MontserratRegularWOFF from './fonts/MontserratRegular.woff';
import * as MontserratRegularWOFF2 from './fonts/MontserratRegular.woff2';
import * as MontserratBoldEOT from './fonts/MontserratBold.eot';
import * as MontserratBoldOTF from './fonts/MontserratBold.otf';
import * as MontserratBoldTTF from './fonts/MontserratBold.ttf';
import * as MontserratBoldWOFF from './fonts/MontserratBold.woff';
import * as MontserratBoldWOFF2 from './fonts/MontserratBold.woff2';
const MainStyle = createGlobalStyle`

@charset "utf-8";

/*
This is compiled file, for the original file please see .less file
1. HTML Elements
2. IDs
3. Classes
4. Animations
5. Media Queries
6. Less Elements (in .less file only)
*/

@font-face {
  font-family: 'Montserrat';
  src: local('Montserrat'), url(${MontserratRegularEOT}), /* IE9 Compat Modes */
  src: local('Montserrat'), url(${MontserratRegularOTF}) format('embedded-opentype'), /* IE6-IE8 */
  src: local('Montserrat'), url(${MontserratRegularWOFF2}) format('woff2'), /* Super Modern Browsers */
  src: local('Montserrat'), url(${MontserratRegularWOFF}) format('woff'), /* Pretty Modern Browsers */
  src: local('Montserrat'), url(${MontserratRegularTTF}) format('truetype'); /* Safari, Android, iOS */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: local('Montserrat'), url(${MontserratBoldEOT}), /* IE9 Compat Modes */
  src: local('Montserrat'), url(${MontserratBoldOTF}) format('embedded-opentype'), /* IE6-IE8 */
  src: local('Montserrat'), url(${MontserratBoldWOFF2}) format('woff2'), /* Super Modern Browsers */
  src: local('Montserrat'), url(${MontserratBoldWOFF}) format('woff'), /* Pretty Modern Browsers */
  src: local('Montserrat'), url(${MontserratBoldTTF}) format('truetype'); /* Safari, Android, iOS */
  font-weight: bold;
  font-style: normal;
}

/*== 1 HTML Elements ==*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, Newsletter, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  font-family: 'Montserrat', san-serif !important;
}`

This is an example component (which I've removed some styling for readability here) which should be using the font but isn't loading it on mobile:

import React from 'react'
import styled from 'styled-components'
import Img from 'gatsby-image'
import {Row, Col} from 'react-bootstrap';

// other styles

const Headline = styled.h4`
  padding-top: 80px;
  color: ${props => props.theme.colors.base}; 
  font-size: 33px; 
  @media (max-width: 475px) {
    font-size: 1.6875rem; 
    padding-top: 0px;
  }
`

// other styles

const MainCardBlock = (props) => {
  return (
      <MainCard>
        <Col sm={6} className={'main-image-block'}>
          <Image fluid={props.mainCard.cardImage.fluid} backgroundColor={'#eeeeee'} />
        </Col>
        <TextContainer sm={6}>
          <Headline>{props.mainCard.headline}</Headline>
          <Excerpt dangerouslySetInnerHTML={{
                __html: props.mainCard.textBlock.childMarkdownRemark.html,
              }}
          mainCard/>
        </TextContainer>
      </MainCard>
    )
}

export default MainCardBlock

Currently, 'san-serif' loads instead of 'Montserrat'. I'm expecting <h4 class="MainCardBlock__Headline-sc-6x7ja9-2 eLajVr">Quality. Value.</h4>* to use the 'Montserrat' but it's using 'san-serif'.

*<Headline>{props.mainCard.headline}</Headline>

This is how it currently compiles:

            @font-face {
                font-family: 'Montserrat';
                src: local('Montserrat'),url(/static/MontserratRegular-cf004f9f3076d2c5af3d93c4740e9a9c.eot), src:local('Montserrat'),url(/static/MontserratRegular-a53070e1dc5d0a6703a83f9a8d1a81d5.otf) format('embedded-opentype'), src:local('Montserrat'),url(/static/MontserratRegular-a34a420be1193527133f0a7c11ef1113.woff2) format('woff2'), src:local('Montserrat'),url(/static/MontserratRegular-4fff79a005c63b70ee3334d23fd147bc.woff) format('woff'), src:local('Montserrat'),url(/static/MontserratRegular-b26b6d576dafd8c4a9d9415d69ca175c.ttf) format('truetype');
                font-weight: normal;
                font-style: normal;
            }

            @font-face {
                font-family: 'Montserrat';
                src: local('Montserrat'),url(/static/MontserratBold-5fbc4fa26dc4dbd1759d01f72999e029.eot), src:local('Montserrat'),url(/static/MontserratBold-373b1bb1af0fd36999b5027121559d3e.otf) format('embedded-opentype'), src:local('Montserrat'),url(/static/MontserratBold-58fe2032a07491d722704318e649acba.woff2) format('woff2'), src:local('Montserrat'),url(/static/MontserratBold-2c6fd139d7caa7583c6342a4a21fe4b3.woff) format('woff'), src:local('Montserrat'),url(/static/MontserratBold-e7b037f6d6fe39b886ecae436be231e5.ttf) format('truetype');
                font-weight: bold;
                font-style: normal;
            }

You can view a live version here or attach the file path to the end of this url and download all of those fonts: https://5ca02c0a33a9ee00089e5bd8--reeds-market.netlify.com.

Answer 1

Quick theory: Sans-serif is misspelled on the body element of your css, and h4 inherits from that element. Is it possible that that whole line of css is disregarded on iOS because of the spelling error? (Try sans-serif)