Screenshot: http://imm.io/Wwr or http://gasa.jaeh.net
It is pretty evident that my site renders different on Chrome5 and FF3 on my Ubuntu.
Does anybody can point me how can I even these diffs? I don't want fonts with different 'feelings' on each browser.
Another point is, the elements seems smaller on chrome, the font size mainly. Any hints?
EDIT1
The font is "Lucinda Grande". The zoom levels seems to be the same (CTRL+0 resets)
Definition:
body{ font-size: 18px;font-family: "Lucida Grande";}
The rest is defined over percentage
Both of those browsers are using their respective default fonts, which aren't the same. Lucida Grande is not in use at all (it's a sans-serif font, which looks quite different to what you have there). As Lucida Grande is the only font you include in the font-family list, the browser must fall back to its default font when this isn't available.
Are you sure you have it installed on your machine? It only normally comes with Mac OS X, not Ubuntu. This is why listing a selection of common fonts is a good idea.
Related
I know this is an extremely basic and stupid question, but I seem to be having a genuinely curious problem.
When using what are supposed to be web-safe fonts like Didot, and using
header h1{
font-family: Didot, serif;
font-size: 36px;
}
my browser just displays the standard serif font.
In fact I can't seem to get it to display any web safe font, it will only display either the standard serif or sans-serif font. I know my selector is correct because I CAN change between serif and sans-serif, but I know its not displaying other web-safe fonts because I tried both Arial and Helvetica (which are both definitely web safe) and when I refreshed from one to another there was absolutely no difference in the font displayed.
I'm a complete beginner and I'm using the simplest possible beginner environment, just an html page linking to a css file which I'm opening with my browser (the url shows up as file:///C:/Users/Agent%201/Desktop/Web%20Projects/ResumeSite/index.html if that is at all relevant). I've tried opening it with both chrome and edge, same results on both
Is there something wrong with my css? Or are there limitations when just opening a local html file with my browser?
Sorry if I'm this is a really dumb question, but I really can't find an answer as to why my fonts aren't working, I've tried !important and some other weird solution I found which involves changing the selector to "header h1, header h1 *" and that did nothing.
Thank-you for any help you can provide me!
When using what are supposed to be web-safe fonts like Didot, and using...
Didot is not a "web-safe" font.
Didot is included with macOS, which may lead some web-designers to assume that it's also available on other platforms (like Windows, Linux and Android) or that those platforms have automatically-mapped equivalents (like how many browsers will map Helvetica to Arial), however that is not guaranteed.
Also, just because a typeface is included with an OS does not mean it is licensed to you to use commercially or in a website - you can be sued for publishing an OS-licensed font onto the public web without having your own font-license.
A "web-safe" font is a typeface that is broadly installed and supported by most contemporary browsers without the need for additional downloads or font installations.
Many typefaces are broadly installed, such as Microsoft's Core fonts for the web which are preinstalled on all Windows computers - and many other operating systems such as macOS either come with the same fonts or have very similar equivalents (e.g. Helvetica instead of Arial) which are automatically mapped by the browser.
The only way to determine if a font is "web-safe" is by doing your own leg-work and manually checking to see if all-or-most of your target users' devices have that typeface available. You can check font availability on Wikipedia and other sites:
macOS: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
Windows: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
iOS: http://iosfonts.com/
Android: Consult Android's fonts.xml for the minimum set of stock fonts and default fallback mappings (e.g. "Helvetica" goes to "sans-serif").
You might notice that Android's font list is very... short. That's because the base Android OS isn't what ships on most peoples' phones: Google's layer on top of Android, and OEMs (like Samsung, etc) will add their own fonts on top, but I don't know where to get that list from at-present, sorry.
A "web-safe font stack" means that at least one of the fonts listed in a font-family property value can be safely assumed to be available for use, not that all of them are - nor that the first-preferred-font will be available.
And any font-family list can be made "safe" by adding a CSS fallback generic-family name to the end (i.e. specifying the least-preferred font). Those names are specified in the CSS Fonts Module and are:
serif
sans-serif
cursive
fantasy
monospace
In your case, the property font: Didot, serif is "web-safe" because it has the serif generic-family name at the end. Your visitors will only see the Didot font being used if they already have it installed on their computer, phone, tablet, etc.
If you do want to use Didot, then you need to publish it as a WOFF file and add it to your stylesheet with a #font-face rule: https://css-tricks.com/snippets/css/using-font-face/
I want to use the Aller font on my website, which seems to work fine in Firefox. In Chrome however, the 's' and 'k' characters (and only those) have a bigger height than the other characters.
The font renders correctly in Firefox (on Linux and MacOS), in Chrome (on MacOS), but not in Chrome on Linux. Font is not installed locally on the Linux machine.
Css rule:
#font-face {
font-family: "Aller";
src: url("../fonts/aller/Aller_Lt.ttf");
font-weight: 400;
font-style: normal;
}
Chrome (on Linux) preview of the font (seems to be good):
Screenshot of text on my website with incorrect font rendering (taller 's') with Chrome:
Screenshot of same website on same machine with Firefox with correct font rendering:
How can I make sure that in Chrome the font is rendered correctly? Is this an issue with Chrome, my code or the font itself?
This is usually a problem with fonts that aren't hinted, or not hinted correctly. There are PS Private settings you can configure in the font (called BlueValues, or OtherBlues - more information on these here) that help keep all of the characters on the same line like this - if they aren't present, the rendering just chooses the closest pixel without regard for if it's above the others. The problem will be less noticeable in the larger font sizes, and will vary from browser to browser like you've witnessed.
It doesn't look like this font is hinted - looking at the specimen page, you can see a similar issue with the a and p of alphabet. I'd advise trying to use a hinted font, or adding the hints yourself, if you're interested in that (and the license allows it).
I include say "Noto Sans" or "Ubuntu" on my webpage via css "#import".
If I compare the rendering on my page with the rendering on the GoogleFonts page it looks different for both fonts.
Even though I paste the same text into GoogleFonts and choose the same size, same background, same color.
Here is a picture: (especially visible with the "A")
Any idea if there is a setting I miss?
As you can see neither the weight nor the size matches. Especially the weight seems to be a problem. Comparing "Noto Sans" the font with the same weight looks much thicker on my page.
I downloaded the fonts from google into my system. But this also applies if I delete these fonts and the browser uses remote fonts.
I use MacOSX but checking in Browserstack it seems that the problem is effective in several browsers. I tested in Win7 with IE9 too.
Not sure about the IE browsers, but have you tried adding -webkit-font-smoothing: antialiased;? Google also uses -ms-text-size-adjust: 100%; for IE.
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.
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.