For Designers : Favourite Fonts

favourite-free-web-fonts2

Today I’m sharing my favourite web fonts all paired up. Not all, but most of these picks are Google Fonts, which means you don’t need to host the typeface yourself (as Google is already doing that for you).  Working with Google Fonts is super easy. Just find your font from here and click on the quick use tab below the typeface. You’ll be able to select the styles you want and retrieve a piece of code to add to your website. The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles just as you’d do normally with any other font.

For example:  h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

You can download them too. Just click quick use then the little download arrow at the top. Select the zip file and open. I’m always on the hunt for great fonts + pairings. So feel free to share in the comments. You can download my picks below.

one: (Channel + Cabin)  /  two: (Oswald + Lora) /  three: (Railway + Baskervillefour: (Meddon + Nevis Bold) /  five: (Montserrat Regular + Pecita)

11 Comments

Submit a Comment
  • Reply

    Eleanor

    7 months ago

    Thanks forthese suggestions, im overwhelmed by the number of choices!
    Would Lora be a good font for a very brief business website? I am a business coach and know very little about design!
    Current website is http://www.jacksonsturdy.com and I welcome your comments
    Hapoy 2014, bedt wushes Eleanor

    • Reply

      IreneVictoria

      7 months ago

      Hi Eleanor, I definitely think Lora would look nice! The letters will appear a little closer together than what is displayed above because the web doesn’t let you space things the way design programs do. I took a peak at your website and I also think Cabin (option one) would look nice too.

      There’s a neat little trick that I use to test the look of web fonts without actually changing the fonts of my websites. I’m going to do my best to try and explain it below!

      Using the latest version of Google Chrome as your browser, right click your webpage and select “inspect element.” Some code should appear at the bottom of the page. Take a look at the very right column and make sure the “styles” tab is selected. Under “font family” replace futura and add “lora.” Now under “font style” delete italic and click to test out the different options that come up.

      Give it a try and let me know what you decide! Looks great!

  • Reply

    Niki

    6 months ago

    The pairing in sample five — I went to pecita and it is not the same as what you showcased. The b’s and d’s are much more casual and not as readable anymore.

    Is this an older version of Pecita?

    Frustrating, because I like the version you showcased 1000% more.

    • Reply

      IreneVictoria

      6 months ago

      Hmm that’s so strange. I’m using Pecita Book but I don’t see it on Font Squirrel anymore. Here it is on font library! http://openfontlibrary.org/en/font/pecita

      • Reply

        NIKI

        6 months ago

        THANK YOU!

        • Reply

          IreneVictoria

          6 months ago

          You are very welcome! :)

  • Reply

    june

    5 months ago

    Hi Irene,
    Liked a lot all of your parings, especially one that last without number. It looked perfectly fit into my project! Thank you for the idea:)

    • Reply

      IreneVictoria

      5 months ago

      Thank you! So happy it helped! :)

  • Reply

    Lauren

    4 months ago

    Fantastic pairing – thank you!

  • Reply

    Kayla K

    4 months ago

    Great stuff. Seeing these fonts separately I wouldn’t have seen this much potential.

  • Reply

    Brandi

    2 months ago

    Hey! what font did you use in the bottom left box? the Favourite web fonts box?

Submit a Comment

Your Comment