{"id":21247,"date":"2017-04-03T13:27:56","date_gmt":"2017-04-03T12:27:56","guid":{"rendered":"https:\/\/fifteen-staging.fifteen.dev\/blog\/the-best-of-google-web-fonts\/"},"modified":"2017-04-03T13:27:56","modified_gmt":"2017-04-03T12:27:56","slug":"the-best-of-google-web-fonts","status":"publish","type":"post","link":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/","title":{"rendered":"The Best of Google Web Fonts"},"content":{"rendered":"<div class=\"entry-content\"><p>When it comes down to using fonts across the web, Google has supplied designers and developers with an invaluable tool \u2013 Google Web Fonts. The Google Web Fonts library contains over 800 different font families, which is a fantastic and diverse resource, but how do you choose the right typeface for your project? We have compiled a list of some of the best fonts available from Google Web Fonts.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"600\" class=\"aligncenter size-full wp-image-13138\" src=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/OpenSans.jpg.webp\" alt=\"\" srcset=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/OpenSans.jpg.webp 1800w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/OpenSans-250x83.jpg.webp 250w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/OpenSans-768x256.jpg.webp 768w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/OpenSans-700x233.jpg.webp 700w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><strong>Open Sans<\/strong><\/h2>\n<p>The big daddy of Google Web Fonts, we find Open Sans to be one of the most versatile web fonts out there right now! It comes as a welcome alternative where Arial or Helvetica may have otherwise been used\u00a0and is subtle enough to work for body copy and titles without overpowering other elements within the site design. The font family consists of 5 different weights with italic versions of all. The differing weights work really well together and can be used as a sole font family across a website because of this. What\u2019s awesome about Open Sans is that there is also a condensed version available through GWF! We can\u2019t recommend it enough as it\u2019s such a versatile font family that works across so many different styles of website without the threat of all sites looking the same.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"600\" class=\"aligncenter size-full wp-image-13145\" src=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/Poppins.jpg.webp\" alt=\"\" srcset=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/Poppins.jpg.webp 1800w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/Poppins-250x83.jpg.webp 250w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/Poppins-768x256.jpg.webp 768w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/Poppins-700x233.jpg.webp 700w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2><strong>Poppins<\/strong><\/h2>\n<p>If you\u2019re looking for an endearing geometric style font family that comes in several different weights, then look no further! Poppins is a fantastic web font that works well on its own or part of a combination of fonts. The geometric style means it can always be used as an alternative to fonts like Gotham, Mark Comp Pro or Proxima Nova. The font family consists of 5 different weights, unfortunately, it doesn\u2019t include italic versions which is it\u2019s only real flaw. If Poppins doesn\u2019t quite do the job, another GWF \u2018Montserrat\u2019 is also a flexible geometric font but only comes in 2 weights.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"600\" class=\"aligncenter size-full wp-image-13146\" src=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/RobotoSlab.jpg.webp\" alt=\"\" srcset=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/RobotoSlab.jpg.webp 1800w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/RobotoSlab-250x83.jpg.webp 250w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/RobotoSlab-768x256.jpg.webp 768w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/RobotoSlab-700x233.jpg.webp 700w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2><strong>Roboto Slab<\/strong><\/h2>\n<p>A fantastic little slab serif font, Roboto truly compliments it\u2019s Serif and Sans Serif siblings too. The whole range of Roboto font families are a great addition to any site but we particularly enjoy the feel of the Slab Serif version. Slab Serifs are making a comeback and Google have their fair share of types across their library, given the choice, we would use Roboto Slab as you\u2019re given the most flexibility when you can use other versions of Roboto alongside it, it\u2019s a no-brainer!<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"600\" class=\"aligncenter size-full wp-image-13147\" src=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/Merriweather.jpg.webp\" alt=\"\" srcset=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/Merriweather.jpg.webp 1800w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/Merriweather-250x83.jpg.webp 250w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/Merriweather-768x256.jpg.webp 768w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/Merriweather-700x233.jpg.webp 700w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2><strong>Merriweather<\/strong><\/h2>\n<p>This serif font is a really popular addition to the Google Web Font library and we can see why! A simple serif font that comprises of 4 different weights and italic versions of all can be used widely across headlines, titles and works best in the form of body copy. Merriweather was designed to be easy and pleasant to read on the web, which makes it an excellent choice for large sections of copy to be formatted in.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"600\" class=\"aligncenter size-full wp-image-13148\" src=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/PlayfairDisplay.jpg.webp\" alt=\"\" srcset=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/PlayfairDisplay.jpg.webp 1800w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/PlayfairDisplay-250x83.jpg.webp 250w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/PlayfairDisplay-768x256.jpg.webp 768w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/PlayfairDisplay-700x233.jpg.webp 700w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2><strong>Playfair Display<\/strong><\/h2>\n<p>If you\u2019re looking for a fancier style serif font then Playfair Display is a really elegant family of fonts. It comprises of 3 different styles with italic versions of each. The style of font is very traditional, influenced by quill style brush strokes but retaining a tidy look. As it\u2019s title suggests, the typeface is best used for headlines and titles rather than body copy, as it does have some thinner areas to some of the letterforms. What\u2019s great about this font family is that it can be easily paired alongside body copy in either serif or sans serif styles which is why we would recommend it as an eye-catching title typeface.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"600\" class=\"aligncenter size-full wp-image-13149\" src=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/DancingScript.jpg.webp\" alt=\"\" srcset=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/DancingScript.jpg.webp 1800w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/DancingScript-250x83.jpg.webp 250w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/DancingScript-768x256.jpg.webp 768w, https:\/\/www.fifteendesign.co.uk\/wp-content\/smush-webp\/2017\/03\/DancingScript-700x233.jpg.webp 700w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2><strong>Dancing Script<\/strong><\/h2>\n<p>If you\u2019re on the lookout for a beautiful script\/handwritten font family to use across the web, our favourite is Dancing Script. The font family comes in 2 weights which is great for use across the web and unusual for a font style like this. The letterforms are lively and have an energy to the way they sit across the baseline which allows them to look more \u2018hand drawn\u2019 than computer generated. The informality of this typeface makes for a great addition to a site and would work well as a complimentary font<\/p>\n<p><strong>These are just some of our recommendations on getting started with Google Web Fonts. However, with over 800 to choose from, we would recommend trialling some for yourself! Google Web Fonts can be implemented into sites easily due to its open source platform and licenses allowing for personal and commercial use. <a href=\"https:\/\/fonts.google.com\/\">Visit the Google Web Fonts site and get started!<\/a><\/strong><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"When it comes down to using fonts across the web, Google has supplied designers and developers with an invaluable tool \u2013 Google Web Fonts. The Google Web Fonts library contains over 800 different font families, which is a fantastic and diverse resource, but how do you choose the right typeface for your project? We have [&hellip;]","protected":false},"author":84,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-21247","post","type-post","status-publish","format-standard","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The Best of Google Web Fonts - Fifteen<\/title>\n<meta name=\"description\" content=\"When it comes down to using fonts across the web, Google has supplied designers and developers with an invaluable tool \u2013 Google Web Fonts.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Best of Google Web Fonts\" \/>\n<meta property=\"og:description\" content=\"When it comes down to using fonts across the web, Google has supplied designers and developers with an invaluable tool \u2013 Google Web Fonts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"Fifteen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/FifteenDesign\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-03T12:27:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2017\/03\/OpenSans.jpg\" \/>\n<meta name=\"author\" content=\"Kyle Lindsay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kyle Lindsay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The Best of Google Web Fonts - Fifteen","description":"When it comes down to using fonts across the web, Google has supplied designers and developers with an invaluable tool \u2013 Google Web Fonts.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/","og_locale":"en_GB","og_type":"article","og_title":"The Best of Google Web Fonts","og_description":"When it comes down to using fonts across the web, Google has supplied designers and developers with an invaluable tool \u2013 Google Web Fonts.","og_url":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/","og_site_name":"Fifteen","article_publisher":"https:\/\/www.facebook.com\/FifteenDesign","article_published_time":"2017-04-03T12:27:56+00:00","og_image":[{"url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2017\/03\/OpenSans.jpg","type":"","width":"","height":""}],"author":"Kyle Lindsay","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kyle Lindsay","Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/#article","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/"},"author":{"name":"Kyle Lindsay","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714"},"headline":"The Best of Google Web Fonts","datePublished":"2017-04-03T12:27:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/"},"wordCount":766,"commentCount":0,"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2017\/03\/OpenSans.jpg","inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/","url":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/","name":"The Best of Google Web Fonts - Fifteen","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/#primaryimage"},"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2017\/03\/OpenSans.jpg","datePublished":"2017-04-03T12:27:56+00:00","author":{"@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714"},"description":"When it comes down to using fonts across the web, Google has supplied designers and developers with an invaluable tool \u2013 Google Web Fonts.","breadcrumb":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/#primaryimage","url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2017\/03\/OpenSans.jpg","contentUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2017\/03\/OpenSans.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/the-best-of-google-web-fonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fifteendesign.co.uk\/"},{"@type":"ListItem","position":2,"name":"The Best of Google Web Fonts"}]},{"@type":"WebSite","@id":"https:\/\/www.fifteendesign.co.uk\/#website","url":"https:\/\/www.fifteendesign.co.uk\/","name":"Fifteen","description":"Creative. Digital. Marketing.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fifteendesign.co.uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714","name":"Kyle Lindsay","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","caption":"Kyle Lindsay"},"url":"https:\/\/www.fifteendesign.co.uk\/blog\/author\/kyle\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/21247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/comments?post=21247"}],"version-history":[{"count":0,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/21247\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/media?parent=21247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/categories?post=21247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/tags?post=21247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}