Top Google fonts for your designs – In action

Google Fonts is a repository of free, open-source fonts that you can use when designing a website. This article lists 6 of the most interesting fonts available, practical examples of the fonts in use and a few tips to optimize websites using Google Fonts.


Rajdhani


This font is great for headlines and menu. Tech site Hongkiat has put Rajdhani in good use in their clean, neat main navigation menu.
More info/Download

Roboto


Probably the most popular and used Google Font, Roboto is a great alternative to web safe fonts like Arial or Helvetica.

For an example of Roboto in use in a WordPress theme, check out the Insight theme by WP Zoom.
More info/Download

Montserrat


Clean, classy and readable, Montserrat is a great choice for a blog or website. It can be used for paragraphs, headings, or both.

Montserrat is used in the beautiful WP theme named Deca. Check it in action here.
More info/Download

Libre Franklin


Another very clean font which will be the perfect successor to the endless amounts of Arial and Helvetica fonts on websites. Libre Franklin is the font I chose for the 2017 version of CatsWhoCode theme.

Libre Franklin can also be seen at use on another theme from WP Zoom, Presence.
More info/Download

Source Code Pro


When you want to display code in WordPress or any other kind of site, you need a very readable monospaced font.

Courier has been used for years. Looking for an alternative? The free Source Code Pro font could be exactly what you’re looking for.
More info/Download

Open Sans


Open Sans is optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms. No wonder why many designers rely on it when it comes to building beautiful and readable websites.

The font can be seen in use on 23 Video.
More info/Download

  • redpik

    “And then, copy and paste the content of the stylesheet in your site style.css file”
    Terrible mistake: this method takes the font for your browser only.

    • Thanks for the head up. Any suggestion to deal with the extra HTTP request as mentioned in the article?

      • redpik

        yes, 2 solutions:

        – the css @import method
        – or download the font and make a web font pack (with a tool like https://font-converter.net/)

        IMHO the Google Fonts standard method is the best one, even with an additional HTTP request.

  • CodeBrauer

    Your quicktip is wrong!

    @import blocks other requests to load and waits till it finishes. So when you put an “@import” in your file – you have to wait till the users device will finish the request to google and after this request it loads you css file.

    So 2 parallel HTTP requests are in fact faster than 1 which has to wait on a 3rd party service.

    Read more about here http://stackoverflow.com/questions/1022695/difference-between-import-and-link-in-css

    • You’re totally right – I have removed the “quick tip” and will investigate further on that issue. Thanks!

  • I’m fan of ‘Open Sans’, i always use it.

  • Everything looks cool but my best pick so far is Montserrat. It’s simple yet classy.