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.
Related
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?
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 am new to CSS, Flexbox and Frontend development. I wanted to build a site with Flexbox, CSS3 and HTML5. (No Frameworks)
Safari 5.1 for Windows does not work with Flexbox .
I played with Chris Coyier's "Old and New Browser Comparability" solution and it worked but seems limited.
My questions are:
Do I have to build a second stylesheet specifically for Safari?
How do I integrate styling without messing up the "Coyier" Structure CSS in my Safari stylesheet?
How can I get the Safari browser to ignore the stylesheet created for other browsers?
Can you suggest reading, site examples or what you did to address this problem?
Thank you so much.
Safari for Windows was available from 2007 to 2012 before it was discontinued. As it hasn't been updated in five years, it doesn't support many modern web standards - and as such, virtually nobody is using it. You shouldn't need to test against it for compatibility.
More information:
http://appleinsider.com/articles/12/07/25/apple_kills_windows_pc_support_in_safari_60
https://en.wikipedia.org/wiki/Safari_(web_browser)
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
I'm porting an app to android from windows mobile. This app has printing support.
In Windows mobile I used PrinterCe framework, but in the android app I have written a framework to create CPCL labels.
Everything works ok except for the font. In the windows mobile app I can set the font doing:
((PrinterCE)m_Printer).FontName = "Tahoma";
but as CPCL manual says I can choose between 7 fonts but tahoma is not in the list.
What method PrinterCE uses to allow me printing using Tahoma??
I think the framework takes care of upload the font to the printer.. but how do I use that font once uploaded??
Update:
I'm using the printer in Line Printing Mode.
I've never used PrinterCE, but I assume it writes text, images, barcodes, etc onto a canvas and then at the end of the document, sends it down to the printer as an image, which is why it would let you use any font available on the CE device. If you want to use a non-native font on a CPCL printer, you have to first download it to the printer. (See this answer here on how to make pre-scaled fonts). Then you would have to use that font in your format.