Unable to change font via css

  • Resolved Franksplace2

    (@franksplace2)


    11 years, 5 months ago

    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.

    Frank

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

    (@alchymyth)

    11 years, 5 months ago

    http://www.w3schools.com/css/css_font.asp

    what theme?

    Jay Hoffmann

    (@jhoffm34)

    11 years, 5 months ago

    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 (http://codex.wordpress.org/CSS) or CSS at http://css-tricks.com/

    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. (http://comicsanscriminal.com/)

    Thread Starter Franksplace2

    (@franksplace2)

    11 years, 5 months ago

    alchymyth,

    The theme is twentyeleven.

    jhoffm34

    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,

    Frank

    Thread Starter Franksplace2

    (@franksplace2)

    11 years, 5 months ago

    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?

    Thanks

    Frank

    Thread Starter Franksplace2

    (@franksplace2)

    11 years, 5 months ago

    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?
    http://www.franksplace2.com/wordpress/

    Thanks

    thoughtwell

    (@thoughtwell)

    11 years, 5 months ago

    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.

    Thread Starter Franksplace2

    (@franksplace2)

    11 years, 5 months ago

    thought,

    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

    Frank

    WPyogi

    (@wpyogi)

    11 years, 5 months ago

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

    h1.entry-title

    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)

    Thread Starter Franksplace2

    (@franksplace2)

    11 years, 5 months ago

    WP,

    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.

    WPyogi

    (@wpyogi)

    11 years, 5 months ago

    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.

    WPyogi

    (@wpyogi)

    11 years, 5 months ago

    This is a good basic reference site on CSS:

    http://www.w3schools.com/css/css_intro.asp

    Thread Starter Franksplace2

    (@franksplace2)

    11 years, 5 months ago

    WP,

    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.

    Examples
    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 .

    Frank

    Thread Starter Franksplace2

    (@franksplace2)

    11 years, 5 months ago

    http://www.franksplace2.com/wordpress/

    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.

    Thanks

    Frank

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months ago

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

    WPyogi

    (@wpyogi)

    11 years, 5 months ago

    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

    and

    #site-description

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