I generated an Icon webfont using IcoMoon, and then used FontSquirrel to convert the TTF file to WOFF and WOFF2 files.
The WOFF file is to be used by IE users, and WOFF2 in all other browsers.
I used these settings in FontSquirrel:
Truetype Hinting: Keep Existing
Rendering: Fix GASP Table
Vertical Metrics: Auto-Adjust Vertical Metrics
Fix Missing Glyphs: Spaces, Hyphens
X-height Matching: None
Subsetting: No Subsetting
Advanced Options - Em Square Value: 2048; Adjust Glyph Spacing: 0
I tested in every device and browser I have (Windows, Linux, Android, iPhone, all browsers), and the WOFF2 file works perfectly.
Apache responds with Content-Type: font/woff2, and there's no CORS issue.
However, some users reported that all icons on the site are showing as a square with a cross (☒).
The users who reported the problem are using:
Chrome v84 on Android 9 (Huawei Y6 2019)
Chrome v89 on Android 8 (Samsung Galaxy S7)
This was resolved once I changed the #font-face to use the WOFF file instead.
I also have some Google Fonts (self-hosted), served with WOFF2, in a similar way, and those fonts work well on those devices of the users who reported the problem above.
Any ideas why, on some devices, would self-hosted Google Fonts WOFF2 work, but not the Icons/Glyphs WOFF2 file I generated?
I saw some people answered How to use Apple's new San Francisco font on a webpage
But the given solutions didn't work with Arabic.
Even the answer that includes the font as a web font from an external library did not work with Arabic text (Tested on Windows 7).
This is how Arabic text looks like on OSX Sierra \ Firefox:
Very beautiful, and this is how it looks after trying to add the font from an external library on Windows 7 / Firefox (as given in this answer):
Looks like it is fallen down, so the default web browser font is being used.
I am trying to use the beautiful San Fransisco font in my website so it looks the same both on OSX and Windows.
The font linked in the CSS code from your link is pointing directly to Apple's version of the font, which is not compatible with Windows (for unknown reasons, but it has been speculated that there's something in the font spec that prevents it from working on other platforms).
You may have better luck manually downloading the fonts from here:
https://github.com/AppleDesignResources/SanFranciscoFont/issues/1
and then using a TTF font converter such as:
https://onlinefontconverter.com/
Then host the fonts yourself, and update the CSS accordingly.
I'm a native Arabic speaker and I know a little about Arabic fonts.
You cannot use San Francisco font as it does not support Arabic alphabets. it's in the fine-print in apple's typography doc: https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/
quote from that page
iOS uses San Francisco as the system font for Latin, Greek and Cyrillic alphabets, and a variety of other typefaces for other scripts.
only Latin, Greek and Cyrillic alphabets and other typefaces (NOT San Francisco) for other scripts
You'll have to chose a different font that actually supports the Arabic Alphabet. In this case, Apple uses, I believe, the Times New Roman Regular which is supported natively on mac and window and is an OpenType font. Times New Roman Regular looks exactly like the font in the picture you provided.
Different web browsers use different font formats, it can be quite tricky to get it working cross browser and unavoidably, you have to declare multiple file sources for the same font to satisfy all browsers, the easiest way to do that is to use a generator such as Font-Squirrel
https://www.fontsquirrel.com/tools/webfont-generator
For the best possible support use this to declare your font:
#font-face {
font-family: 'MyWebFontName';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
As you can see, there are 5 font formats supported eot, woff, woff2, ttf and svg. You'll obviously need to provide the files and update the source url accordingly.
For more information on the current state of play have a read of this:
https://css-tricks.com/snippets/css/using-font-face/
That article is almost a year old but as I understand it, for backwards compatability its still relevant and correct and the code above is required to ensure font consistency across browsers.
TTF and SVG fonts for the web are being phased out but for older browsers they are still required. Just to reassure you, all of those files wont be downloaded on page load. Only the file in the font format supported by your particular browser will be downloaded.
You can try another font that same to San Fransisco font as mentioned Here
OK, I finally found the font, it is called Geeza Pro, I have extracted it from OSX fonts folder and sent it to http://fontface.me, they uploaded it to their CDN, everyone can use OSX's Arabic font now from this link:
https://www.fontface.me/font/info/geeza-pro
Simply include this in header:
<link rel="stylesheet" type="text/css" href="//www.fontstatic.com/f=geeza-pro" />
CSS:
font-family: 'geeza-pro';
Thanks for everyone for the comments.
I recently through together a quick wordpress site for a friend. They're in a different state and I don't have access to my friend's device. When he goes to the website he sees what's in the image below; basically all the links are displaying full urls. I looked at it in IE, Chrome, Safari, and Firefox, and none of them do it for me. Is this a setting in the browser or in Windows that would show the full URL? He's not tech savvy, so he wouldn't have anything like Firebug or Developer Tools installed. It happens for him in both IE and Chrome, so I'm wondering if it could be an accessibility setting on his device. I doubt it's the theme, but I'm willing to swap it out if it is.
It looks like your friend is viewing the site in a way that displays the print stylesheet information.
In Chrome, I opened the developer tools, went to Emulation, and turned on the Print styles, and ended up with this:
I found this bug in Google Chrome that I cannot explain.
The fonts that is loaded for a text sometimes changes for some reason by itself.
Here is a screenshot of the initial font when the web page loads:
Here is what I see after a while:
When I start scrolling on the page the font returns to normal.
Does anybody knows what is going on?
Also I have seen this happening on many other websites. And even on my own web pages.
I am using Google Chrome Version 31.0.1650.57, and I am on a Mac OS X 10.9.
The screenshot come from the DropBox documentation web site.
It is a known Chrome bug and will supposedly be fixed in Chrome 33: https://code.google.com/p/chromium/issues/detail?id=236298
No fonts with Google Fonts are working on Firefox 3.6.25 (Mac). This seems to be an issue with the API itself—the Google Fonts website does not even show the fonts properly.
Does anyone have a solution for this? Can you confirm that the fonts will not display properly?