Can't Get Google Fonts To Working

[Florissa]

I am new to adding Google fonts to WordPress.  I read Brian's blog and thought I added the code in correctly, however, the fonts are not appearing.  I am testing it out on a dummy site before attempting on my real site.

URL: http://twp.techiepros.com/a-q-a-with-lynn/

 

I added the following code to the stylesheet: at the top:

/* Import Google Fonts
------------------------------------------------------------ */

@import url(http://fonts.googleapis.com/css?family=Sail|Sevillana|Iceland);

 

Wherever I see font family, I replaced it with this:

font-family: 'Sail', cursive; 'Sevillana', cursive; 'Iceland', cursive;

 

However, I don't see the fonts.  Could someone please explain to me what I have done wrong?

 

Thanks so much!

[Ozzy]

for the font-family in your style.css, try doing this instead:

font-family: 'Sail', 'Sevillana', 'Iceland', cursive;

---

Ozzy Rodriguez | Twitter | Google+

[Florissa]

Thanks Ozzy.  That didn't seem to change anything.

[Ozzy]

your import was fine, i was saying change the font-family in the ids and classes you wanted to.

this is good:

/* Import Google Fonts
———————————————————— */

@import url(http://fonts.googleapis.com/css?family=Sail|Sevillana|Iceland);

change the ids and classes font families to:

font-family: 'Sail', 'Sevillana', 'Iceland', cursive; //use single quotes, not accents, as well

right now, there are only 3 classes affected by those fonts. what classes were you trying to change?

---

Ozzy Rodriguez | Twitter | Google+

[Florissa]

I was trying to change the menu items in the Navigation bar, the post and page headings as well as the widget sidebar titles.  Those were the only 3 places I could find that mentioned font-families.  I guess there is somewhere else I need to change this?

 

Thanks so much for your help!

[Ozzy]

so the first thing you need to do is fix the importing of the fonts in the style.css:

@import url(http://fonts.googleapis.com/css?family=Sail|Sevillana|Iceland);

find the following in your style.css:
.menu-primary a,
.menu-secondary a,
#header .menu a

and add the font-family: 'Sail', 'Sevillana', 'Iceland', cursive; property.

find #page-title in style.css and put the font-family: 'Sail', 'Sevillana', 'Iceland', cursive; property in.

find .taxonomy-description h1,
.widget-area h4

and add the font-family: 'Sail', 'Sevillana', 'Iceland', cursive; property.

if you need any more help, let us know!

---

Ozzy Rodriguez | Twitter | Google+

[Florissa]

This worked perfectly.  Thank you so much for your help!  I really appreciate it!

[Author]

Posts