I understand that web safe fonts have a high chance of being install on most OS. Looking at http://www.cssfontstack.com/ shows what OS has which font installed. However, what I can't seem to find any information for is if web safe fonts are internationally safe as well, that is, will the font render in any language?
I looked at tons of international sites to look at their font stacks, and this is what I found:
Arabic & Persian: Verdana, Arial, Tahoma
https://www.drupal.org/node/695128
Pashto (Afghanistan): Arial, Helvetica, Tahoma, Verdana
http://atra.gov.af/ps
Chinese: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei" ,"微软雅黑", Arial "宋体","Arial Narrow"
https://gist.github.com/feimoslong/3496114
http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/
Japanese: "Lato", "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; Helvetica, HirakakuProN-W3
Japanese standard web fonts
http://www.gov-online.go.jp/data_room/calendar/event/201603.html#nousongyoson
https://kotobank.jp/word/%E6%94%BF%E5%BA%9C-86390
Hindi (India): Arial,Verdana,Tahoma, Helvetica, mangal (lots of website use nato sans or source sans web font)
http://www.sewayojan.org/Default3.aspx?l=0
http://delhi.gov.in/wps/wcm/connect/DoIT/delhi+govt+hindi/home
http://www.livehindustan.com/news/national/article1-mp-govt-in-trouble-with-nilgai-because-of-cow-will-change-name-519355.html
Hebrew: Verdana, Arial, Helvetica
http://www.gov.il/firstgov
http://www.pmo.gov.il/Pages/default.aspx
Urdu (Pakistan): "Helvetica Neue",Helvetica,Arial,sans-serif
http://javedch.com/pakistan/2016/03/01/143024
Thai: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif
http://newdelhi.thaiembassy.org/th/
http://www.iadopa.org/
From inspecting these sites, I see that each web safe font gets mapped to a font file on my OS that has the characters needed to render the language. For example, when Arial is used for a site in Hindi, I see that the font Kohinoor Devanagari is used for any missing characters from the Arial font.
So here are my questions: will a web safe font always map to a font on any OS/device that can render the language? By using a web safe font can I translate my site into any language without needing to change the font for that language?
You probably already know this, but different regions don't really have their own specific fonts. In a lot of regions websites will go with the system default font, because the language of the region is pictorial (if you thought downloading a webfont was slow, imagine downloading the entire Japanese character set)
The best you can probably do is go with a common stack of fonts that OS's have installed. Medium have a great post on how they prioritize system fonts for their UI components, and the accidental time travel they encountered on the way.
In the end, sans-serif is your friend. I once had to check how a website looked on a PlayStation Vita console on it's built in Internet Browser, which actually avoids downloading webfonts and opts instead for it's own sans-serif font, which has characters for both Latin and non-Latin based languages in one (very big) character library.
Of course, there are many cases where even in non-Latin languages English words are used instead of a local translation (brand names, acronyms) - this is often where I've seen Times New Roman bleed into Asian websites, because it was my browser's (and probably yours) default font to render in the absence of any specific CSS declaration.
If you think from the context of someone seeing a English word in the middle of a Chinese article, they're probably more likely to recognize an English word in Times New Roman than, say, Tahoma. I've even seen that some Asian Cartoons have English text in Times New Roman. While in the West that's we may find it an eye-sore, in countries that don't use latin characters any deviation from the style of the character can compromise the meaning of the word, or change it entirely.
But anyways. I'd recommend trying a leaf from Medium's book. If you feel like displaying a different font, then by all means you can, CSS is great in that respect that it will silently fall back to the next best thing. You'll never get it perfect, but as long as everyone can read your text, they'll be able be able to understand it.
P.S Always keep sans-serif at the end ;)
Related
When I inspect elements on my site using the Chrome developer tool, I see the following as my element's "Computed" style:
font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, "Roboto", Arial, "Lucida Grande", sans-serif
But if I scroll down further (to the bottom of the "Computed" tab) I see:
Rendered Fonts
Liberation Sans—Local file(11 glyphs)
Since my (Linux) OS must have Arial and sans-serif, I'm confused as to why Chrome would pick "Liberation Sans": it isn't even on my font-family list.
I'd blame my own bad CSS, but in theory the "Computed" tab shows the final/processed version of my rules, so however terrible my original CSS may have been, Chrome clearly sees my font-family list defined (and being applied) to my element ... it just ignores it.
Can anyone explain this mystery?
EDIT: I installed a font-checking program and it turns out that Linux (Mint) does not in fact come with an Arial or sans-serif font ... but even so, I thought browsers provided (at least) a basic sans-serif font, no matter what the OS? Is that incorrect?
Your font stack specifies Arial.
Arial is not present on most Linux systems for licensing reasons, and it is usually aliased to Liberation Sans, since Liberation Sans has the same dimensions (metrics) as Arial. The font design, however, is different (that's why Liberation Sans is usually not the default Linux sans serif font, its design is not popular).
Helvetica is another well-known legacy font name usually not present. If you try to use it in the font stack it will usually trigger all kinds of aliasing. It may even trigger the Liberation Sans alias before Arial (since Arial was Microsoft's poor-man Helvetica replacement when windows launched and has about the same metrics).
(When you create a PDF that specifies Helvetica on Windows it will usually substitute ArialMT).
If you only specify sans-serif you will get the system "best" sans-serif font, usually clean well-loved designs, but their dimensions vary widely from system to system.
Due to the number of broken web sites whose designers assume all systems ship with the same fonts, with identical pixel widths that can be fixed in the page design, font substitution is usually done on metric first, design second priorities.
The only way to get the same font on all clients is to use web fonts, but that will slow down your site due to the font download and users (not "designers") prefer fast pages. Web fonts demand to be careful about licensing and font unicode coverage, security-conscious users will block third-party downloads, and there is a lot of cargo-culting about obscure web font formats (opentype is sufficient in most browsers nowadays).
The kind of Apple maniac that thinks HelveticaNeue is the alpha and omega is usually satisfied with Open Sans as web font.
But even with web fonts the rendering will be slightly different since different systems use different text engines that all have their specifics, with some fonts working better than others for a given engine.
There are two font fallback mechanisms in Chrome for Linux. One is OS-level fallback. Another one is CSS specified fallback. The OS-level fallback mechanism returns Liberation Sans to Chrome instead of none or not found while Chrome asking if the HelveticaNeue available in your OS. Chrome takes the returned Liberation Sans and believes OS returned answer so ignores the CSS subsequent font fallback list.
I see that you have both Helvetica and Arial in your font-family properties. I'm guessing that you want Arial when Helvetica is not available...An answered question that deals with this is: two fonts
Now, if I wanted to have only one font-family, such as Century Gothic, I would do:
font-family: "Century Gothic", CenturyGothic, AppleGothic, Sans-Serif;
This is a good guide.
My question is, why do you have so many
Because Google Chrome, somethiing leave the WWW from the url, you can try to put it manually.
Especially in Unix or Mac system.
Could somebody tell me if fonts TNR, Helvetica, Arial are safe in multilanguage website?
This website will be among others in English, Polish (polish diacritical signs), Greek (greek alphabet) and Russian (cyrillic). Will it be safe I just use for example:
font-family: Times New Roman, serif;
Should I bother about "special" Times New Roman, Helvetica, Arial for greek and russian?
It will depent if you are using web fonts (#font-face) or just a font stack that will use the local system available fonts. If you are using the second option you can safely expect that the user have the appropiate version of the font to display his language. If you are using #font-face you will have to check wich unicode points have your version of the font.
This applies to any font family, not only Times, Helvetica & Arial.
Times New Roman, Arial and Helvetica are featured within the CSS2.1 specification and so can be considered safe to use. The serif at the end of your font-family declaration is the generic family and acts as a fall back. If the browser cannot render the specified font, it will fall back to a serif font.
As for whether they support Greek and Russian symbols: that's a different matter. You'll have to check this yourself (through sites like fileformat) to ensure they include the specific Unicode range.
serif and sans-serif will be failsafe regarding that. Besides that, you need to look up if the fonts support Latin-2 (Russian, Polish) character set. For Greek this is the same but it’s not covered in Latin-1/2.
Best is to test yourself in these languages but there’s a pretty good chance these fonts support all your needs.
I am working on a japanese website and have a hard time finding a font which looks good in japanese. I was surprised that so few fonts seem to exist for japanese. My team has contacted several web font providers without much success. Only one company could offer a web font for japanese but it was 35 megabytes which is far to big for the clients to download to their browsers.
For Latin letters there are a few fonts which one can be quite confident almost all users have, like Arial, Verdana, TNR, Georgia and so on. What fonts equal these in japan?
Web-font for Japanese, though there are few providers exist, is not really practical as you found the size of the font data is too big to download. Usually Japanese font has 8,000-16,000 glyph so making new fonts means you need to make at least 8,000 glyph, which is pretty heavy task. As a result of it, there are very few variations in Japanese fonts, and Japanese users also care about fonts less than Latin-character users.
Most Japanese websites use default font sets provided on Windows or Mac. The latest ones are Meiryo and Hiragino Kaku Gothic Pro. For older versions such like Windows XP, it is good to add former default fonts MS Gothic(or MS Mincho)/Osaka.
Some old browsers could not understand those font names in English, some others do not recognize the names in Japanese, so it is safe to write both in Japanese and English.
Meiryo and Hiragino's order is, because Mac users may have Meiryo from MS-Office, and Hiragino is more familiar and matching well on Mac, better by starting Hiragino series.
So the current recommended practice is like this,
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
Here's an answer in 2021 after my research and from my experience living and working in Japan. I like this article, though it is in Japanese so I'll do my best to summarize. Here are what some major companies are using in Japan:
日経 / Nikkei
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
産経 / Sankei
font-family: "ヒラギノ角ゴ ProN W3","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","HiraKakuPro-W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS Pgothic","Osaka",sans-serif,Helvetica, Helvetica Neue, Arial, Verdana;
ロイター / Reuters
font-family: "Hiragino Kaku Gothic Pro","Meiryo","MS Pgothic",knowledge-reg,helvetica,arial,sans-serif;
CNN
font-family: "メイリオ", Meiryo, Tahoma, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
Yahoo JP
font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif;
時事通信 / Jiji Press
font-family: "ヒラギノ角ゴ ProN W3","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","HiraKakuPro-W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS Pgothic","Osaka",sans-serif,Helvetica, Helvetica Neue, Arial, Verdana;
Note, sometimes it is suggested (such as here) to use a Mincho font stack like:
font-family : 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif;
Something I learned working here: some Japanese prefer Gothic or other fonts over Mincho fonts, as Mincho looks more "Chinese" according to some. None of the companies above use Mincho as evidence to that. Like it or not, I guess that's something to keep in mind when branding.
Fonts don't really have to be "web fonts" (woff) to be used on the web. I use several of these on my website:
http://cooltext.com/Fonts-Unicode-Japanese
http://www.wazu.jp/gallery/Fonts_Japanese.html
But here are some free Japanese web-fonts (that I also use):
http://mplus-fonts.osdn.jp/about-en.html
I am no font/design expert, but just about every Japanese PC should have basic Latin fonts like the ones you mentioned installed, so they will work. But those fonts give a kind of Western look to Japanese characters. If you want to use fonts that Japanese sites typically use I would start by browsing some of the more popular Japanese sites and using things like Firebug or the Chrome developer tools to examine the CSS and see what fonts they reference. For example, yahoo.co.jp currently has this CSS:
font-family: 'MS PGothic', Osaka, Arial, sans-serif;
The "gothic" typeface fonts seem fairly popular these days: on Windows, fonts like MS Gothic, MS PGothic, etc. Ming typeface is also widely used. These are the default browser font settings for Firefox on my Japanese Windows machine:
The proportional font is the sans-serif font, which is MS PGothic, serif font is MS PMing, and the monospace font is MS Gothic.
BTW, the "Osaka" font was a standard font on Japanese Macs in the 90s. Unless you want that "retro" feel, is highly recommended to use "Hiragino Sans" (not Kaku Gothic that's deprecated) for macOS and iOS devices for a consistent and modern look and better legibility. Also Hiragino Sans has far more font weights (10) than Kaku Gothic (only 2).
This is an old thread but for anyone doing research on this now, you should note that Meiryo is no longer a standard font loaded with Windows. Since Windows 10, the new default font is Yu Gothic. You can still install Meiryo manually however. Please see this article
This is an old thread, but I was researching this today and found that Noto Sans is production ready (something I had read about a few years ago).
I've tried it out in Japanese and it looks really good, link here: https://www.google.com/get/noto/
The Japanese font is called 'Noto Sans CJK JP' (China/Japan/Korea Japan) if you do not wish to download the whole package.
For whom may come in the future, there is a great (long and deep) article on this very matter written by a japanese copywriter: The Most Comprehensive Guide to Web Typography in Japanese or in the archive.org, because there is apparently an issue on mhdigital.
For instance:
Japanese kanji characters use more pixels than alphanumeric characters because they consist of many strokes. For example, the alphabet character “A” only needs 7 x 7 pixels, but the kanji character “艦” requires 15 x 15 pixels for it to be readable.
So, it's not only a matter on quantity, but also on pixels per character. Quite obvious now.
'Noto Sans CJK JP' is also available for Ubuntu linux. It is provided as an official package "fonts-noto-cjk". Still manual installation is required, it is expected to have it installed on Japanese Ubuntu machines.
Screenshot: http://i.imgur.com/QVBGx.png
It is pretty evident that my site renders different on Chrome and FF7 on my Win7 machine
I am using this:
h1, h2 {font-family: "Lucida Grande", "Helvetica Neue", Arial; }
Does anybody can point me how can I even these diffs? I don't want fonts with different 'feelings' on each browser.
The font, Lucida Grande is installed in my Windows machine
EDIT:
font-weight: normal !important
doesn't work either
It looks like the two browsers are rendering it with a different weight.
I can think of two possibilities, though I don't know if either are correct.
You requested a bold font, but that font is not available in bold. One browser is just showing the regular, non-bold variant unchanged, whereas the other has processed it to look bold.
You requested a particular weight of font, say "bold" or "600" but the installed fonts do not precisely match that weighting. One browser is substituting an "extra-bold" variant of font, and the other a "regular-bold", or something of this nature.
If either of these is correct you could play around with the font-weight CSS property to try and alter it. But then that may affect substitution of whichever font is chosen in the case that it is viewed on a system with no Lucida Grande font at all.
Fonts will always render slightly different from one browser to another, but that was a bit more difference than usual. Probably because the headers have font-weight: bold; as default, and the font doesn't have a bold variation so the browsers create the bold style from the regular weight in different ways.
Anyway, you might want to use more common fonts. On my Windows 7 machine there is neither Lucida Grande nor Helvetica Neue, so it would render using Arial. Still, I have the additional fonts that come with both MS Office and Photoshop, so I have a lot more fonts installed than you can expect from a standard system.
Also, you should always specify a generic font as the last resort, in this case sans serif, otherwise it would render using the default font if none of the fonts are installed, which is something like Times Roman which has a completely different look. Perhaps also adding Helvetica, which is the closest equivalent of Arial on non-Windows systems.
I want to use Helvetica Neue Condensed Bold on my webpage but it doesn't seem to be working. I have tried this: http://jsfiddle.net/ndFTL/ but it does not work, it simply shows up as Helvetica Neue Bold.
I have Helvetica Neue Condensed Bold installed:
Could anyone please help me out?
After a lot of fiddling, got it working (only tested in Webkit) using:
font-family: "HelveticaNeue-CondensedBold";
font-stretch was dropped between CSS2 and 2.1, though is back in CSS3, but is only supported in IE9 (never thought I'd be able to say that about any CSS prop!)
This works because I'm using the postscript name (find the font in Font Book, hit cmd+I), which is non-standard behaviour. It's probably worth using:
font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue";
As a fallback, else other browsers might default to serif if they can't work it out.
Demo: http://jsfiddle.net/ndFTL/12/
I had the same problem and trouble getting it to work on all browsers.
So this is the best font stack for Helvetica Neue Condensed Bold I could find:
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:600; font-stretch:condensed;
Even more stacks to find at:
http://rachaelmoore.name/posts/design/css/web-safe-helvetica-font-stack/
In case anyone is still looking for Helvetica Neue Condensed Bold, you essentially have two options.
fonts.com: License the real font as a webfont from fonts.com. Free (with a badge), $10/month for 250k pageviews and $100/month for 2.5M pageviews. You can download the font to your desktop with the most expensive plan (but if you're on a Mac you already have it).
myfonts.com / fontspring.com: Buy a pretty close alternative like Nimbus Sans Novus D from MyFont ($160 for unlimited pageviews), or Franklin Gothic FS Demi Condensed, from fontspring.com (about $21.95, flat one time fee with unlimited pageviews). In both cases you also get to download the font for your desktop so you can use it in Photoshop for comps.
A very cheap compromise is to buy Franklin from fontspring and then use "HelveticaNeue-CondensedBold" as the preferred font in your CSS.
h2 {"HelveticaNeue-CondensedBold", "FranklinGothicFSDemiCondensed", Arial, sans-serif;}
Then if a Mac user loads your site they see Helvetica Neue, but if they're on another platform they see Franklin.
UPDATE: I discovered a much closer match to Helvetica Neue Condensed Bold is Nimbus Sans Novus D Condensed bold. In fact, it is also derived from Helvetica. You can get it at MyFonts.com for $20 (desktop) and $20 (web, 10k pageviews). Web with unlimited pageviews is $160. I have used this font throughout (i.e. NOT exploiting the Mac's built in "NimbusSansNovusDBoldCondensed" at all) because it leads to a design that is more uniform across browsers. Built in HN and Nimbus Sans are very similar in all respects but point size. Nimbus needs a few extra points to get an identical size match.
"Helvetica Neue Condensed Bold" get working with firefox:
.class {
font-family: "Helvetica Neue";
font-weight: bold;
font-stretch: condensed;
}
But it's fail with Opera.
You would have to turn your font into a web font as shown in these SO questions:
Non-Standard fonts in web?
How to add some non-standard font to a website?
However, you may run into copyright issues with this: Not every font allows distribution as a web font. Check your font license to see whether it is allowed.
One of the easiest free and legal ways to use web fonts is Google Web Fonts. However, sadly, they don't have Helvetica Neue in their portfolio.
One of the easiest non-free and legal ways is to purchase the font from a foundry that offers web licenses. I happen to know that the myFonts foundry does this; they even give you a full package with all the JavaScript and CSS pre-prepared. I'm sure other foundries do the same.
Edit: MyFonts have Helvetica neue in Stock, but apparently not with a web license. Check out this list of similar fonts of which some have a web license. Also, Ray Larabie has some nice fonts there, with web licenses, some of them are free.