{"id":61430,"date":"2018-09-27T09:46:32","date_gmt":"2018-09-27T09:46:32","guid":{"rendered":"https:\/\/designshack.net\/?page_id=61430"},"modified":"2022-11-17T13:10:09","modified_gmt":"2022-11-17T13:10:09","slug":"google-fonts","status":"publish","type":"page","link":"https:\/\/designshack.net\/google-fonts\/","title":{"rendered":"Google Fonts"},"content":{"rendered":"

Google Fonts is a library of over 800 different typefaces, completely ready to be embedded in your web project. This series looks at what Google Fonts is, and shares interesting examples and combinations of fonts that can take your project to the next level.<\/p>\n

Interested in a few of our picks for under-used Google Fonts that have a bit more unique character? We’ll be taking a look at those as well, to help your layout stand out from the crowd.<\/p>\n

<\/p>\n

What is Google Fonts?<\/h2>\n
\"google<\/div>\n
“The open source fonts in the Google Fonts catalog are published under licenses that allow you to use them on any website, whether it\u2019s commercial or personal.\u201d \u2013 Google Fonts FAQ<\/a><\/div>\n

Google Fonts is a collection of more than 800 typefaces that designers and developers can use for free. Fonts are available in an interactive gallery\/directory where you can view and preview as well as pair typefaces before you design with them.<\/p>\n

Google Fonts is available for website use via APIs and including typeface information in the stylesheet and CSS. Google Fonts are also downloadable.<\/p>\n

Any user can access and use Google Fonts for personal or commercial projects thanks to open source licensing.<\/p>\n

How to Use Google Fonts in 3 Steps<\/h2>\n
\"google<\/div>\n

While the idea of adding fonts to a web project might intimidate some, it\u2019s actually pretty easy. You can do it in three steps and be ready to use Google Fonts right away. The hardest part might be narrowing your selection down to just one or two typefaces.<\/p>\n

    \n
  1. Add a stylesheet link to your website<\/strong>: Make sure to include the stylesheet link with the desired font name that you plan to use.<\/li>\n
  2. Use the font in a CSS style<\/strong>: Then you can style elements using that font name as well.<\/li>\n
  3. Add font effects<\/strong>: Google Fonts also has a beta font effects tool so you can add extra styling to typefaces for special uses. Effects include everything from a neon glow to 3D effects, to shadows to anaglyphs.<\/li>\n<\/ol>\n

    You can find complete instructions and code snippets from Google Fonts here<\/a>.<\/p>\n

    3 Classic Google Font Combinations<\/h2>\n
    \"google<\/div>\n
    \"google<\/div>\n
    \"google<\/div>\n

    With so many choices, the hardest part of using Google Fonts is picking what fonts to use. Sometimes the best choice is a classic combination that\u2019s been tested and is easy to read and familiar to the eye.<\/p>\n

    Here are three classic Google Font combinations:<\/p>\n