{"id":802,"date":"2010-05-20T20:20:00","date_gmt":"2010-05-21T02:20:00","guid":{"rendered":"http:\/\/www.evolutionarydesigns.net\/blog\/2010\/05\/20\/how-to-use-google-web-fonts-on-wordpress-and-other-sites\/"},"modified":"2010-05-20T20:30:27","modified_gmt":"2010-05-21T02:30:27","slug":"how-to-use-google-web-fonts-on-wordpress-and-other-sites","status":"publish","type":"post","link":"http:\/\/www.evolutionarydesigns.net\/blog\/2010\/05\/20\/how-to-use-google-web-fonts-on-wordpress-and-other-sites\/","title":{"rendered":"How To Use Google Web Fonts on WordPress and Other Sites"},"content":{"rendered":"<p>Earlier this week Google released <a href=\"http:\/\/code.google.com\/webfonts\" target=\"_blank\">Google Font Directory<\/a> and <a href=\"http:\/\/code.google.com\/apis\/webfonts\/\" target=\"_blank\">Google Font API<\/a>. Google teamed up with Typekit to create an <a href=\"http:\/\/blog.typekit.com\/2010\/05\/19\/typekit-and-google\/\" target=\"_blank\">open sourced Font project<\/a>. All fonts found in the directory are available for use on any website under an <a class=\"zem_slink\" title=\"Open source\" rel=\"wikipedia\" href=\"http:\/\/en.wikipedia.org\/wiki\/Open_source\">open source<\/a> license and are served by Google servers. Once in the directory, you can browse Google\u2019s catalog of fonts, learn more about the font designers and get the code required to use them on your site.<\/p>\n<p>Google Web fonts is compatible with the following browsers<\/p>\n<ul>\n<li><a class=\"zem_slink\" title=\"Google Chrome\" rel=\"homepage\" href=\"http:\/\/www.google.com\/chrome\">Google Chrome<\/a>: version 4.249.4+<\/li>\n<li><a class=\"zem_slink\" title=\"Firefox\" rel=\"homepage\" href=\"http:\/\/www.mozilla.com\/en-US\/firefox\/\">Mozilla Firefox<\/a>: version: 3.5+<\/li>\n<li>Apple <a class=\"zem_slink\" title=\"Safari\" rel=\"homepage\" href=\"http:\/\/www.apple.com\/safari\">Safari<\/a>: version 3.1+<\/li>\n<li>Microsoft <a class=\"zem_slink\" title=\"Internet Explorer\" rel=\"wikipedia\" href=\"http:\/\/en.wikipedia.org\/wiki\/Internet_Explorer\">Internet Explorer<\/a>: version 6+<\/li>\n<\/ul>\n<h2>How to Add Google Web Fonts to a Website<\/h2>\n<p>To use Google Web Fonts on a website is easy. Just add the link to the style sheet that links to the Google servers inside your head tags.<\/p>\n<p>[sourcecode language=&#8221;css&#8221;]<br \/>\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;http:\/\/fonts.googleapis.com\/css?family=fontname&quot;&gt;<br \/>\n[\/sourcecode]<\/p>\n<p>Then add the CSS in between the style tags and add to whatever selector you want.<\/p>\n<p>Code Example: There two way to use Google API<\/p>\n<p>Here&#8217;s an example. You can copy and paste the following <a class=\"zem_slink\" title=\"HTML\" rel=\"wikipedia\" href=\"http:\/\/en.wikipedia.org\/wiki\/HTML\">HTML<\/a> code into the index.html.<\/p>\n<p>Option 1:<\/p>\n<p>[sourcecode language=&#8221;css&#8221;]<br \/>\nbody {<br \/>\n        font-family: &#8216;Tangerine&#8217;, serif;<br \/>\n        font-size: 48px;<br \/>\n      }<br \/>\n[\/sourcecode]<\/p>\n<p>Option 2:<\/p>\n<p>[sourcecode language=&#8221;css&#8221;]<br \/>\n&lt;div style=&quot;font-family: &#8216;Font Name&#8217;,serif;&quot;&gt;Your text&lt;\/div&gt;<br \/>\n[\/sourcecode]<\/p>\n<p>Here&#8217;s an example. You can copy and paste the following HTML into an index.html.<\/p>\n<p>[sourcecode language=&#8221;HTML&#8221;]<\/p>\n<p>    &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;http:\/\/fonts.googleapis.com\/css?family=Tangerine&quot;&gt;<br \/>\n    &lt;style&gt;<br \/>\n      body {<br \/>\n        font-family: &#8216;Tangerine&#8217;, serif;<br \/>\n        font-size: 48px;<br \/>\n      }<br \/>\n    &lt;\/style&gt;<\/p>\n<p>    &lt;h1&gt;Making the Web Beautiful!&lt;\/h1&gt;<br \/>\n  [\/sourcecode]<\/p>\n<h5>Making the Web Beautiful!<\/h5>\n<h2>How to Add Google Web Fonts to a WordPress Blog<\/h2>\n<p>As of right now, there are not any plugins that will allow us to simply choose and add an entry into post or restyle the fonts on your site. After some research and testing I was able to use Google Fonts API. I have only figured how to use Google Fonts by adding an entry in the CSS, so the overall fonts will change. I am still looking into how change the font when using the editor.<\/p>\n<p>In order use Google fonts, all you need to do is update your header.php file and style.css. For this example, I changed the H tag. I changed the H5 tag because I rarely use that h tag.<\/p>\n<p><strong><span style=\"color: #ff0000;\">NOTE:<\/span> Before you make any changes to these files, back them up and save a copy on your computer. <\/strong><\/p>\n<p>First thing you will need to do is chose what font you want to use. Then open your header.php file. Appearance &gt;&gt; Editor &gt;&gt; Header.PHP. Inside your head tags, add the following code:<\/p>\n<p>[sourcecode language=&#8221;css&#8221;]<br \/>\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;http:\/\/fonts.googleapis.com\/css?family=fontname&quot;&gt;<br \/>\n[\/sourcecode]<\/p>\n<p>For our example I am using the Tangerine font. So I used the below code.<\/p>\n<p>[sourcecode language=&#8221;css&#8221;]<br \/>\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;http:\/\/fonts.googleapis.com\/css?family=Tangerine&quot;&gt;<br \/>\n[\/sourcecode]<\/p>\n<p>After entering your code, click on update file.<\/p>\n<p>Next, you will need to open the style.css file. Once opened, you can then add the CSS to whatever element you want. Just copy and paste this code in your style sheet. Once the code is added then click update file.<\/p>\n<p>[sourcecode language=&#8221;css&#8221;]<br \/>\nCSS selector {<br \/>\n  font-family: &#8216;Font Name&#8217;, serif;<br \/>\n}<br \/>\n[\/sourcecode]<\/p>\n<p>In our example, I made the change to the H5 tag. To make that change you will need to look at the code and find how the H5 is coded and make the necessary changes. The code I used is:<\/p>\n<p>[sourcecode language=&#8221;css&#8221;]<br \/>\nh5{font-family: &#8216;Tangerine&#8217;, serif;font-size: 48px;text-shadow: 4px 4px 4px #aaa;}<br \/>\n[\/sourcecode]<\/p>\n<h5 style=\"text-align: left;\">Evolutionary\u00a0 Designs<\/h5>\n<p><strong><span style=\"color: #ff0000;\">NOTE:<\/span> text-shadow: 4px 4px #aaa; is adding a shadow, and is not needed. I added this because the font looks good with a drop shadow.<\/strong><\/p>\n<p>That\u2019s it. There nothing else to it. If anyone can figure out how to manually style certain lines in a post entry, please let me know. If you come across any plugins that can make this easier for those that do not want manually code this, please tell us where to find it.<\/p>\n<p><input id=\"gwProxy\" type=\"hidden\" \/><\/p>\n<p><!--Session data--><\/p>\n<p><input id=\"jsProxy\" onclick=\"jsCall();\" type=\"hidden\" \/><\/p>\n<div class=\"zemanta-pixie\" style=\"margin-top: 10px; height: 15px;\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"zemanta-pixie-img\" style=\"border: medium none; float: right;\" src=\"https:\/\/i0.wp.com\/img.zemanta.com\/pixy.gif\" alt=\"\" \/><span class=\"zem-script pretty-attribution\"><script src=\"http:\/\/static.zemanta.com\/readside\/loader.js\" type=\"text\/javascript\"><\/script><\/span><\/div>\n<p><input id=\"gwProxy\" type=\"hidden\" \/> <input id=\"jsProxy\" onclick=\"jsCall();\" type=\"hidden\" \/><\/p>\n<p><input id=\"gwProxy\" type=\"hidden\" \/><input id=\"jsProxy\" onclick=\"jsCall();\" type=\"hidden\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Earlier this week Google released Google Font Directory and Google Font API. Google teamed up with Typekit to create an open sourced Font project. All fonts found in the directory are available for use on any website under an open source license and are served by Google servers. Once in the directory, you can browse [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[14],"tags":[290,120,465,462,461,460,416,463,1481,464],"class_list":["post-802","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-cascading-style-sheets","tag-css","tag-google-font","tag-google-font-api","tag-google-font-directory","tag-google-web-font","tag-open-source","tag-web-fonts","tag-wordpress","tag-wordpress-to-google-web-font","entry"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pJPdG-cW","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/comments?post=802"}],"version-history":[{"count":0,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/802\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/media?parent=802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/categories?post=802"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/tags?post=802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}