1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to change Wordpress Theme Font

Discussion in 'Blogging' started by Brithos10, Aug 30, 2015.

  1. Brithos10

    Brithos10 Regular Member

    Joined:
    Jan 15, 2014
    Messages:
    358
    Likes Received:
    44
    Location:
    Italy
    Hey BHW

    I'm wondering how can i change the font of this WP Theme.

    Code:
    https://wordpress.org/themes/surfarama/
    Code:
    http://surfarama.com/
    Thanks to Google Easy Font Plugin i'm now able to change only the fonts into the website posts.

    Specifically i need to change the website title font ( Surfarama title if you take a look at the demo) and the font of the widget menù and sidebar.

    I've found that Raleway Font is a really cool font and i want to be my website title and widget menù font.

    I know i have to modify the CSS of the theme but i really need some specific help because I run the risk ruin the code itself , throwing a lot of work and commitment .


    Thanks to all, and have a great day!
     
  2. Brithos10

    Brithos10 Regular Member

    Joined:
    Jan 15, 2014
    Messages:
    358
    Likes Received:
    44
    Location:
    Italy
    No one guys ?

    I've just wrote to the theme creator but seems there's no support for this theme
     
  3. Nonilol

    Nonilol Elite Member

    Joined:
    Mar 1, 2015
    Messages:
    1,645
    Likes Received:
    559
    Gender:
    Male
    Occupation:
    Media Informatics & Webdev Student
    Location:
    Hamburg, GER / Southampton, UK
    Home Page:
    You can manually edit the css and search (ctrl+f) for the font you want to change and replace it.
     
  4. Brithos10

    Brithos10 Regular Member

    Joined:
    Jan 15, 2014
    Messages:
    358
    Likes Received:
    44
    Location:
    Italy
    I can't find the code line on the CSS Theme that rules the font editing of the site's title and the menù. There are several lines of codes about the fonts and i can't take stock of the situation...

    I'm sorry for the dumb questions but everyone needs to learn first!:confused:
     
  5. blogzandstuff

    blogzandstuff Elite Member

    Joined:
    Jan 1, 2015
    Messages:
    5,778
    Likes Received:
    2,675
    Occupation:
    blog creator
    Location:
    UK
    Never change core wordpress code as when the next update come it will overwrite and your changes will be lost, always adapt code in a child theme that way any updates from wordpress will not affect your work, also if you mess it up it will not damage your site.
    If you get the site demo up and click the logo and right click - view element this brings up the code you need to adapt.
    #site-title {
    padding-bottom: 15px;
    font-family: " Roboto", Arial, Helvetica, sans-serif;
    font-size: 44px;
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 40px;
    line-height: 2.5rem;
    text-transform: uppercase;
    }
    Something like above, then adapt this and add it to your css in your child theme.
     
  6. Brithos10

    Brithos10 Regular Member

    Joined:
    Jan 15, 2014
    Messages:
    358
    Likes Received:
    44
    Location:
    Italy
    Thanks for the contribution blogzandstuff

    -What do you mean for child theme ? I'm sorry but i'm not a native english

    In this case i need to change
    with
    and it's over?

    Could you be more specific ?
     
  7. Nonilol

    Nonilol Elite Member

    Joined:
    Mar 1, 2015
    Messages:
    1,645
    Likes Received:
    559
    Gender:
    Male
    Occupation:
    Media Informatics & Webdev Student
    Location:
    Hamburg, GER / Southampton, UK
    Home Page:
    You got it right. However do not forget to put a secondary font and a font class.
    Like this:
    font-family: "Raleway", "Open Sans", sans-serif;
     
    • Thanks Thanks x 1
  8. harizd

    harizd Regular Member

    Joined:
    Jul 24, 2009
    Messages:
    495
    Likes Received:
    99
    If you are using Chrome, just highlight the text and right click choose inspect element.
    The console will you show you the CSS code along with the current font. Play with it until you are satisfied with the font you want to use.

    On your WordPress dashboard, go to Appearance - Theme editor and choose Style.css.
    Scroll down until you find the CSS for your post content and change the font.
     
  9. blogzandstuff

    blogzandstuff Elite Member

    Joined:
    Jan 1, 2015
    Messages:
    5,778
    Likes Received:
    2,675
    Occupation:
    blog creator
    Location:
    UK
    A wordpress child theme is a second theme that is identical to your current theme but without all the code, a shell if you like, you upload and install and activate the same way. Wordpress will look in the child theme first for any code or css then move on to the main theme. Any changes you make in the child theme overrides the main theme. When wordpress does an update the child theme is untouched. Also having the child theme allows you to work on design, then if you mess up the main theme is left intact. Hope this makes sense
     
  10. blogzandstuff

    blogzandstuff Elite Member

    Joined:
    Jan 1, 2015
    Messages:
    5,778
    Likes Received:
    2,675
    Occupation:
    blog creator
    Location:
    UK
    You forgot to mention that you must never change the core wordpress code, everything must be done in a child theme to protect againt wordpress updates as they override all files in the core