Experiencing difficulties with font-face implementation on mobile devices.
The custom font-face definition for the Rex font is as follows:
@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 and not returning a 404 error.
While functioning correctly on desktop browsers (excluding IE 6 and 7, works fine on IE 9 and up), the fonts do not display on mobile devices (Tested on Android 2.3, 4.4 and IOS 6).
Initially suspected an issue in the svg font definition ("#RexBold" part) but it was correct - "#RexBold" is the valid reference for the font-face in the svg file.
Next considered that the web server may be serving incorrect mime-types for fonts. Updated the mime.types configuration file according to HTML5 Boilerplate config
However, this did not resolve the problem. Additionally, Font Awesome (4.0) is also not displaying on mobile on my site, while working on their official site. Followed their guide for integration using Bootstrap CDN and included the following CSS rule:
ul.fa-icon-check li:before {
font-family: 'FontAwesome';
content: '\f14a';
margin:0 5px 0 -21px;
font-size: large;
}
Seeking insights on possible causes of these issues. Thank you in advance! Link to the site -