9

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:

enter image description here

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):

enter image description here

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.

5 Answers 5

2

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.

1
  • Thanks, I have tried doing this with the fonts downloaded from your link, still not showing the Arabic font as I see it on OSX, it shows like Arial!
    – tinyCoder
    May 2, 2017 at 14:25
2

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.

6
  • Hi brother, thanks for the answer, please have a look at how "Times New Roman Regular" looks with Arabic text on OSX: gulf-up.com/do.php?img=310788 , it is not even close! I am really confused what font do we see on OSX for Arabic text.
    – tinyCoder
    May 3, 2017 at 11:35
  • I found it!! it is "Geeza Pro"!!
    – tinyCoder
    May 3, 2017 at 11:42
  • sweet! Glad I could help. Btw New Times Roman looks like this in font book, but outside foontbook, it's fine. How did you figure it was Geeza Pro ? May 3, 2017 at 20:36
  • I found that in Apple's forum, I saw someone said that, did you check my answer above? we have the font web-ready now.
    – tinyCoder
    May 3, 2017 at 20:38
  • yeah I saw your answer and nice work on adding it to fontface. It would be very helpful to others if you include the "apple forum" link that mentioned the default arabic font for OSX May 3, 2017 at 20:44
1

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.

12
  • Thanks, I have tried doing this with the fonts downloaded from the link "Oskar" posted below, still not showing the Arabic font as I see it on OSX, it shows like Arial!
    – tinyCoder
    May 2, 2017 at 14:25
  • have you tried using font-squirrel to convert the font file you have into the other formats supported by windows/ff/chrome etc? You need the SanFranciscoArabic font (I couldnt find it on the link provided). May 2, 2017 at 19:34
  • ...alternatively you could use one of the arabic webfonts provided by google web fonts: fonts.google.com/?subset=arabic A couple of them look very similar to the type used in your example. I hope this helps. May 2, 2017 at 19:48
  • 1
    I've got my doubts about whether that is the san francisco arabic. If you have the macbook, find the font on that, export/copy the font file and use that on fontsquirrel and that will generate the full set (Woff/2/ttf/eot/svg). You have to be sure the font file you are uploading does have the arabic character set. Thats why I suggeted google web fonts, you know what you are getting there. May 2, 2017 at 23:07
  • 1
    That didn't work, and gave an error in font-squirrel, anyway I used another website to extract TTF's from TTC, then tried to use font-squirrel again with the TTF's but they still don't give the expected result, I answered the question anyway. Thank you very much for your help.
    – tinyCoder
    May 3, 2017 at 18:53
0

You can try another font that same to San Fransisco font as mentioned Here

0

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.

3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.