Support » Themes and Templates » Unable to change font via css

  • Resolved Franksplace2


    I created a child theme and a style.css file. I inserted this:

    font color=”#0000FF” size=”3″ font-family=”Comic Sans MS”

    Some text turned blue. Theme text did not change. Neither texts turned to Comic sans.

    How do I get all the text to change to the requested font?

    Thanks for your help.


Viewing 15 replies - 1 through 15 (of 16 total)
  • Michael


    Forum Moderator

    That’s not proper CSS. If you would like to change everything about your page you can try

    .body {
    font-family: 'Comic Sans MS';
    color: #0000FF;
    font-size: 3;

    It’s probably worth reading up on CSS ( or CSS at

    Also, I feel like it’s my duty as a designer to point out, if you’re going to use Comic Sans, you better have a good reason. (


    The theme is twentyeleven.


    I have heard that comic sands has a bed reputation. I am building a wordpress site for a Catholic school for special needs children. I chose comic sans because I wanted something whimsical. CS was used on their current site which I built without knowing css.

    I have been trying to learn css but as you both point out, not very succesfully.

    I will take your advice and read the css codex.

    Thank you both,


    I replaced the original css font line as suggested by jhoffm34. It did not make any difference. I spent some time researching fonts and comic sans.
    I found a plugin that promises to convert the entire site to comic sans. That worked. However I would like the capability to use another font.
    There is still a font problem because the home page text is black and the other pages are blue. Also the theme text (Home, About) are black and too large.

    Why doesn’t my CSS control fonts?



    I am trying to change the color and size of the page names (Home, About, etc) as well as the color of the text on the Home page. I am using twentyeleven and twentyeleven-child.

    twentyeleven css has this:

    ‘html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;’

    twenty-eleven=child has this

    .body {
    font-family: ‘Comic Sans MS’;
    color: #0000FF;
    font-size: 3;

    How do I change the font for page names and home page text?


    Try dropping the period from “.body” As of now, you have <body> as a class, where as it’s actually an element, so the period is not needed.


    That worked on the home page text!
    The titles problem remains. There must be something I should do to replace the twentyeleven font size and color with my choices.

    Thank you


    Yes, you need to use Firebug to look at the CSS for that element — and you’ll see that it is:


    But to override any other styles, you may need to increase the selectors so try this in the child stylesheet:

    .entry-header h1.entry-title {
       styles here;

    You also need to use a unit of measurement with the font size (px, percentage, em, or rem are the basic options)


    I did exactly what you have both with and without the . in front.

    I guessed info might be needed before and after the brackets so I tried adding this ‘font-family: ‘Comic Sans MS’;
    color: #0000FF;
    font-size: 3;’ inside the brackets. I tried both before and after the “styles here;’
    Nothing changes.

    The “styles here” was intended for illustration purposes on the post here. It should not be in your actual code. And you MUST have the period before “entry-header” — it’s a class and that’s the syntax for classes. Also, as noted already, you MUST have a unit of measurement for the font-size — or it does nothing.
    So this is what you need to use:

    .entry-header h1.entry-title {
        color: #0000FF;
        font-family: 'Comic Sans MS';
        font-size: 14px;

    Change the 14px to whatever size you want.

    This is a good basic reference site on CSS:


    Thanks That worked.

    BEGIN Rant
    I have spent multiple hours trying to understand CSS but the reality of changing themes is very different than what I read.

    Comic sans is now out of favor so I have a work around to install it.
    The books show h1, not .entry-header h1.entry-title
    The books show some kind of div which I don’t see here.
    When I used Dreameaver, I could see the css and change it directly.
    And the page title text is still black. It must be another secret h1.
    END Rant
    Clearly I under-estimated the effort to modify themes to match my plans.

    Thank you for helping .


    I am trying to control the css for twentyeleven headings and paragraphs.

    WPyogi was kind enough to use Firebug to determine that the CSS element for the subheading (Home) was h1.entry-title
    Now I am asking if someone can determine the css elements for the page header (St. Michael’s Place) and tag line (yet another WP site)

    Then I can change them to do what I want. Maybe.



    Moderator Andrew Nevins


    Forum moderator

    For CSS-specific issues, consider CSS-specific forums.

    Frank – you can easily download and use Firebug yourself :). There’s excellent documentation as to how to use it and it will be well worth the time to learn it well. Really makes CSS into a totally different thing :)!

    What you need to use for these is:

    #site-title a



Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Unable to change font via css’ is closed to new replies.