Question

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?

Answer 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