Open Sans Condensed Light not working in Firefox

问题

I have downloaded the Open Sans Condensed Light font from Google Web Fonts, and also attached their CSS code:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=greek-ext&v2'
      rel='stylesheet' type='text/css'>

But every browser other than Firefox, shows exact font family i.e. it looks fine in IE, Chrome, Safari, but not in Firefox.

Here is my CSS and the HTML code:

h2.title-border {
    border-bottom: 1px solid #000;
    margin-top: 10px;
    line-height: 45px;
    margin-bottom: 15px;
}

.heading-sub {
    background: #000;
    font-family: "Open Sans Condensed Light";
    font-weight: normal;
    text-transform: none;
    font-size: 32px;
    padding: 0 15px;
    margin-bottom: 0px;
    color: #fff;
    border-bottom: 1px solid #000;
}

HTML:

<h2 class="title-border"><span class="heading-sub">About Us</span></h2>

Can you please suggest, how should I fix Firefox regarding this?

回答1:

According to the API, you should be calling the font like this

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:light&v1' rel='stylesheet' type='text/css'>

The light variant needs to be called specifically, i.e. :light.

The other browsers are probably ignoring the Light in your stylesheet and giving you the Open Sans Condensed you asked for in the API call.

See here

回答2:

Condensed is the "style" of the "Open Sans" font, not part of the name. This worked for me.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:Condensed" />


.selector
{
    font-family:'Open Sans';
    font-style:condensed;
}

回答3:

To make the font work for IE8-IE9 you have to use a EOT font file, On this page you can download the font as a webkit: http://www.fontsquirrel.com/fonts/open-sans-condensed

回答4:

I must have tried a gazillion variations to get this work. I am trying to get Open Sans Condensed embedded into a pdf via WKHtmlToPdf.

I think it is important that you download and install the Open Sans Condensed ttf directly from google and install it. It is also important to reboot to allow other services access after install. I downloaded the ttf from font-squirrel originally and condensed was listed as "Open Sans" in windows/fonts, which is wrong, if you look after the google install it is listed as "Open Sans Condensed Light" so even google's local('Open Sans Cond Light') script is wrong.

As mentioned before you need to be explicit with the stretch and weights, so this is what has worked for me:

    @font-face { 
     font-family: 'Open Sans'; 
     font-style: normal; 
     font-weight: 400; 
     src: local('Open Sans');
    }

    @font-face { 
     font-family: 'Open Sans Condensed'; 
     font-stretch:condensed; 
     font-style: normal; 
     font-weight: 300; 
     src: local('Open Sans Condensed Light');
    }

@@font-face { font-family: 'Open Sans Condensed Bold'; font-stretch:condensed; font-style: normal; font-weight: 700; src: local('Open Sans Condensed'), local('Open Sans Condensed Bold');}

回答5:

You have to refer to Google CSS. See their QuickStart Guide.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed">

回答6:

You probably ought to use font-stretch: condensed (see Mozilla docs).

For example, change your .heading-sub CSS as follows:

.heading-sub {
    background:#000;
    font-family:"Open Sans";
    font-stretch: condensed;
    font-weight:300;
    text-transform:none;
    font-size:32px;
    padding:0 15px;
    margin-bottom:0px;
    color:#fff;
    border-bottom:1px solid #000;
}

回答7:

Make use of Google Fonts Open Sans in the various styles:

Click on this link -> https://www.google.com/fonts/specimen/Open+Sans and then click on Open Open Sans in Google Fonts.

Under option 3 and 4 you will find the html link to use in your header as well as the CSS style usage.

回答8:

for Firefox: My problem solved after I added to CSS this line:

font-stretch: condensed;

You should use Google generated code, mine was: http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'>

as I am using 700 and 300 weights.

CSS: font-family: 'Open Sans Condensed', sans-serif; font-weight:700; font-stretch: condensed;

回答9:

it appears that all the browsers are somehow using different definitions for at least this font. i had it installed on my site and been trying to figure how to make it look descent in all browsers, not just chrome and opera - as all others, that is firefox, ie and safari had those fonts screwed. until accidentally i made firefox see the font ok, but then chrome and opera got screwed. so that was when i realized that actually assigning the same font in two different ways solves the problem: if the browser's ok with the first definition, it won't look at the next one, otherwise it'll go for the second one. ah, the code itself:

font-family: open sans condensed light, open sans condensed;

i used it for assigning fonts to different divs. cheers, hope this helps - at least for me it was a major pain in the behind.

回答10:

It doesn't works for me because the @import should be the first line in style.

Works:

<style>
    @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

    .myStyle {
    }
</style>

 Doesn't works:

<style>
    .myStyle {
    }

    @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
</style>

来源：https://stackoverflow.com/questions/6532458/open-sans-condensed-light-not-working-in-firefox