WordPress.org

Ready to get started?Download WordPress

Forums

[closed] Changing font family in default Twenty Twelve theme (16 posts)

  1. listerdl
    Member
    Posted 1 year ago #

    Hi does anyone know how to (and if I can) change the font family in Twenty Twelve? I have tried to research this but all the tutorials didn't really work.

    Do I have to pay for the upgrade in CSS?

    I want to use a Google Typefont called Ubuntu as the theme for the font.

    Thanks

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Sounds like your site is on WordPress.COM?? There are no paid upgrades for self-hosted WP sites -- which is what these forums are for.

  3. listerdl
    Member
    Posted 1 year ago #

    i am on self hosted - ok so nothing can be done? Thanks for your reply

  4. fonglh
    Member
    Posted 1 year ago #

    If you are on self hosted, create a child theme and modify the stylesheet.

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    See this re: creating a child theme:

    http://codex.wordpress.org/Child_Themes

    Doing so will avoid losing all your changes when WP is updated.

  6. listerdl
    Member
    Posted 1 year ago #

    Hey that's pretty cool -

    I feel pretty competent with CSS - before I dive into this (later on today) can you guys chime in and tell me the level of difficulty?

    All I really want to do is blend the font into my own site - i use Google fonts - that should be pretty easy right? Thanks

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, once you create a child theme, you'd just need to add the CSS code for the new font to the new style.css file -- the only thing that sometimes trips people up is that the new code has to be at least as specific as the existing code so that the old code does not override the new code because of the selectors. But if you know CSS, you'll likely be home free!

    And yes, Child Themes are pretty cool...and really not hard to set up. Just follow the instructions carefully and you should be fine. If you run into anything, just post back.

  8. listerdl
    Member
    Posted 1 year ago #

    so its possible just to simply copy and paste the existing parent CSS and then modify JUST the font and I am home free?

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, that's possible, though really, you don't want to duplicate CSS unnecessarily. In this case, the default code is this:

    body {
    	font-size: 14px;
    	font-size: 1rem;
    	font-family: Helvetica, Arial, sans-serif;
    	text-rendering: optimizeLegibility;
    	color: #444;
    }

    if you are only changing the fonts, just put this in the new style.css file:

    body {
    	font-family: Helvetica, Arial, sans-serif;
    }
  10. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    Don't forget:

    body.custom-font-enabled {
    	font-family: "Open Sans", Helvetica, Arial, sans-serif;
    }

    2012 enqueues open sans through functions.php. The file is commented to discuss. I believe you could just dequeue the font, enqueue your own, and then modify the css

  11. listerdl
    Member
    Posted 1 year ago #

    Amazing advice thanks!

    One question - what about if the font that I wanted to add was a Google Font?

    I understand that the font-family: can refer direct to the Google font - but where would I place this?

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

    THANKS Again

  12. fonglh
    Member
    Posted 1 year ago #

    You can hook it to wp_head.

    I did this for the twenty ten theme but the steps should be the same.
    http://wpadventures.wordpress.com/2011/02/09/ubuntu-font/

  13. listerdl
    Member
    Posted 1 year ago #

    thanks very much ill try that

  14. Tryah85
    Member
    Posted 1 year ago #

    I would not add <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'> to header.php. Like the moderator said when/if you upgrade the theme the external link to googles CSS file is lost.

    I have been working on a similar project (to help me understand how the wordpress hierarchy works).

    The best way to add the google link to the header of the WordPress DOM is to create a functions.php file in the child theme, and add php code to make it more dynamic.

    function load_google_fonts() {
    		wp_register_style('googleFontsUbuntu','http://fonts.googleapis.com/css?family= Ubuntu');
                wp_enqueue_style( 'googleFontsUbuntu');
    }
    
    add_action('wp_print_styles', 'load_google_fonts');

    So to help me process this in my head, within a separate functions.php in the child theme (not the main theme) a function is written registering the font and then it is enqueued. Finally you add the action to print out the fonts.

    For the record I know there is a Google fonts plugin I could use, but I want to figure this way out for learning purposes...

    Where I am is now I can see the twenty twelve-child css links in the header when I view the source- so I know my google fonts are loaded and ready to be used, but I cannot get the right css properties to override the Open Sans, Helvetica... font-family.

    I have found the main font-family properties in the main theme's style.css, so I just override them by specifying them within the styles.css in the -child folder:

    @import url(../twentytwelve/style.css);
    
    body {
    	font-family: Marck+Script, Roboto, Averia+Libre, sans-serif;
    	}
    body.custom-font-enabled {
    	font-family: Marck+Script, Roboto, Averia+Libre, sans-serif;
    	}
    .entry-content code,
    .comment-content code {
    	font-family: Marck+Script, Roboto, Averia+Libre, sans-serif;
    	}
    
    .entry-content pre,
    .comment-content pre {
    	font-family: Marck+Script, Roboto, Averia+Libre, sans-serif;
    	}
    
    body,
    input,
    textarea,
    .page-title span,
    .pingback a.url {
    	font-family: Marck+Script, Roboto, Averia+Libre, sans-serif;
    	}

    Nothing changes. I am lost, anybody have a suggestion? Thank you :)

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @Tryah85 - posting in old threads isn't a good way to get help - please start a new thread per

    http://codex.wordpress.org/Forum_Welcome#Where_To_Post

  16. Tryah85
    Member
    Posted 1 year ago #

    Opps, sorry. See this new thread.

Topic Closed

This topic has been closed to new replies.

About this Topic