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.
4 Answers
Answers 1
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.
Answers 2
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.
Answers 3
You can try another font that same to San Fransisco font as mentioned Here
Answers 4
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.
0 comments:
Post a Comment