{"id":874,"date":"2015-01-07T06:53:16","date_gmt":"2015-01-07T12:53:16","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=874"},"modified":"2015-01-07T06:53:16","modified_gmt":"2015-01-07T12:53:16","slug":"how-to-use-google-fonts-with-css-tutorial","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-use-google-fonts-with-css-tutorial\/","title":{"rendered":"How to use Google Fonts with CSS Tutorial"},"content":{"rendered":"

Googles fonts API “makes it quick and easy for everyone to use web fonts” and is very simple to use. There are many advantages to using Google fonts because you get to use elegant fonts on your website that have been tested on hundreds of browser configurations and googles content delivery system can reassure you that users will always be able to load the fonts. <\/p>\n

There’s essentially 2 steps to integrating a Google font into your website. First you include the stylesheet then you assign the font to the elements on your page that you want to use it, and that’s it! There are two more options you can customize to fit your needs if you want additional font styles or character sets. <\/p>\n

After you’ve found a font you like from Google Fonts<\/a> and clicked the quick use button you’ll see 4 options. The first is where you choose your styles, which usually include light, normal, bold, and super bold options. Next you’ll choose your character sets such as latin, greek, and vietnamese. The third step is where you copy the code to include the font on your page. Google gives three options on including the font.<\/p>\n

The standard option is your traditional <link> tag that you include in your <head> tag.<\/p>\n

<link href='http:\/\/fonts.googleapis.com\/css?family=Open+Sans' rel='stylesheet' type='text\/css'><\/pre>\n
The @import option allows you to include the single line in another CSS document that is already included in the <head> of your website. <\/p>\n
Finally the Javascript option allows you to include the styling through a javascript function.<\/p>\n
The last step is assigning the font families to elements on your page. Assign the font using the font-family tag and the name of the font you selected, just like any other font. Make sure to include a fallback font just to be safe!<\/p>\n
font-family: 'Open Sans', sans-serif;<\/pre>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
Googles fonts API “makes it quick and easy for everyone to use web fonts” and is very simple to use. There are many advantages to using Google fonts because you get to use elegant fonts on your website that have […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[192],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/874"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=874"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/874\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}