Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I am working on a WordPress site that will be entirely in Arabic (except for the backend). I am an English speaker and have never dealt with Arabic in my time as a web developer. What font choices do I have that should be available on the vast majority of Arabic speakers' computers?
Font stack
Be sure to use a CSS 'font stack' to list many fonts by name in order of your preference. For example:
font-family: "Geeza Pro", "Nadeem", "Al Bayan", "DecoType Naskh", "DejaVu Serif", "STFangsong", "STHeiti", "STKaiti", "STSong", "AB AlBayan", "AB Geeza", "AB Kufi", "DecoType Naskh", "Aldhabi", "Andalus", "Sakkal Majalla", "Simplified Arabic", "Traditional Arabic", "Arabic Typesetting", "Urdu Typesetting", "Droid Naskh", "Droid Kufi", "Roboto", "Tahoma", "Times New Roman", "Arial", serif;
CAVEAT The fonts above were arbitrarily chosen as possibly having Arabic glyphs. That list is not my recommendation; I have not seen any of those fonts as I neither read nor speak Arabic. You are responsible for making your own choice of fonts.
Alan Wood's Unicode Resources provides lists of Arabic fonts for:
Mac OS X
Mac OS 9
Windows
Those lists are somewhat outdated. You may find that Apple, Microsoft, and the Linux makers have been adding more and better fonts to better support non-European scripts in recent years.
Alan Wood also provides this Arabic test page.
DejaVu Font
DejaVu is an actively developed, open-source, free license, and free of cost font. Has wide support for various scripts including Arabic. Installed by default on many Linux distros. Has serif, sans serif, and monospace families. See PDF samples.
Most glyphs are well designed. If you find any to be lacking, you are welcome to design and contribute improvements.
BEWARE DejaVu is released in different packages. The LGC downloads (Latin, Greek, Cyrillic) omit Arabic and similar character sets due to technical issues. Pay close attention when choosing from their download page.
Google for "font survey" to find percentage of computers that have been found to have various fonts installed.
Fonts supplied with:
Mac OS X (Apple)
Across generations (click to sort on Target script)
iOS (Apple)
Across generations
Windows (Microsoft)
Across generations (click to sort on Target Script)
Windows 8
Windows 7
Windows Vista
Windows XP SP2
Google
Roboto font
Droid Arabic Kufi & Naskh for Google™ fonts
+1 with Tahoma and DejaVu ("DejaVu sans" for emphasis) were the way to go, but things are changing --thanks God-- with first Arabic Web Fonts coming out earlier this year.
Alefba has put some useful information and ressources on the subject, e.g. Arabic and Persian Webfonts with WordPress blogs
See also How to use custom arabic fonts in your web design projects recently published by Hussain from Bahrain Web Design
Hope this will be of any help for you or any other Arabic website designer.
Google provides free fonts
Getting Started Guide: https://developers.google.com/webfonts/docs/getting_started#Quick_Start
Tahoma from 0.5em to 1.1 em and Arial from 1.2em and up
There are a list of these kind of fonts. Here are the ones I think are best, but you have to decide for yourself of what font is best for your website.
WebFonts:
Dinnext
Greta
Arabic
Droid Sans
Jennah
Helvetica
Ge
SS
Cocon
ff Frutiger
Hacen
Related
I have spent a long time reading about the advantages of using "open sans", "promima nova", "Helvetica Neue" and some other new fonts which I am told are all better than those fonts we have been using for a long time.
But when it comes down to it. Will most people actually notice any difference and what if I just use Arial in my font-family with no backup font at all.
If my users are using the modern browsers / modern operating systems from the last couple of years will that be a good choice for a very readable font or is there another font stack that people can recommend?
One recommendation I saw was to use the stack:
font-family: Arial, Helvetica, sans-serif
But why? Is not Arial installed on every computer?
With services like Google Fonts and others like it (no affiliation), this question becomes less important. Such font services allow you to choose pretty much any typeface that you want, and be guaranteed that it will work for all of your visitors.
This may not directly answer your question, but it does clarify the fact that a user's installed fonts aren't as important anymore, and there's no reason to fall back to plain old Arial.
No. To begin with, most smartphones do not have Arial.
The other part of the question asks for font recommendations, which is off-topic at SO.
The reason why fallbacks are recommended is that indeed, not all computers have widely distributed fonts available. In particular, most Linux distributions do not come with Arial or other Microsoft fonts due to licensing issues, such as Ubuntu. Setting a sans-serif fallback is not a bad idea, since if the font is missing, then it may default to a serif family font, which may be very different from the intended font.
To answer your question, Arial will not necessarily work on every computer and mobile device, it will work on most, but it is still good practice to leave a generic fallback.
On my personal website, I created an HTML page that displays Japanese text.
I used the following font families.
font-family: Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
I've put this both in my CSS file and tried nesting it in a statement. All browsers display the fonts correctly in OS X and Linux, but all Windows browsers will only display MS Mincho font.
Does anyone have any idea why?
A browser can only use a font if that font is installed on the machine on which the browser is running. If the font is not installed it tries the next one in the font-family list and if that one is not installed it tries the next and so on until it gets a font that the machine has installed. It then used this font.
If you want a particular font to be used by the browsers then you need to download that font to the machine using the using the #fontface and you can use a tool like Font Squirrel to generate all the correct CSS for you.
Be aware that most fonts installed on machines are subject to copyright and just ripping them from your machine and shipping them down to any old machine is in violation of that copyright. But there are many royalty free fonts out there that may do the job.
I am developing the frontend of a web application and the design requires the use of the Segoe UI font. I used this font for a few text areas but in non Windows systems (Mac OS borwsers, Android, etc) those texts don't render with the Segoe UI font.
After googling this I found that this font is used by Microsoft. My question is. Can just use the font files in the frontend an use #face-font to include the font in the frontend? Or do I need some licence or something like that?
You can't license Segoe UI from Microsoft without direct contact, you can license the mono font from Ascender Corp who are linked to from Microsoft webpage for Segoe UI, however it is not the same as Segoe UI.
I would suggest Open Sans as an alternative to the Segoe UI font, it is quite similar and has much more open licensing for using as webfont (that link is actually to Google's hosted version of the font) - So you could have Segoe as the main font then fall back to Open Sans on non Windows 7+ Systems.
Technically you can embed the font through css, but I don't think the license will allow you do do that legally. Couldn't find out right off the bat though - msft's licensing is as always a maze to navigate.
Could you find an alternative font on Google web fonts or Typekit and use instad? They all have permissive licenses? (Open Sans is quite similar, for example)
If you are using CSS simply call the font in a font stack. It can be the first font or listed second or third. Each device or browser will use the fonts in your list as they are found on the system. If you put a Mac-only font first, Windows systems will default to the second or third font it finds installed.
If you want to host the font yourself, be mindful that some devices will not support certain fonts and you'll still need to list alternative fonts no matter what. Check your analytics to see what types of devices and browsers are visiting. Pick the most popular as your main font and then add fonts for the others in descending order.
There's no guarantee that any font will actually load. There are too many variables and the users can always uninstall fonts or shut off javascript and other nonsense that can drive a web designer crazy.
I use a combination of hosted and installed fonts in most of my sites, especially when design is more critical.
Is Segoe UI font built into the browser? If my visitors are viewing from Mac, will it work properly or do I have to set the CSS url for that? My designer says it will work only when we set the URL, however I removed the
#font-face
{
font-family: "Segoe UI";
src: url("fonts/Segoe UI.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
and it still works atleast on Windows 7. I don't have Mac though, to test.
The Segoe UI font is not built into a browser. It is shipped with some Microsoft software. On a Mac, it is most probably not available, though a user might have acquired it separately or as part of some software package.
You should remove the #font-face rule and the font files uploaded onto a server. Segoe UI is protected by copyright, and it must not be used as a web font without permission from the copyright holder, Microsoft (which probably won’t give a permission).
You will need some other strategy, such as using another font either as the basic font or as a fallback font for visitors who don’t have Segoe UI in their systems. The Google font Open Sans is rather similar to Segoe UI, and it’s free (and it comes in 10 styles, including Book, Normal, Semi-Bold, Bold, and Extra-Bold weight).
It will work on any computer with Office 2007, 2010, Vista or 7:
The Segoe UI font family can be obtained as part of Microsoft Office 2007, Microsoft Office 2010, Windows Vista or Windows 7.
Will also work on XP if the user has downloaded a Windows Live package:
Segoe UI is installed into Windows XP if the user installs Windows Live Messenger, or Windows Live Mail
Source
For any computer that doesn't have the above, you will need to declare it with a #font-face
I would like to add, that web-fonts (google fonts) are nowadays already a data-protection problem with EU-laws (as google safes some personal info), but the real problem with them is, that they cause time-lag on loading (0.6 seconds) and also cause a layout-shift (CLS) then.
I used web-fonts for 10 years. Now I go back to some pre-installed fonts...
Yes.
You may also want to provide the font in OTF as well.
You can find a list of available formats to provide the font in here: http://www.w3.org/TR/css3-webfonts/#font-reference
You can find a converter to turn TTF into the varieties of web fonts here: http://www.font2web.com/
My website font is font-family: Century Gothic;.
On my PC it works correctly but on other PCs it is changed.
It also doesn't work on the iPhone.
This happens because those PCs and the iPhone do not have the font installed.
If you want to ensure that your font works on as many computers as possible, you should consider using #font-face.
The basic CSS syntax is
#font-face{
font-family: CenturyGothic;
src: url('CenturyGothic.otf');
}
And then
font-family: CenturyGothic, serif; /* Whatever others you want to add */
Six Revisions has a good overview: http://sixrevisions.com/css/font-face-guide/
FontSquirrel will generate the code for you: http://www.fontsquirrel.com/fontface/generator
It should be noted that unless the font is a non-commercial font, you will need a license to use it with #font-face. That is, you will need to purchase the font and maybe even purchase the right to distribute it.
(Thanks to #bookcasey for highlighting the need to add this info)
A good resource for info on licensing is http://blog.themeforest.net/general/font-licensing-for-the-web/
Having said that, there are thousands of freely available fonts - including dozens on the FontSquirrel site - where no licensing is necessary.