Member Avatar for kimmi_baby

Hi,

I have a wordpress website where I want to change the font for H3 and H4. I can't seem to change the H3 font. I've noticed that if I change the styling to H3 in the wordpress admin page editor, it will not change, colour changes but not the font. If I hard code some text in H3 it changes to the font I want. Does anyone know what could be causing this?

This is all the CSS I have for H3:

h3 {
color: #f0c9c2;
font-family: 'Great Vibes', cursive !important;
font-size:25pt;

}


#content h3,
 {
    color: #f0c9c2;
    font-family: 'Great Vibes', cursive !important;

}

h3#comments-title {margin:30px 0;padding-left:35px;background:url('images/comment.png') no-repeat left center}

h3#comments-title span {font-size:.8em;}
  • 3 Contributors
  • 3 Replies
  • 166 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by <M/>
Member Avatar for <M/>

This may not work, I am sorry if it doesn't but if does not work i will come up with another solution, but have you tried using double quotes rather than single quotes? I am not sure if that will work for you. You should also add the font family to h3#comments-title and h3#comments-title span?

I am sorry if my solution doesn't work, but once i get home i will switch gears and try hard coding this for you if you can't figure this out.

Member Avatar for pixelsoul

font-family: 'Great Vibes', cursive !important;

That is not a standard web font. Only someone that has it installed on their computer will be able to render the font, unless you use @font-face, which won't always work either because some older browser don't support it. You can use something like cufon which renders the fonts with the font files and then displays them as a Flash overlay (not my favorite). If you are cool with some of the older browser not rendering them with @font-face (I am totaly fine with it), then I might recommend checking out http://www.fontsquirrel.com/

Here is the font on Font Squirrel that you are using http://www.fontsquirrel.com/fonts/great-vibes
You can select Webfont Kit and download the package with all the files you would need to make it work.

commented: You beat me to a better solution :) +7
Member Avatar for <M/>

Expanding on pixelsoul's much better solution (compared to mine),

here is a link that will show you how to use font face:
http://css-tricks.com/snippets/css/using-font-face/

Honestly, it isn't the best solution to use custom fonts because a lot of browsers will just see it as their default web font, so they won't appreciate the design as much...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.