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
  • 185 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

Three quick, likely causes: a CSS syntax error in the stylesheet, the custom font not actually being loaded as a webfont, or a more specific/inline rule from the theme or a plugin overriding the H3 font. The CSS shown earlier contains a malformed selector (a selector list that ends with an empty entry before the opening brace) which will make that rule invalid — removing the trailing comma fixes that parse error and is the first thing to correct.

How to confirm what’s happening (use browser DevTools): Inspect an H3 on the front end, open the Styles / Computed panel and look for the font-family entry and which stylesheet/line supplies it. The Network panel will show whether any webfont files (woff/woff2) or a Google Fonts request were actually fetched; Chrome’s “Rendered Fonts” entry will show the face the browser used. If the computed font comes from an inline style, a later stylesheet, or a rule with higher specificity, it will explain why earlier H3 rules (even those with !important) appear ineffective.

Practical fixes and best practice: remove the CSS syntax error, verify the chosen typeface is loaded as a webfont (Good options: enqueue Google Fonts or host with @font-face; system fonts won’t work for most visitors). Place the H3 rule in a child-theme stylesheet or in Appearance → Customize → Additional CSS so it loads after the theme. If a theme/plugin is applying a more specific selector, either target the same specificity (target the container + h3) or enqueue the CSS later. Clear any caching (plugin and browser) after changes.

Notes tied to previous replies: is correct that “Great Vibes” isn’t a system font and needs to be delivered as a webfont; ’s single vs double quotes won’t affect whether the font loads. Also check the front-end HTML produced by the editor — some builders inject spans or inline styles around headings, so the actual H3 element on the page may not be what the editor shows.

Recommended Answers

All 3 Replies

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.