Grow your CSS skills. Land your dream job.

How to create a Global Custom CSS

  • # March 24, 2013 at 5:38 am

    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

    # March 24, 2013 at 6:20 am

    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?

    # March 24, 2013 at 8:06 am

    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.

    # March 24, 2013 at 8:13 am

    @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

    # March 24, 2013 at 8:28 am

    @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)..

    # March 24, 2013 at 8:33 am

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".