CODEWITHSUNDEEP
htmlcssmobilefont-facefont-awesome
JohnGray
JohnGray

Reputation: 676

Strange issue with custom font-face and Font Awesome font on mobile devices

I have an issue working with font-face on mobile devices.

I have the following custom font-face definition for Rex font

@font-face {
        font-family: 'RexBold';
             src: url('RexBold.eot?#iefix') format('embedded-opentype'), url('RexBold.otf')  format('opentype'),
                  url('RexBold.woff') format('woff'), url('RexBold.ttf')  format('truetype'), url('RexBold.svg#RexBold') format('svg');
                  font-weight: normal;
                  font-style: normal;
           }

All files are accessible from the client side and not giving 404 or anything like that

Everything works under desktop browser (except for IE 6 and 7 of course. IE 9 and up works fine.) but it is not working on mobile devices (Tested on Android 2.3, 4.4 and IOS 6)

At first, I thought that was an error in generated definition for svg font (the #RexBold part) but the definition was correct - #RexBold is the correct reference for the font-face in the svg file.

Then I assumed that my web server (nginx 1.6) is serving wrong mime-types for fonts. And I updated my mime.types configuration file according to HTML5 Boilerplate config

But that also doesn't work. By the way Font Awesome (4.0) on my site is not working for mobile too, but it is working on their official site. I used their guide for connecting Font Awessome to the site (using Bootstrap CDN) and I am using the following css rule:

ul.fa-icon-check li:before {    
    font-family: 'FontAwesome';
    content: '\f14a';
    margin:0 5px 0 -21px;
    font-size: large;
}

Can anyone provide me with a clue what can be wrong with this? Thanks in advance! Here is the link to my site - http://study-in-japan-guide.com/ru/

Upvotes: 0

Views: 952

Answers (1)

Alex
Alex

Reputation: 9041

The fonts.css file (http://study-in-japan-guide.com/themes/heywater_edited/fonts/fonts.css) is not being loaded on a mobile. Therefore it's not loading the @font-face.

From a Desktop: enter image description here

From a Mobile: enter image description here

Upvotes: 1

Related Questions