Google fonts do not work on css

StackOverflow https://stackoverflow.com/questions/23440670

  •  14-07-2023
  •  | 
  •  

Question

I have the following html:

<div class="row">
            <div class="col-md-4 col-md-offset-1">
                <h2 class="uppercase claim claim-light slash headline-standard">Our Playbook</h2>
                <div class="paragraph">
                    Blah blah blah blah
                </div>
            </div>
             <div class="col-md-4 col-md-offset-1">
                <h2 class="uppercase claim claim-light slash headline-standard">The Special Sauce
                </h2>

                <p class="paragraph">
                    blah blah blah
                </p>
            </div>
        </div>

I am trying to use a google font on class paragraph so I have this css:

@import url(http://fonts.googleapis.com/css?family=Pacifico);

.paragraph{
    font-family: 'Pacifico', cursive;
    text-shadow:1px 1px 0 rgba(48,48,48,1);
    color:#FFFFFF;
    letter-spacing:1pt;
    word-spacing:2pt;
    font-size:1.3em;
    text-align:left;
    font-family:arial, helvetica, sans-serif;line-height:1;

}

Any other css attribute works perfectly but not the font-family, any idea why this is happening?

I tried even to include it like:

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
Was it helpful?

Solution

remove font-family:arial, helvetica, sans-serif; It's over riding the first font-family you specified.

OTHER TIPS

Try this CODEPEN

@import url(http://fonts.googleapis.com/css?family=Pacifico);

.paragraph{
    text-shadow:1px 1px 0 rgba(48,48,48,1);
    color:#FFFFFF;
    letter-spacing:1pt;
    word-spacing:2pt;
    font-size:1.3em;
    text-align:left;
    line-height:1;
    font-family: 'Pacifico', cursive;
}

Into your CSS class .paragraph, the font-family define two times.

The CSS rule that applies to a particular element or class is the the last rule defined in your CSS.

So, font-family:arial, helvetica, sans-serif; It's over riding the font-family: 'Pacifico', cursive;

Try - 

@import url(http://fonts.googleapis.com/css?family=Pacifico);

.paragraph{
    font-family: 'Pacifico', cursive;
    text-shadow:1px 1px 0 rgba(48,48,48,1);
    color:#FFFFFF;
    letter-spacing:1pt;
    word-spacing:2pt;
    font-size:1.3em;
    text-align:left;
}

Working Example

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top