I would like to know how chrome chooses which font to render? I am asking this because using Chrome Developer Tools I can see that the font family computed is different from the font family rendered and this is confusing. Similar questions on Stackoverflow was not of much help in this particular instance.
My computer font family looks like:
font-family: museo-sans, sans-serif, Futura;
Rendered font looks like:
Helvetica—473 glyphs
In this article, it is mentioned that chrome maps a rendered font to a the computed font listed. What does this mean exactly and why does it do that? Is there a way to control which font is rendered?
Same as any other browser: if it can't find the first font, it tries the next, and so on and so on until it runs out of rules. If no fonts match, then the font is inherited from the parent element, all the way up to the document level, where it'll just pick the browser's default font.
In this case, things are a bit weird, because the order you're showing is "a real font" followed by "a generic CSS class that always resolves, but without any guarantee as to which font that will be, just that it'll be a sans-serif font", followed by the real font "futura".
So Chrome will try museo, won't find it, sees the generic "sans-serif" and just picks a known sans-serif font for you. Usually that's something like Arial or Helvetica, but the CSS spec doesn't say anything about which font it has to be, specifically. It just needs to be a sans-serif font.
The weird part here is that the ordering you chose means that the "futura" at the end will never be checked. The browser will always find a suitable font once it hits serif, sans-serif, cursive, fantasy, or monospace
Related
I am working on a theme for a new website. We had some professional graphics help us design the theme. For the front page, they took and tweaked the Agency theme.
If you download that theme (it is free) and search for the agency.css file and open it, there is one CSS line to indicate the default font of the page:
body
{
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
As we can see, the specified fonts in font-family start with "Roboto Slab", then it goes on with "Helvetica Neue", "Helvetica", "Arial", and finally, the default "sans-serif" that the browser would be happy about.
Only the "Roboto Slab" font is a "serif" font, all the others are "sans-serif" fonts...
As a designer, would you say that this is a mistake? Because if your computer does not include the font or if the font is somehow not available at the link above, it would go from a "serif" font to a "sans-serif" font... That seems wrong to me.
There are two different aspects you should consider:
Providing different font families for the same text is no longer needed in modern web.
This is a legacy technique back from when fonts were required to be installed on a machine in order to be used for rendering a web page. Since we now are able to provide fonts as css files and load them using #font-face declarations, (which I assume your website uses), the fallback only occurs when the machine rendering the website fails at loading the provided font file (this is extremely rare and, when it happens, it is likely that fonts rendering with a different face is not the most serious rendering problem of the page - so the best course of action would probably be to just reload the page).
If the second and the third font options were provided by the designer (provided they are professionals) the fonts were probably matched with your other main font and, even though it's part of a different type, it will still complement the other font well.
I'd like to point out I actually have design related studies but have turned into a professional coder over the past ~10 years.
Choosing and matching fonts is a complex process and more often than not, the right size, weight or style weigh in more than whether the font is serif, sans-serif, monotype or fantasy. There's no recipe for matching fonts and usually it involves taking a step back and looking through dimmed eyes. It's also important one also tests with multiple types and combinations of content, to make sure they all are balanced and look well.
In design, following strict rules gets you above average results, but never in the top 10%. Those are most times based on bold actions and inspiration. Don't measure the designer's work using a ruler. If you really need to, measure it in terms of user behavior. If there's an increase in traffic/response/commitment, you got a good design.
The answer you will get from a question like this will to some degree be based on opinions, rather than facts, references, or specific expertise. My opinion is that all important browsers support web fonts. If the web font is used correctly it will show correctly to 99.9% of the site visitors. The other fonts listed is just fallbacks for the 0.1% visitors that for some reason is not able to load the custom web font. The most important thing is that they will be able to read your content. If you would like to control the fallback font, you should choose a set of system native fonts present on all platforms. You could use courier, but that is a mono spaced font (fixed-width) and I doubt it is more readable or fancy. A sans serif is also more modern than e.g. Times and therefore closer to the modern look of Roboto Slab.
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 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.