Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to create a Global Custom CSS

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #43623
    kenshi64
    Member

    Okay, so I have no know-how of CSS but I had read up on it in the past so I could possibly manage. :)

    What I want to achieve is this basically: Override present body fonts by specifying a font from Google Web fonts. Arising from this is the dilemma; how do I exactly write this CSS? I’m sure it’s just an _2 second job_ for you guys :)

    Can I do the same for all title fonts? I understand this might be a bit more difficult since the title font isn’t a class like body. It include anything that’s h1, h2 and so on. Any leads? :)

    CMS: Concrete5

    P.S. I’m blown away by the design of this website, it’s totally amazing and I’m not into flattery :P

    #129484
    JohnMotylJr
    Participant

    If you just want to apply a specific font to your entire page you just need to specify your font in the body.

    body {
    font:[weight], [style], [size]/[line height] ;
    }

    Since you are using a CMS, you need to find whatever file includes your head tag and include a link to the stylesheet OR just take that stylesheet and add the contents into your css file.

    For example, if you want to use the font ‘OSWALD’ just get the stylsheet and add its contents into your css file.

    @font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    src: local('Oswald Regular'), local('Oswald-Regular'),
    url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
    }

    In the body element just add the following:

    body {
    font:normal normal 16px/1 'Oswald';
    }

    Does that help any?

    #129502
    kenshi64
    Member

    Hi! Yes that actually was pretty spot on! I DO have to call in the header as always. Though a small misunderstanding is all that I need some follow up with; what I have planned is a global font override, so that the said font I choose overrides all the body fonts over the website. How do I use a said font from google to do this? I was told to include the css in my theme folder.

    #129503
    chrisburton
    Participant

    @JohnMotylJr You need to add a truetype format to @font-face as well. Android doesn’t play nicely with woff only.

    Note: This method is for modern browsers. It will not work in lower versions of IE.

    http://caniuse.com/#search=woff

    #129506
    JohnMotylJr
    Participant

    @chrisburton, Good call man..


    @kenshi64
    , when you have your selected font from google, instead of linking it, it allows you to download a zip folder of the font (i dont know exactly what font types [otf/ ttf/ svg/ etc] it comes with) but you can then just go to the font squirrel face-font generator and upload one font and it will hook you up.

    Chris might have some better insight since he is a typography guy. I try not to use to many fonts (http requests ya know)..

    #129510
    chrisburton
    Participant

    @kenshi64 What browsers are you supporting and what webfont are you wanting to use?

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.