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
Related
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.
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
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 working on a website. Viewing the site in IPad is always showing font Times New Roman with i guess font-size 6 or 7. Though i have never mentioned this font in my css. Rest all labels are coming up fine in 'Segoe UI' font as expected. The site is working fine in Desktop browsers, even i safari on my desktop. But for IPad, its showing Times New Roman.
I have tried this link's plugin and seen the output in an alert, its showing fontFamily as 'Segoe UI' only but the font is not that.
Also tried this but not working.
Also tried putting up inline style with !important attribute in css, but same.
Can somebody help me on what am i doing wrong or what i might add/remove to correct the behavior?
EDIT:
Code i tried separately here is also not behaving expected on my IPad atleast, its not showing Segoe UI as font for sure. But in my desktop browser its showing Segoe UI.
<input type="text" value="imjgnsdnbf" style="font-family:Segoe UI; font-size:20px;" />
Could this be my IPad specific setting?
Segoe UI is a windows font, and ipad is apple product!
So you have to include the font with something like font-face
*Edit
To select a input field in css
input[type=text]