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.
Related
I am using a custom font that I implemented into my website using the #font-face css selector and provided the different formats of the fonts for the different browsers, up to this point firefox, chrome IE11 and opera render the font approximatly the same.
but when it comes to giving a font-weight: 900; Only Chrome succedes in rendering a bold enough font,
firefox and IE rendering is close to what chrome renders at 500 or 600
is there a work around to acheive the same result in the other browsers without having to implement a bolded version of the font in all different formats ???
firefox rendering
chrome rendering
The best way to keep font weights consistent is making sure that font comes with a bold weight font file. If your font files don't come with your desired weight then the Browser & OS will try to manually style the font which results in, as you've seen, different rendering.
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 have a website, in which the fonts are appearing good in safari, but broken in Chrome and Firefox. I couldn't find which rule is overriding my font settings. Please help.
This page is live at http://alterknitnewyork.com/drop-off/
In safari, it is taking the settings from uaf.css but in chrome and firefox they are scored-out. I have no idea why it is broken. Even I tried to apply the font inline with !important tag, but no success.
It looks like you have two #font-face declarations for the "same" font. One is in MyFontsWebfontsKit.css which references a font as "Elizabeth-Italic". The other declaration, in uaf.css is referencing a font as "Elizabeth Italic". These are two distinctly different fonts.
Assuming you want the italicized font, just set the font-family to "Elizabeth-Italic" and you should be good to go.
I'd recommend removing any of the CSS files you don't need (particularly #font-face declarations), it will lessen the number of HTTP requests and make the site a bit snappier overall.
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.
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.