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
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 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 have two website hosted on different server, there are elements that i have set the same font-family as 'TheSans', I am sure they both are not overwritten, the 'theSans' is the real and final value in css, but the font of these 2 pages just look differently with same browser. I checked on my pc and found that I don't have this 'theSans' font installed, so what actually happened there?
if the browser does not find the font, what font it will use? why the behavior is different in same browser.
If a browser doesn't have the font, it will fall back to the other options specified in the css font-familyrule. If no addition options are specified it will just use its default. eg. below it will use Helvetica if installed, if not it will use arial, if no arial it will just pick what every sans-serif font it has
font-family: Helvetica, arial , san-serif;
Link about font-family
Now that being said, wouldn't it be nice to give the browser the font if it doesn't have it? And that is where the #font-face CSS rule comes in
related question here
About #font-face
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.
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.