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.
Related
I've noticed navigating through web pages that some of them always render with this font.
And it gets worst when it renders headlines or other texts.
Inspecting the elements, it says that the font is Open Sans, but is not.
And when I delete the font in css it renders by default.
In my browser the default sans serif font is configured to be Open Sans. Which makes it weird because that's how it's suppose to appear, but instead shows a completely different font.
What's going on? Is there a solution?
Computed Tab screenshot:
Maybe it's related to this?
Errors in Inspector
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 am using an embedded google font in my HTML for the header of my website. It works fine in all browsers on most computers, but does not work on some macs. I read a solution for this that suggested adding the declaration !important to the line in my CSS where I call the font, but that didn't work. I have two macs at home, mine and my boyfriends. The font works fine on his in all browsers, but on mine it only works in firefox. We are both running mountain lion. Any suggestions??
Here is a link to the site: http://nataliearriolaphotography.com
I tried doing this by the #import method in my CSS as well and it still didn't work.
The page uses the weight 100 typeface of the Lato font family, but the text declared to be in the font has a different font weight: the default weight normal, i.e. 100. The secondary font specified on the page is san-serif, which is a nonexistent font (sans-serif would denote the browser’s default sans serif font). Different browsers may handle this differently depending on the circumstances.
So you should add
font-weight: 100;
to the CSS rule for the element.
I am trying to use the CSS font face property. I've made it chance the font to the right one, however it looks very edgy on the Windows platform. Especially Chrome looks awful.
When using OSX all browsers are just perfect.
How can I avoid these awful looking fonts?
On OSX Chrome:
On Windows Chrome:
The Segoe font is already installed on most Windows PC's. This can cause problems when you are also trying to link it with CSS. Try renaming the font in your CSS so that it has a different name than the built-in Windows font.
Also, Chrome just doesn't render TTF/WOFF fonts very well. You can get around that by prioritizing the SVG font (by putting it higher up in the font list). This will make Chrome select the SVG font (but most other browsers will still use the WOFF font). See here for more information.