@Font-face not working on IOS

Question

So I am working on a WordPress website and on each page I have an H1 tag for the title of that page. I am using a special font using @font-face and it works great on windows in every browser, but when I switch over to a mac it won't display the h1 tag its just white space. I have tested this in safari and chrome on multiple mac's and its not working on any of them. If I change the font to let say Arial it works great, if I setup to have a fall back font it does not work. If I change the h1,h2,h3 tags to use NorthBergen-Light it works great, its just the NorthBergen that doesn't work and the code for both of them is the exact same. In my research I have found that some people say they have had success when they remove all of the quotes but when I do that it just breaks everything. I can't figure out why NorthBergen-Light works great but NorthBergen does not.

        @font-face {

            font-family: 'NorthBergen';

            font-style: normal;

            src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot');

            src: local('NorthBergen'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.woff') format('woff');

        }

                @font-face {

            font-family: 'NorthBergen-Light';

            font-style: normal;

            src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot');

            src: local('NorthBergen-Light'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.woff') format('woff');

        }

                    .services .services-inside .services-title{

                font-family: 'NorthBergen' !important;

            }

                    h1, h2, h3{

                font-family: 'NorthBergen', 'Times New Roman', 'Times', 'serif' !important;

            }

                    footer.main-footer .widget .widget-title{

                font-family: 'NorthBergen-Light' !important;

            }

                    h5, h6, p, blockquote, li, a, .main-container, h4.widget-title, .widget-title{

                font-family: 'NorthBergen-Light' !important;

            }

So I got it to work by using fontsquirrel and taking all the files and putting them in my FTP and changing the css file to look like.

@font-face {

            font-family: 'NorthBergen';
            font-style: normal;

            src: url('ufonts.com_northbergen-regular-opentype-webfont.eot');
            src: url('ufonts.com_northbergen-regular-opentype-webfont.eot?#iefix') format('embedded-opentype'),
             url('ufonts.com_northbergen-regular-opentype-webfont.woff2') format('woff2'),
             url('ufonts.com_northbergen-regular-opentype-webfont.woff') format('woff'),
             url('ufonts.com_northbergen-regular-opentype-webfont.ttf') format('truetype'),
             url('ufonts.com_northbergen-regular-opentype-webfont.svg#northbergenregular') format('svg');

        }

Answer 1

My issue was related to something different, so I hope this helps someone. In my case, the font-face code was like:

@font-face {
    font-family: 'My Font';
        src: url('My-Font.woff2') format('woff2'),
             url('My-Font.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

and I had all of my heading tags using this:

 h1, h2, h3, h4, h5, h6 {
      font-family: 'My Font';
 }

Most browsers/user-agents apply font-weight:bold or a font-style:normal in some cases.

Even with this, my font still rendered correctly on Chrome/FF/Edge. It was only until I got on iOS did I notice the font didn't render correctly. I guess they are more strict about this.

Changed my CSS to:

h1, h2, h3, h4, h5, h6 {
      font-family: 'My Font';
      font-weight: normal;
      font-style: italic;
 }

In my case, the TTF file dictated the font-style and font-weight properties that Transfonter ended up applying. I just had to make sure those were the same in the CSS declaration on the element the font was being applied to. Your case may be different, but it is important to check for those discrepancies.

Answer 2

I realize that this question was from several years ago - but I used this thread as a reference when figuring out the solution, so I figured I'd share here to save others future frustration --

For me, all of the fonts were working EXCEPT on my iphone and what I had to do was to remove the ID in the svg portion of the font-face code and leave it as just the uploaded .svg file. For example in the above code, the svg portion would read:

    url('../fonts/Min_font/Min_font.svg, italic, bold) format('svg'); 

meaning I deleted the "#" and the ID after it.

I tried everything else - fontsquirrel, transfonter, changed the url path numerous ways. That was the only one that worked - and it took me a week to figure it out :0

It may be the only thing that works for you, too.

Answer 3

Started working for me after changing path.

The path fontsquirrel gave didn't had ./ After adding it, it works:

@font-face {
    font-family: 'montserratblack';
    src: url('./montserrat-black-webfont.woff2') format('woff2'),
         url('./montserrat-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

Answer 4

Dont know anything about Wordpress, but you might need some conversion of font for all browsers:

@font-face {
font-family: 'Min_font';
    src: url('../fonts/Min_font/Min_font.eot') format('embedded-opentype'); /* IE9 + later */
    src: url('../fonts/Min_font/Min_font.eot?#iefix') format('embedded-opentype'), /* IE6 to IE8  */
         url('../fonts/Min_font/Min_font.woff') format('woff'),  /* Newer browsers */
         url('../fonts/Min_font/Min_font.ttf') format('truetype'), /* Safari og iOS, Chrome, Android, Firefox and Opera except Opera Mini  */
         url('../fonts/Min_font/Min_font.svg#Min_font + regular, italic, bold) format('svg'); /*IE og iOS earlier than version 5*/
}

Try fontsquirrel: http://www.fontsquirrel.com/tools/webfont-generator