0

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.

evangelion3258
  • 77
  • 1
  • 2
  • 7

1 Answers1

0

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Jukka the font weight is already included in the google HTML. You can see the google font page for Lato here: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family: San-serif just refers to the fact that Lato is not a serif font. It is written in my CSS the way google suggests. The problem is not with the browser it is with mac. I have already tried your suggestion and it did not work. – evangelion3258 Feb 12 '13 at 23:28
  • The link I posted doesn't work. If you look up the font Lato on google fonts you can see the code as they suggest it to be written. You select the radio button for the font weight you want and the google code alters accordingly. – evangelion3258 Feb 12 '13 at 23:35
  • The appearance of `font-weight: 100` in the Google-generated `@font-face` rule is exactly the reason why your CSS rule should use the same declaration. The Google instructions are sloppy in this respect. Fixing this might not fix the problem, but it’s still the right thing to do and should be done before debugging. And `san-serif` *is* a reference to a nonexistent font, and items in the `font-family` list specify alternate fonts; they do not describe each other. – Jukka K. Korpela Feb 13 '13 at 00:04