CODEWITHSUNDEEP
cssgoogle-chromefirefoxsafari
Sibidharan
Sibidharan

Reputation: 2756

Fonts broken in Chrome and Firefox but works good in Safari

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.

enter image description here 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.

Upvotes: 0

Views: 158

Answers (1)

pinjasaur
pinjasaur

Reputation: 418

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.

Upvotes: 1

Related Questions