{"id":40522,"date":"2014-04-20T18:24:25","date_gmt":"2014-04-20T12:54:25","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=40522"},"modified":"2021-01-07T19:40:09","modified_gmt":"2021-01-07T14:10:09","slug":"remove-google-fonts-lato-twenty-fourteen-wordpress-theme","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2014\/04\/remove-google-fonts-lato-twenty-fourteen-wordpress-theme\/","title":{"rendered":"How to Remove Google Font Lato in Twenty Fourteen Theme"},"content":{"rendered":"<p>Want to remove Google font Lato in your Twenty Fourteen WordPress theme? Is Lato font slowing down your site? Have you noticed how no text content is visible on your site on slow speed internet connections till the Lato font is loaded. We used the amazing <a title=\"New Default Twenty Fourteen WordPress Theme\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/11\/default-twenty-fourteen-wordpress-theme\/\">2014 theme<\/a> and here is the way to do it.<\/p>\n<h2>Slow Loading Lato Font Variants!<\/h2>\n<p>If you see the <em>functions.php<\/em> file of the Twenty Fourteen theme, you will notice that by default it loads 7 Lato font variants!!<\/p>\n<pre style=\"color: #000000;\">function twentyfourteen_font_url() {\r\n\t$font_url = '';\r\n\tif ( 'off' !== _x( 'on', 'Lato font: on or off', 'twentyfourteen' ) ) {\r\n\t\t$font_url = add_query_arg( 'family', urlencode( 'Lato:300,400,700,900,300italic,400italic,700italic' ), \"\/\/fonts.googleapis.com\/css\" );\r\n\t}\r\n\r\n\treturn $font_url;\r\n}<\/pre>\n<p>As it is the Lato font is a slow loading font and has a larger impact on page loading time, and adding 7 variants will have a huge 350 impact if you check the load time impact.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-40524\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/lato-load-time.png\" alt=\"lato font load time\" width=\"500\" height=\"226\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/lato-load-time.png 500w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/lato-load-time-150x67.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/lato-load-time-300x135.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>No wonder your site goes blank on text (also called Flash of Unstyled text) as the HTML loads quickly but the Lato font takes time to load. I recommend you read our tips on how to <a title=\"7 Tips to Load Google Web Fonts Faster\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/10\/load-google-web-fonts-faster\/\">load Google Fonts faster<\/a>.<\/p>\n<h2>1. Reduce Google Lato Font Variants<\/h2>\n<p>If you love the Lato font, an easier way would be to remove some font variants. This will have some design impact but you can reduce the variants.\u00a0You need to edit the code in <em>functions.php<\/em> and reduce the font variants<\/p>\n<p>Instead of loading<br \/>\n<code>Lato:300,400,700,900,300italic,400italic,700italic<\/code><\/p>\n<p>Try loading only the normal and bold variants.<br \/>\n<code>Lato:400,700<\/code><\/p>\n<p>Although this works, some text fonts in places like italics or blockquotes look awkward.<\/p>\n<h2>2. Remove Google Lato Font<\/h2>\n<p>You can remove the Lato font totally, and choose some other style like <a href=\"https:\/\/www.quickonlinetips.com\/archives\/web-safe-fonts-list\/\">web safe Arial font<\/a> which will load instantly. This is what we have done.<\/p>\n<p>Add this code to your child theme at the bottom of the <em>functions.php<\/em> file. [Note that <em>functions.php<\/em> is a very powerful file and wrong changes can bring your site down. Always keep a backup via FTP if needed.)<\/p>\n<pre><code>\/\/ Remove Lato Font\r\nfunction qot_dequeue_fonts() {\r\nwp_dequeue_style( 'twentyfourteen-lato' );\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'qot_dequeue_fonts', 11 );<\/code><\/pre>\n<p>If you are still using the primary WordPress theme, then simply comment out the code. You should always use the child theme to get easier theme updates without ruining custom changes.<\/p>\n<p>Do this and note how fast your site loads with the Twenty Fourteen theme. Try it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to remove Google font Lato in your Twenty Fourteen WordPress theme? Is Lato font slowing down your site? Have&#8230;<\/p>\n","protected":false},"author":4,"featured_media":40524,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49,17],"class_list":["post-40522","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/40522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=40522"}],"version-history":[{"count":0,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/40522\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/40524"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=40522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=40522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=40522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}