CODEWITHSUNDEEP
javascriptjqueryhtmlcssfonts
Luke
Luke

Reputation: 2168

Setting the font of an element, with jQuery .css() to a Google Fonts font

I am setting the style of an div, with jQuery, to a font loaded from Google Fonts, but the div won't be displayed with that font.

Here is where I load the font, in the HTML code:

<link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>

In my JavaScript code, I change this style of the div like this:

$("#id").css({"font-family": "Slabo 27px, serif", "font-size": "35"});

Have a look in this example.

I would appreciate help with how to fix this - thanks :).

Upvotes: 1

Views: 756

Answers (2)

Ro Lewis
Ro Lewis

Reputation: 76

CSS property "font-family" needs to wrapped in single quotes because it contains a space.

$("#header2").css({"font-family": "'Slabo 27px, serif'");

Upvotes: 0

Cedric Ipkiss
Cedric Ipkiss

Reputation: 6337

This line is what is causing your error:

$("#header2").css({"font-family": "Slabo 27px, serif", "font-size": "35"});

Change it to:

$("#header2").css({"font-family": "'Slabo 27px', serif", "font-size": "35"});

Font names with two or more words should be quoted.

Upvotes: 3

Related Questions