Some letters of Google Fonts (Work Sans, Exo 2 tested) appear broken on Mac when used on a website and viewed in a browser (or printed).
Why is it that way and is there a solution?
Example of an "A" of Work Sans in a website viewed in a browser on Mac.
Reference:
Work sans on Google Fonts
The font author recently provided an update which fixed it (for work sans):
https://github.com/weiweihuanghuang/Work-Sans
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.
Why isn't Chrome only requesting WOFF2 instead of every format it accepts?
I load custom fonts from both Google Fonts and my personal website.
The fonts hosted by Google Fonts and by my server are both .woff and are both loaded via " of the HTML.
I've tested Google's Roboto and Ubuntu CSS and my Roboto and Ubuntu CSS, and they work in Chrome, but only the Google Fonts versions work in Internet Explorer. Is this a security thing on IE's end? Seems like something M$ would do...
To be clear, the test computer is not my server, and does not have any custom fonts, including Ubuntu, installed. I am able to load and view the CSS files from my server, and download the fonts themselves.
Sounds like your server don't send the correct font mime type.
Google do send the correct mime, your server maybe not.
I'm using font squirrel. Everything is fine on MacOSX or ipad. But I've got problem on my windows machine.
Font is just cutted.
It's original font(DinCond) on the bottom of the picture.
http://postimage.org/image/b3apbrwtd/
According to this, the thinner and condensed fonts usually have this issue.
http://www.fontsquirrel.com/blog/2009/11/what-to-expect-from-our-font-face-generator
This might spark some attempts:
http://www.fontsquirrel.com/forum/discussion/74/webkit-font-rendering-on-windows-xp/p1
might want to play around with CSS alias settings
You can always try Cufon and spend a little on TypeKit