In various browsers, when a specific font is used (e.g. - Helvetica Neue), if that font is not found, the first font in the immediate family is used. So if I were to specify that Arial Narrow was the base font style for an element and my reader did not have this font, it would travel to the first available Arial font the system could find.
As an exercise, many sites like the Helvetica fonts (particularly the 'Neue' and 'Condensed' versions). They typically specify font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; believing that the browser will travel along this particular path and each font should be yummy with the first listed being the yummiest. However, Firefox/IE/Chrome (so I assume webkit browsers) all will fail to the find the specific Helvetica font required and move directly to the first font they encounter in the Helvetica family. One would think this would be Helvetica, but on my system it was defaulting to Helvetica 95 Black. I even tried renaming the font file to see if that was the cause, and no matter the filename, the result was that the page would default to Helvetica Black. I've found this to be the case with Arial as well.
So other than attempting to account for every single flavor of Helvetica, Arial, Verdana, Tahoma, ad infinitum, is there a way to force the browser to stop "guessing" at the family and accept only the exact font in question?
For starters, here's a description of the font matching algorithm as outlined in the CSS 2.1 specification (or CSS 3, if you prefer). This is a tricky issue though, as is evidenced by the disclaimer before the algorithm's details are outlined:
Because there is no accepted, universal taxonomy of font properties, matching of properties to font faces must be done carefully. The properties are matched in a well-defined order to insure that the results of this matching process are as consistent as possible across UAs (assuming that the same library of font faces is presented to each of them).
Also, note that you must enclose any font name containing whitespace with either single or double quotes, as per section 15.3.
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 used some special fonts in my asp.net web application .Which are not found on every machine (which use that web application) and due to which that font is not visible to client.how can i resolve it
As mentioned in this W3Schools article you should always specify fallbacks when specifying a font-family:
The font-family property should hold several font names as a
"fallback" system. If the browser does not support the first font, it
tries the next font, and so on.
Start with the font you want, and end with a generic family, to let
the browser pick a similar font in the generic family, if no other
fonts are available.
You can do this in CSS with the font-family property, simply by specifying a comma separated list of different fonts. As mentioned above it should end with a generic family.
The following example prefers Arial, but falls back to the Helvetica "font-family" when Arial is not found. If neither of both is available it then falls back to a font of the sans serif "generic-family".
font-family: Arial, Helvetica, sans-serif;
You should use a webfont in this case. The browser will download your specific font and display the page as you want.
See for instance (never used, first hit in Google search): https://www.web-font-generator.com/ Mind the second checkbox!
Or see https://www.google.com/fonts
I'm using the Inspect Element function of Firefox to determine which font-family is used on a certain element.
In my actual case I can only find font-family definitions which are stroked through in the rules pane. I thought they have been overwritten in a higher position from another CSS rule. But there is no definition for font-family which is not stroked through all over the rules pane.
The up-most one shows like:
.helvetica-neue-websave {
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif
}
On the other hand when I look at the font pane of the inspector I see that the font-family for my element is Helvetica Neue Condensed Bold but I can not find out, where it was defined.
edit: the computed pane states it uses HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif but it is definitely the condensed version.
So, may anyone can guide me how I can find out where this font-family definition is placed???
It is not in the HTML itself and in none of the CSS files which I see in the rules pane.
Hope my question was clear and sorry for my english
Do you see that the font-family is "Helvetica Neue Condensed Bold" or do you see that the font resource used for the font-family is "Helvetica Neue Condensed Bold"? Because those are two completely different things. It sounds like the latter, in which case: CSS asks the browser for "a font" based on the names provided.
The browser checks if it has any explicit resources bound (using #font-face) and if not, it asks the OS for a font that matches the name CSS specified.
If the OS can't find them, CSS falls back to the next font and tries again. Steps 1 and 2 repeat until we run out of resources.
At any point, the browser or OS are allowed to go "yeah I found something" provided the name a resource they know of matches "well enough", so if you ask for Helvetica Neue, and the OS ends up being asked for that, then it can go "oh yeah I have a Helvetica Neue here" and then give the browser Helvetica Neue Condensed. That is 100% acceptable: it's one of the many legal matches for "Helvetica Neue" because that's the actual family name, and "Regular", "Condensed", "Thin", "Oblique", etc. are not.
If that isn't acceptable to you as develop, then your CSS needs to become more precise: either start only accepting 'Helvetica Neue Regular', which is a bad plan, or load an actual font so that you properly control which font will get used, without the OS getting consulted. Especially for a font that only Mac users will have installed (unix, linux, and windows users all do not: and would need to buy it first), and so is a guaranteed breaking on other platforms.
Create an #font-face rule with the font you want, with a font-family like ContentFont (so that if you want a different font later, all you have to do is replace the src binding, without changing any content CSS) and then point that to a true .woff font resource (without using local() because again, no guarantee you'll get what you ask for, it might resolve "good enough" while to human eyes being absolutely wrong)
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.
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.