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.
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.
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 ;)
I have noticed that at Google Fonts they never use fantasy as fallback class in font-family. For all script and typical fantasy fonts, they use cursive.
I wonder if this is a hint that chrome does not support fantasy as fallback class? For that to be the case, fallback font-classes would have to be handled by the browser via implemented lists for typical serif, sans-serif etc. fonts. Alternatively, the browser could query the os for such lists?
What happens when the browser needs to fallback to say a serif font on the clients system? How will it get info on the installed serif fonts?
I haven't been able to find an aswer to this, so I hope that someone here might know about it. I know web safe fonts and all that are probably about to become things of the past, but they still have some relevance.
Typefaces don't map to any generic font families mechanically. They're only categorized that way in their family names and on font listings such as Google Fonts and Adobe Typekit.
You could create a font stack that consists of a sans-serif family, a serif family, and ends with the fantasy keyword:
font-family: Helvetica, 'Times New Roman', fantasy;
And browsers would treat it the same: use whichever family comes first that is supported, or fall back to the generic family if it comes to that.
I would expect all browsers to implement at least the five generic families defined in CSS2.1 and css-fonts-3: serif, sans-serif, cursive, fantasy, and monospace. But which faces each generic family maps to exactly is less predictable — for one, most browsers actually offer the user the ability to change their preferred default serif, sans-serif and monospace families. And even then, the entire list of installed fonts is available for selection in every category, which suggests that even browsers can't (or at least don't) differentiate between categories of fonts.
The default preferences that a browser ships with are based on assumptions of which fonts are most likely to be preinstalled on any given system.
I can't answer why Google Fonts doesn't seem to specify fantasy in any of its font stacks.
I've set up a test case:
http://codepen.io/jaycrisp/pen/NxOrOy
.cursive {
font-family: cursive;
}
.fantasy {
font-family: fantasy;
}
I see different fonts in chrome on mac, so that shows that chrome does support the fantasy keyword. I see the same font on Safari and Chrome too.
I'm seeing papyrus for the fantasy font, which I think is a Mac OS bundled font. I'm also seeing the same font on Firefox and Safari.
I would guess that the reason google font uses cursive instead of fantasy is that if you're using such a font, you're probably going for a very specific look to your site. Replacing this font with something like papyrus is going to totally ruin it. Well, using Papayrus will totally ruin your site anyway, but that's another matter.
I'm using Myriad Pro, and for Georgian language it shows [X][X][X] blocks.
I want to use Myriad Pro for English language, but how do I implement fallback strategy for Georgian language?
Doing font-family: Myriad Pro, Arial, Serif didn't do anything. As this is mechanism to skip font if browser doesn't have it or understand it...
What are my options?
What is a correct way of handling this?
I really would like to avoid php/css that is outputing css font-family based on selected language using php... Is there a cleaner solution??
Ty.
Since your screen shot contains some Georgian letters, there must be some font in your system that contains them (unless they are in an image, of course). This suggests that there is something wrong with font handling. When you specify, say, font-family: Myriad Pro, then a browser should deal with characters not present in that font by picking them up from some other font(s). However, browsers (especially IE) are known to fail to do so too often.
Relatively few fonts contain Georgian letters. For a good (but not perfect) overview, check out Fileformat.info page on font support to Georgian letter an.
The solution is to specify explicitly a fallback font that does contain the Georgian letters. Arial won’t do, as it lacks them. The only (reasonably) safe way is to use a downloadable font (web font) via #font-face. If you are using Myriad Pro, a purely sans-serif font, for Latin letters, it would be typographically best to use a sans-serif font with roughly the same x-height. Consider using DejaVu Sans, a nice free font (and FontSquirrel #font-face generator).
Your CSS rule could then have
font-family: Myriad Pro, DejaVu Sans, sans-serif;
My website uses a rather obscure font that about half the computers can properly read. The font is "Lucida Console".
On the computers that can't read this font, they get displayed ugly Times New Roman, is there a way to set the font of my website to Lucida Console but on computers that can't read it, view Arial instead? Using CSS.
you can specify multiple fonts:
p {
font-family: "Times New Roman", Times, serif;
}
The browser will try the first one, if that one isn't available the second, and so forth. In the end it uses the family serif, so the browser chooses any serif font. You should use the monospace family.
So in your case, something like this is what you want:
p {
font-family: "Lucida Console", "Courier New", monospace;
}
Further tips:
Google css font stack for suggested lists of fonts aimed at certain styles of fonts. 'font stack' is the colloquial name for these font lists.
Think cross-platform. Consider adding fonts commonly found on Mac, Linux, iOS, Android, Windows, and other platforms your readers may be using.
Always include a generic-family name at the end of your font stack in case the user has none of your desired fonts:
serif
sans-serif
cursive
fantasy
monospace
Include quotes around fonts named with multiple words, or simply quote all font names.
You can also serve that obscure font with your website (if you are legally able to) using #font-face. It's easy and works even in IE6 :).
Read about it here: http://www.miltonbayer.com/font-face/