I have a rails project I am using bootstrap+compass on.
The default font family is:
"Helvetica Neue", Helvetica, Arial, sans-serif
However my fonts are displaying in Times.
If you look at this screenshot taken from the "computed style" section in Chrome you can see that yes, it sees that as my font-family but is rendering Times anyways. Which isn't even a san-serif font, so the only way I can possibly imagine in which this would be the case is if I had no sans-serif fonts in my computer at all. Which is not the case!
Any ideas what is going on?
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'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)
Not too sure if this has been asked before with specifics to Locally Available fonts.
I'm loading two font stacks on my local development site
// font stacks - http://cssfontstack.com/
"Arial", "Helvetica Neue", Helvetica, sans-serif;
"Georgia", Cambria, Times New Roman, Times, serif;
The Arial font stack behaves as expected however the Georgia font stack skips Georgia and Cambria on Chrome. Firefox displays both exactly as expected. Both fonts exist on my local machine... Does anyone have any reasons why this would be happening?
I think you see result of Issue 421305 # Chromium http://code.google.com/p/chromium/issues/detail?id=421305
scottmg#chromium.org says: "If DirectWrite fails to enumerate the system font collection (corrupt font, etc.), or we exceed 1750 fonts, we abort and load a very small set that does not include Verdana or Georgia. Obviously this is a hack. Shrikant has a patch out to fix this properly. In the interim, the only quick fixes are to reduce the number of fonts in %WINDOWS%\Fonts below 1750, or go to chrome://flags and disable DirectWrite."
The problem affects Chrome 38 and AFAIK last Opera with webkit core too... confirmed are issues with Georgia, Verdana, Tahoma, Calibri, Trebuchet and other locally hosted fonts.
It should be fixed in Chrome 39+
So, I pulled Arial over onto Linux from my former Windows distribution, but I then had to fight with the 12px Arial issue. I fixed that as suggested by resizing it to 13px, but I decided that I actually much preferred Google Calendar in Liberation Sans as I'd had it before.
I've used Stylish to fix that for the main part of the calendar, but I can't get the Google Tasks section to use Liberation Sans because it uses much more complex/strange CSS selectors.
Firebug says the font-family of the Tasks section is defined by div#:x.tl.U, with HTML
<div id=":x.fc" class="bb" style="height: 165px;">
<div id=":x.tl" class="U Rb">
<table class="v" cellspacing="0" cellpadding="0" style="width:100%">
(lots more nested tds/divs here)
</table></div></div>
but using
div#:x.tl.U {font-family: "Liberation Sans", Arial, sans-serif !important;}
or even
div#\3a x\.tl.U {font-family: "Liberation Sans", Arial, sans-serif !important;}
doesn't produce any results. For the main (month / 2 weeks view) section,
div.st-c-pos {font-family: "Liberation Sans", Arial, sans-serif !important; }
works fine (altering exactly the element Google uses to define the font-family).
How do I work with these selectors? I do know some CSS but that kind of complexity is beyond me. (Also if someone could explain what the different "., :" etc. parts mean...?)
Edit: It's not just the Tasks section, the week view also displays a mixture of Arial and Liberation Sans. I've defined the font-family for the body element as well, but that doesn't really seem to inherit... Any better ideas than just hunting down every single declaration of Arial in the page and replacing it manually?
Adding that HTML does help, though as you say, that ID name is pretty weird. However, your first shot at div#:x.tl.U looks right to me, as it chains the ID and class. So it's most likely that the inner elements also have a font-family declaration of Arial that is overriding your rule.
I suppose, as a test, you could try something like this, though it's a bit of a sledgehammer option that may not suit anyway:
body * {font-family: "Liberation Sans", Arial, sans-serif !important;}
Otherwise, have a look at the inner elements and see if any of them have explicit font declarations.
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.