Change font styles for Graphene

  • ng_social

    #20609

    oh..ok..so, I should do the same for any and all fonts that I’d like to use..as long as it comes from GoogleFonts (i review and use the font, and then get the codes).

    Then, I just keep on adding their @import URLs in the Custom CSS box (the more fonts, the slower the page load).

    Then I add the last code (font-family) to the CSS of the word/item which I want to change the font.

    Is that right??..

    ng_social

    #20610

    But it would be better (and you greatly advice) that I start using a child theme?,

    I read the post in the link you gave me about creating child themes, and I have a question. Where do i find the Graphene Child Folder?..how do I access it?

    Anonymous

    #20611

    You would need to create it via an FTP program or use your hosting control panel.

    Here is a video I made about setting up a child theme:

    http://www.joshlobe.com/2011/10/video-tutorial-creating-a-child-theme-in-wordpress/

    ng_social

    #20612

    oh..I had a hard time finding that folder stuff..if i installed wordpress from wordpress.org, will I be able to do that?..’coz im currently editing my website through wordpress.com

    ng_social

    #20613

    I followed the instructions you gave me (the one using the CSS Box) and nothing happens, the font just goes back to what I think is Times New Roman.

    I pasted the @import URL to the CSS box, and then I copy the CSS line in the CSS editor itself. I’ve tried just adding it below the original font, and I’ve tried replacing the original font CSS, neither worked. The text goes back to a Times New Roman font style (or i think it is).

    And about the child page instructions, do I have to install a separate software to do that? ‘Coz I’m just using Mozilla Firefox to edit my website through WordPress.com. And all the posts and instructions talk about FTP client and Web Servers, and I have no idea where to access those.

    Anonymous

    #20614

    Just add it to your custom css box.

    Admin Panel -> Appearance -> Graphene Options -> “Display” tab -> Custom CSS

    Add this line to the box:

    @import url(http://fonts.googleapis.com/css?family=Mate+SC);

    And then add the font family property to any element you want to use it on.

    Anonymous

    #20615

    There are only two ways to get to the files on your webserver. And one of these methods had to be used to install wordpress.

    The first is using an FTP program. You set up an ftp account through your hosting provider, and then you use a username and password to connect your program to your website. CoreFTP, and FireFTP are both good ones.

    The other method is loggin into your hosting company’s website and using their control panel for your website.

    WordPress does include the editor feature which allows you to edit files. However, if you make a mistake, and screw up the code, you will get locked out of your admin area and only see an error.

    When this happens, the only way to fix it is using one of the two methods mentioned above.

    ng_social

    #20616

    Ok. I get it now..unfortunately, I don’t have access to our hosting provider. Since, I wasn’t the one who got our website hosted, but I’ll try to contact whoever has that information, hopefully by then, I would be able to know what to do.

    Thank you very much for the help Josh. I appreciate it.

    ng_social

    #20617

    oh and by the way, when using the instructions you gave above, do i just add the font code to the existing CSS code? like:

    #header-menu > li {
    font-family: 'Mate SC', serif;
    font: 17px 'Calibri';
    margin: 0 2px;
    }

    or do i have to replace the existing font totally? like:

    #header-menu > li {
    font-family: 'Mate SC', serif;
    margin: 0 2px;
    }

    Anonymous

    #20618

    Replace the existing font totally. But you might have to re-add the size.

    Try this:

    #header-menu > li {
    font-family: 'Mate SC', serif;
    font-size: 17px
    }

    You don’t need to worry about the margin since you aren’t changing it. Now, with the code above, you can change the 17px to something else if you like.

Viewing 10 posts - 11 through 20 (of 53 total)

  • You must be logged in to reply to this topic.