Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Override a theme font family with CSS

  1. hscmartins
    Member

    Hi to all,

    I'm kind of new to CSS and HTML. I just started creating a site based on the Fresh&Clean theme but I can't change a default theme font family with the Custom CSS.

    For instance, for the Nav Bar I tryed (but it didn't work):

    #access { font-family:raleway!important; }

    The same for a page. I tried to change a page font with:

    <p style="font-family:bree!important"> (...) </p>

    It I define other standard fonts for the family, such as Georgia, or Verdana, or something, it actually uses them but never a "custom font". Almost like it doesn't recognize them. Don't know if this because of the theme or if i'm doing something wrong.

    Thanks in advance for any help!

    The blog I need help with is mundare.org.

  2. castelinokelvin
    Member

    Too add a custom font to your site, this link will help you how to exactly do that
    http://wpmu.org/adding-custom-fonts-to-wordpress-with-font-face-and-css/

  3. designsimply
    Happiness Engineer

    Just to note, the link castelinokelvin provided is for self-hosted WordPress.org blogs and anyone with a WordPress.com blog should use Appearance → Custom Design → Fonts to add custom fonts.

    @hscmartins, what is happening is that you're trying to set fonts which are not on your computer and also have not been loaded using the WordPress.com Appearance → Custom Design → Fonts page.

    To learn more about font stacks (i.e. using the ones installed on visitors' computers), check this out: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

    To learn more about WordPress.com Custom Fonts, see http://en.support.wordpress.com/custom-design/custom-fonts/

    If you still have questions about fonts after that, reply back here and mark the topic as "not resolved."

  4. designsimply
    Happiness Engineer

    Aside: the code you mentioned in your original question is on the right track. In order for it to work, you would first need to load the Raleway font onto the site, which on WordPress.com is accomplished through Appearance → Custom Design → Fonts. Also note that when the font is loaded, it uses the name "raleway-1" in the case of WordPress.com.

  5. hscmartins
    Member

    @castelinokelvin @designsimply Thank you for the replies! ;) I'll look into it and keep the post updated if justified

  6. wifcan
    Member

    I have the same problem and I understand the explanation given by @designsimply (thank you!). But I still have some concern:

    I have the Custom desing option and thus I know that I can change the fonts in the font page, however, my question is (very basic, probably, please excuse my ignorance):

    Let's say I select the Museo Sans font for my blog, will it be correctly viewed in all browsers and OS?

    Just in the case the answer to this question is "no", I would like to add some "alternative" fonts to be used in the case the Museo Sans is not supported . Something like:

    font-family: Museo Sans, Arial, Helvetica, sans-serif;

    But this does not work. I understand from the answer of designsimply that this is not really necesary, because WordPress.com takes care of that. But I would like to be sure :-)
    Thanks a lot
    Javier

  7. designsimply
    Happiness Engineer

    Let's say I select the Museo Sans font for my blog, will it be correctly viewed in all browsers and OS?

    The Custom Fonts part of the Custom Design upgrade currently uses Typekit to serve fonts, and here are the browsers that are supported:
    http://help.typekit.com/customer/portal/articles/6786

    Custom Fonts already sets fallback fonts. For example, the font stack for Museo Sans is this:

    museo-sans-1,museo-sans-2,Gudea,Helvetica,"Helvetica Neue",Arial,Verdana,Tahoma,sans-serif

    Just in the case the answer to this question is "no", I would like to add some "alternative" fonts to be used in the case the Museo Sans is not supported . Something like:

    font-family: Museo Sans, Arial, Helvetica, sans-serif;

    You can override that and set something else manually, but note that if you do that, then you will need to remember to adjust the CSS on the Appearance → Custom Design → CSS page any time you make an adjust ment on the Appearance → Custom Design → Fonts page or it's likely the fonts won't work the way you expect.

    body {
    font-family: museo-sans-1,museo-sans-2,Gudea,Helvetica,"Helvetica Neue",Arial,Verdana,Tahoma,sans-serif !important;
}

    You would keep the "museo-sans-1,museo-sans-2" part of that and add a different list of fonts afterward if you'd like to manually adjust them.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags