[Solved] Using @font-face Not working

[codeaholic]

I’m following the article on this website: https://css-tricks.com/snippets/css/using-font-face/

I’m trying to use the @import of a Google font and basically I’ve choosen a weird font to make sure its working. Conclusion: I’m not doing something right. I started with a separate css file and the basic sans serif font and have moved to direct in style and a weird font for troubleshooting purposes and no matter what I do it’s not working.

Take a look at

http://codepen.io/codeaholic/pen/vOGObG

Note the style
<style>
@import url(//fonts.googleapis.com/css?family=Lobster+Two);
</style>
and the Body tag

[Paulie_D]

Dude…did you link the wrong Codepen or something?

There’s no style tag or import that I can see.

http://codepen.io/Paulie-D/pen/bdpwOd

[codeaholic]

Yeh, I forgot to save it and I guessed the auto save would have grabbed it. I see your codepen working but the problem seems to be using this “inconjunction” with the Jquery Mobile and loading it in for the body tag.

Trying again:

http://codepen.io/codeaholic/pen/vOGObG

[Paulie_D]

You’d have to out that declaration in your head

…
<style>
@import url(//fonts.googleapis.com/css?family=Lobster+Two);
body {
font-family: ‘Lobster Two’, sans-serif;
font-size: 32px;
}
</style>
“`
Not the best option..I’ll grant.

http://codepen.io/Paulie-D/pen/doMWzB

[codeaholic]

Ok thanks. It looks like if I body * {} it works.

http://codepen.io/codeaholic/pen/vOGObG

[Author]

Posts