{"id":123594,"date":"2013-11-24T11:30:28","date_gmt":"2013-11-24T16:30:28","guid":{"rendered":"http:\/\/wpmu.org\/?p=123594"},"modified":"2013-11-22T01:14:26","modified_gmt":"2013-11-22T06:14:26","slug":"how-to-make-your-wordpress-site-good-lookin-with-google-fonts","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-make-your-wordpress-site-good-lookin-with-google-fonts\/","title":{"rendered":"How To Make Your WordPress Site Good Lookin&#8217; With Google Fonts"},"content":{"rendered":"<p>Well, that&#8217;s the claim that Google itself makes and whilst it might not turn every ugly duckling into a swan, a good font can make a significant improvement.<\/p>\n<p>Google has hundreds of free, open-source, web-ready fonts that you can use to give your WordPress site an instant facelift.<\/p>\n<p>In this WordPress Weekend Project, I&#8217;ll show you a quick and easy way to install Google fonts and transform your site&#8217;s text.<\/p>\n<p><!--more--><\/p>\n<figure id=\"attachment_123602\" class=\"wp-caption aligncenter\" data-caption=\"true\"><a rel=\"lightbox[123594]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/11\/wwp-google-fonts.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123602\" alt=\"Composite Weekend WordPress Project image\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/11\/wwp-google-fonts.png\" width=\"800\" height=\"250\" \/><\/a><figcaption class=\"wp-caption-text\">A quick and easy way to make your site good lookin&#8217;<\/figcaption><\/figure>\n\n<h2>About Google Fonts<\/h2>\n<p>There are currently 629 Google Fonts, which means that it will actually take far longer for you to choose a font then it will to actually implement it on your WordPress site.<\/p>\n<p>The fonts are tied into the CSS for your site and are downloaded from Google as part of the webpage, which does give rise to the possibility of some lag time on the initial download &#8211; you may have experienced this on some sites as the text suddenly changes font.<\/p>\n<p>However, after the initial download, the font is cached in the browser removing the lag for subsequent pages.<\/p>\n<p>Browser compatibility is good:<\/p>\n<ul>\n<li>Google Chrome: version 4.249.4+<\/li>\n<li>Mozilla Firefox: version: 3.5+<\/li>\n<li>Apple Safari: version 3.1+<\/li>\n<li>Opera: version 10.5+<\/li>\n<li>Microsoft Internet Explorer: version 6+<\/li>\n<\/ul>\n<p>Any non-compatible browser will simply fallback to the original font. The fonts also play nicely with Android 2.2+ and iOS 4.2+.<\/p>\n\n<h2>Installing a Google Font<\/h2>\n<h3>Install the Google Typography Plugin<\/h3>\n<p>You can manually update a theme to use a Google Font but, of course, there is a plugin (several actually) so that&#8217;s the path we&#8217;ll take.<\/p>\n<p>We are going to use the <a title=\"Visit the Google Typography page in the Plugin Repository\" href=\"http:\/\/wordpress.org\/plugins\/google-typography\/\" target=\"_blank\">Google Typography plugin<\/a>\u00a0by Eric Alli,\u00a0so either download it from the repository and upload it into your site or simply search for it from your Dashboard&#8217;s plugin page.<\/p>\n<p>NOTE: The plugin&#8217;s compatibility is set to 3.5.2 but I&#8217;ve tested this on 3.7.1 and experienced no issues.<\/p>\n<h3>Pick Your Font<\/h3>\n<p>The Google Typography settings page does have a preview of sorts but it&#8217;s probably easier to pick your font by going to the <a title=\"Visit the Google Fonts page\" href=\"http:\/\/www.google.com\/fonts\" target=\"_blank\">Google Fonts page<\/a>\u00a0and browsing the fonts there.<\/p>\n<figure id=\"attachment_123596\" class=\"wp-caption aligncenter\" data-caption=\"true\"><a rel=\"lightbox[123594]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/11\/google_fonts_page.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123596\" alt=\"Screenshot of Google Fonts font preview\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/11\/google_fonts_page.png\" width=\"700\" height=\"561\" \/><\/a><figcaption class=\"wp-caption-text\">Enough fonts to please even the grumpiest wizard<\/figcaption><\/figure>\n<h3>Applying Your Font To Your WordPress Site<\/h3>\n<figure id=\"attachment_123599\" class=\"wp-caption aligncenter\" data-caption=\"true\"><a rel=\"lightbox[123594]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/11\/google-typography-settings.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123599\" alt=\"Screenshot of the Google Typography plugin settings page\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/11\/google-typography-settings.png\" width=\"700\" height=\"281\" \/><\/a><figcaption class=\"wp-caption-text\">Installing a new font is quick and simple<\/figcaption><\/figure>\n<p>Once you have selected your font, go to your WordPress Dashboard and click on <strong>Appearance &gt; Typography<\/strong> to get to the Google Typography Settings page, and:<\/p>\n<ul>\n<li>Click on <em>Add New<\/em><\/li>\n<li>Select the desired font from the Font Family dropdown (you can start typing and it will find the font)<\/li>\n<li>Change the color if you don&#8217;t want black<\/li>\n<li>Enter an asterisk (*) in the CSS selectors input<\/li>\n<li>Click <em>Save<\/em><\/li>\n<\/ul>\n<p>Now, go to the front end of your site and click on refresh and you should see your site with all text displayed using the new font.<\/p>\n<figure id=\"attachment_123597\" class=\"wp-caption aligncenter\" data-caption=\"true\"><a rel=\"lightbox[123594]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/11\/googlefonts-after.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-123597\" alt=\"Screenshot of the sample page with new font applied\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/11\/googlefonts-after.png\" width=\"700\" height=\"351\" \/><\/a><figcaption class=\"wp-caption-text\">After: All elements are using the new font.<\/figcaption><\/figure>\n<p>That&#8217;s happened because we used the <em>*<\/em> in the CSS selectors. Weight (bold) and size are retained from the original CSS, so this is a really very simple way to make a global font change to your site.<\/p>\n<p>Of course, you can get really specific and apply a completely different font, complete with size and weight, to only certain elements of your site by entering the appropriate CSS selector.<\/p>\n<p>For example, to change just the menu on TwentyTwelve theme, you would enter <em>.nav-menu&gt;ul&gt;li&gt;a<\/em> in the CSS selector input box.<\/p>\n<p>Using multiple fonts allows you to customize to your heart&#8217;s content but don&#8217;t go overboard and don&#8217;t forget that every font needs downloading, so judicious use is the best approach.<\/p>\n<p>Applying fonts really is that easy and it&#8217;s simple to remove them too (either delete the font or deactivate the plugin) so why not spend fifteen minutes this weekend trying to make your site better looking?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google has hundreds of free, open-source, web-ready fonts that you can use to give your WordPress site an instant facelift.<\/p>\n","protected":false},"author":262394,"featured_media":123602,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[973],"tutorials_categories":[],"class_list":["post-123594","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-fonts"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/123594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/262394"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=123594"}],"version-history":[{"count":0,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/123594\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/123602"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=123594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=123594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=123594"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=123594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}