Change font styles for Graphene

  • ng_social

    #2516

    Excuse me,

    Can anyone help me please..:)

    I’m using Graphene theme for our website, and I’d like to change the Font styles of the words ALL OVER the site. I’ve found the CSS codes with the help of Firebug.

    I want to use the font styles that I have downloaded from the net. It works when I change the font style codes thru CSS and view the website with MY computer, but if I view it using another computer (which does not have the same font installed), It goes back to the default font.

    Oh, and I’m just a beginner with this stuff, so I can’t really catch up with the “technical” terms. hehe..thanks much in advance!..

    Josh

    #20600

    Is the font style you downloaded a TTF?

    You would need to add a call in your stylesheet to import the font into the browser. The reason you can only see it on your computer is because you already have that font installed on that computer.

    ng_social

    #20601

    Oh..so, I can only use True Type Fonts for my website?..

    I had the same idea, that the only reason I could see it is because I have it installed in my computer.

    Ok, so have to add a CALL to my style sheet and import the font to my website itself. Uhhh..how exactly do i do that?..sorry..like I said, I’m still somewhat of a beginner right now.

    Thanks again.

    Josh

    #20602

    Well, they don’t have to be true types. I was simply assuming.

    But yes, you need to import the font into wordpress using your stylesheet.

    Do you have an @import url for the font you are wanting to use?

    ng_social

    #20603

    Oh.ok.

    Uhhmm..no, i don’t think I have an @import url for the fonts (‘coz I haven’t really dont anyhting to them). Do I have to make it myself? or should it go with the font when I donwload it?

    Josh

    #20604

    Well, google webfonts seem to be getting pretty big right now. Go here and see if you can find a similar font to what you are using.. and then let me know it’s name:

    http://www.google.com/webfonts#ChoosePlace:select

    ng_social

    #20605

    Ok..thank you very much..can choose a couple of them? or just one?

    I’ll get back to you in a couple of minutes.

    Thanks again.

    ng_social

    #20606

    Here’s the font that I’ve chosen: Mate SC

    Josh

    #20607

    You can choose multiple… but each one makes a separate call… slowing your page load times. The more you use, the longer your page must work.

    Okay, gimme a second to grab the code.

    Have you set up a child theme yet??

    https://forum.graphene-theme.com/graphene-support/how-to-modify-the-theme-using-a-child-theme

    Josh

    #20608

    If you haven’t, you can add this to your custom css box in graphene options menu.

    However, I still recommend setting up a child theme if you plan on making future adjustments.

    So, paste this into your css:

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

    And then whatever element you want to use the font, add this property to it’s css:

    font-family: 'Mate SC', serif;
Viewing 10 posts - 1 through 10 (of 53 total)

You must be logged in to reply to this topic.