WordPress.org

Ready to get started?Download WordPress

Forums

Bouquet
[resolved] Changing font for Header and H1, H2 only (4 posts)

  1. tspnyc
    Member
    Posted 4 months ago #

    Bouquet does not offer any customization for fonts via the dashboard.

    But Bouquet does appear to have a custom css page.

    In another general forum thread, someone suggested posting the following to change fonts

    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 {
    font-family: arial;
    }

    But, I only want to change the font in the header (both the "title" and the "site description.")

    And then, I want to use that same font change in the body but only for styles H1 and H2.

    What would be the syntax to type in code to accomplish these specific font changes?

    Thanks!

    site is http://onemanz.com/

  2. designsimply
    Member
    Posted 4 months ago #

    Bouquet does appear to have a custom css page.

    Bouquet does not have a custom CSS editor built in, however, you may have a feature like that added by a separate plugin such as Jetpack.

    But, I only want to change the font in the header (both the "title" and the "site description.")

    And then, I want to use that same font change in the body but only for styles H1 and H2.

    You can adjust the font stack for the site title, site description (tagline), and post titles by adding the following to your custom CSS editor:

    #site-title,
    #site-description,
    .entry-title,
    .entry-title a,
    .entry-content h1,
    .entry-content h2,
    .entry-content h3,
    .entry-content h4,
    .entry-content h5,
    .entry-content h6 {
    	font-family: Futura, “Century Gothic”, AppleGothic, sans-serif;
    }

    You can change the list of fonts in the example, but make sure you understand how font stacks work when you pick which font names to include. A font stack is a list of font the visitor's computer will check in order until it finds one the computer has installed and then it displays that one. You can learn more about how font stacks work at http://web.archive.org/web/20131010010610/http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

    You can also mix and match the selectors such as ".entry-content h2" The ".entry-content h*" selectors refer to headings in the body of a post whereas the .entry-title and .entry-title a selectors refer to the post titles themselves.

    What would be the syntax to type in code to accomplish these specific font changes?

    Generally, we provide theme support to cover cases where people need help learning a feature or getting setup. We also help people get started learning CSS and we also try to help point you to the best resources so you can learn more on your own. Here are a couple great tutorials you can check out if you're just getting started with CSS:
    http://www.htmldog.com/guides/cssbeginner/
    http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  3. tspnyc
    Member
    Posted 4 months ago #

    Thank you!

    That is quite helpful, even if it is pretty much over my head.

    But the article explaining the stack of font-family: Ideal, Alternative, Common, Generic; does make sense.

    On another site I am developing with a paid theme there are a huge list of fonts, most of them Google web fonts.

    Given the current climate of the web, does anyone have an opinion on whether the "Google web fonts" stand a greater or lesser chance of being rendered on the average PC and or Mac user's computers and tablets?

  4. designsimply
    Member
    Posted 4 months ago #

    On another site I am developing with a paid theme there are a huge list of fonts, most of them Google web fonts.

    It's possible something like that could be setup in a plugin too.

    I know WordPress.com also has fonts built in to their Custom Design upgrade.

    Given the current climate of the web, does anyone have an opinion on whether the "Google web fonts" stand a greater or lesser chance of being rendered on the average PC and or Mac user's computers and tablets?

    I think they Google web fonts are all right for Mac, PC, and tablet right now. I've used Google fonts on a few sites myself.

Reply

You must log in to post.

About this Theme

About this Topic