WordPress.org

Ready to get started?Download WordPress

Forums

Changing Fonts (2 posts)

  1. jbsinkyfingers
    Member
    Posted 6 months ago #

    I am adding a blog to my membership site and would like to change the font on the post titles and widget titles and center them.

    http://inkyfingersclub.com/happy-new-year/

  2. SideKick Dan
    Member
    Posted 6 months ago #

    Hello,

    I had the chance to look over your question and there are a couple different ways you might do so. There might be a plugin somewhere that could help, but here is some css that will allow you to do what you were hoping. First for the post titles.

    into your custom css file or stylesheet insert this css. You can change the font to whatever you like. Without any header link or plugin to enable google fonts for example, you can only use the web safe fonts that all browsers are capable of rendering such as arial, georgia, tahoma, times new roman, etc.

    #blog_post .entry-title {
    font-family: georgia !important;
    text-align: center !important;
    }

    However, if you want to manually add support for any of the Google fonts you see in their directory, do the following. Browse their directory at http://www.google.com/fonts. Once you picked a font, click on the quick use button. Find the link to the google repo for the font. Add it to your active theme's header file between the <head></head> tags. Then in the css to change the post title, go ahead and use the font name the same page in google fonts tells you to use to use the font. See this for example if you liked their Sigmar One font.

    In the Header file...

    <link href='http://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>

    In your css ...

    #blog_post .entry-title {
    font-family: 'Sigmar One', cursive, arial !important;
    text-align: center !important;
    }

    You might note that in the above example, i added arial after the Sigmar One, cursive. Some mobile browsers don't like the google fonts and so it's a good idea to give a fallback font to one you could live with if for example safari browser on ipad doesn't want to display the font you chose from google.

    Have fun playing with the different font choices out there. Oh and here is the css to do the same for your widget titles; at least the ones that i see on the page you referenced.

    .widgettitle {
    text-align: center !important;
    font-family: georgia !important;

    Also, i just noticed that when i used a google font in your site, it actually worked right out of the box. This means you likely already have ability to use all google fonts! If so, just use whatever font name you like from google fonts and see if it works.

    Sorry for the long post :) Just trying to be thorough.

    Best Regards,
    Danny :)

Reply

You must log in to post.

About this Topic