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.

Community
  • 1
  • 1
tinyCoder
  • 350
  • 13
  • 37

5 Answers5

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.

Oskar
  • 3,625
  • 2
  • 29
  • 37
  • 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 02 '17 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.

Ahmed Musallam
  • 9,523
  • 4
  • 27
  • 47
  • Hi brother, thanks for the answer, please have a look at how "Times New Roman Regular" looks with Arabic text on OSX: http://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 03 '17 at 11:35
  • I found it!! it is "Geeza Pro"!! – tinyCoder May 03 '17 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` ? – Ahmed Musallam May 03 '17 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 03 '17 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 – Ahmed Musallam May 03 '17 at 20:44
  • Sorry I was wrong, I rechecked the link from my browser history, it was from macworld not Apple's forum, here it is: http://hints.macworld.com/article.php?story=20111026025343144 – tinyCoder May 03 '17 at 20:48
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.

Anthony Cregan
  • 960
  • 11
  • 25
  • 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 02 '17 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). – Anthony Cregan May 02 '17 at 19:34
  • ...alternatively you could use one of the arabic webfonts provided by google web fonts: https://fonts.google.com/?subset=arabic A couple of them look very similar to the type used in your example. I hope this helps. – Anthony Cregan May 02 '17 at 19:48
  • Yes I have tried using font-squirrel and then modified the exported HTML file and typed in Arabic in it, but it appeared in Arial or something very normal and far from San Francisco font. I didn't find similar fonts, that's why I asked this question, do you think there is a way to get the Arabic font from OSX itself? – tinyCoder May 02 '17 at 20:47
  • See the result of the test [on this link](http://gulf-up.com/do.php?img=310539), and [here are the files I used](http://gulf-up.com/do.php?img=310540) also. – tinyCoder May 02 '17 at 20:59
  • 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. – Anthony Cregan May 02 '17 at 23:07
  • There is no San Fransisco font in OSX Font Book app! I searched a lot for the system default font in the book to export it, but didn't find it. Google web fonts are far away from what I need, but thanks again for the reply. – tinyCoder May 03 '17 at 00:35
  • I'd like to see this through to a solution, find a free-to-use arabic character-set font that suits your purposes online, post the link here and we'll see if we cant finish this. – Anthony Cregan May 03 '17 at 09:56
  • I found it!! it is "Geeza Pro"!! – tinyCoder May 03 '17 at 11:42
  • Unfortunately font-squirrel doesn't support uploading TTC font file format. – tinyCoder May 03 '17 at 11:49
  • rename it to ttf – Anthony Cregan May 03 '17 at 12:12
  • 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 03 '17 at 18:53
0

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

M Fuat
  • 1,330
  • 3
  • 12
  • 24
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.

tinyCoder
  • 350
  • 13
  • 37