Search code examples
iossvgfont-facearabic

SVG fonts not working on iOS

I converted these arabic fonts to work with CSS @font-face, and they do work on desktop but not on iOS. I tried quite a few things as suggested on other threads but no joy.

This is the page: http://bit.ly/WuBnaa <- works great on desktop, not on iOS.

Solution

  • There is no svg font in your @font-face, see here:

    @font-face {
    font-family: 'AlFatemi52';
    src: url('http://i4ideas.net/fatemi52/alfatemi152-webfont.eot');
    src: url('http://i4ideas.net/fatemi52/alfatemi152-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://i4ideas.net/fatemi52/alfatemi152-webfont.woff') format('woff'),
         url('http://i4ideas.net/fatemi52/alfatemi152-webfont.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

    If you do convert the above to an svg font as well, make sure that you get the arabic ranges too (most conversion services online strip everything outside the ascii range).