{"id":2481,"date":"2013-03-06T14:53:04","date_gmt":"2013-03-06T14:53:04","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/03\/06\/313-add-google-fonts\/"},"modified":"2024-03-11T11:39:34","modified_gmt":"2024-03-11T15:39:34","slug":"add-google-fonts","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/","title":{"rendered":"How to use Google Web Fonts for your builder"},"content":{"rendered":"<p>One of the most frequent questions we see when working with the builder is about whether the title or subtitle fonts in the header area can be changed. The answer is both Yes and No. No, it cannot be changed from within the builder itself as it is hard coded as part of your selected theme. Yes, it can be changed after you publish the site up to the server. This article will show you a way to alter the title font using Google\u2019s list of free web fonts.<\/p>\n<div class=\"alert\">A word of caution before performing this task, making any changes outside the builder are means the builder server is unaware of them. When you republish your site, all changes made outside the builder will be lost. To prevent you from having to do this over again, you will want to make note of any files you change and save a copy of them either in another directory or on your local machine as a backup. Once you republish the site, you can upload or move these files back into their original places, overwriting the builder version, to restore your desired changes.<\/div>\n<p><a href=\"\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1.png\" rel=\"lightbox-0\"><img decoding=\"async\" width=\"1019\" height=\"341\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1.png\" class=\"optimized-lcp-image\" alt=\"sample of subtitle\" loading=\"eager\" fetchpriority=\"high\" sizes=\"(max-width: 768px) 100vw, 768px\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1.png 1019w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1-300x100.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1-768x257.png 768w\"><\/a><\/p>\n<div style=\"clear: both;\"><\/div>\n<p>The area we will be working with in this tutorial is the subtitle area of your template. This is text that is most commonly found under the site title. Our example use the title \u2018<em>Greetings!<\/em>\u2018 and the subtitle states \u2018<em>This is a subtitle<\/em>\u2018. That smaller subtitle will be the one we will alter with the fonts.<\/p>\n<div style=\"clear: both;\"><\/div>\n<h2>Getting the files ready<\/h2>\n<ol class=\"article_list\">\n<li>Since you will be working with your live builder site, you must first have created and <a href=\"\/support\/website\/publishing-your-website\/\">published the site to your hosting account<\/a>.<\/li>\n<li>While it is a good idea to create a backup of your website, as we will be modifying some files, the builder site can always be republished to its last saved state which will overwrite any changes you made. Still, if you wish to <a href=\"\/support\/website\/backing-up-your-cpanel\/\">make yet another backup<\/a>, feel free. There is no such thing as being too safe.<\/li>\n<li>Now you will need to <a href=\"\/support\/edu\/cpanel\/how-to-log-into-cpanel\/\">log into the cPanel dashboard<\/a>.<\/li>\n<li>From the main cPanel area, <a href=\"\/support\/edu\/cpanel\/using-file-manager-in-cpanel\/\">use the <strong>File Manager<\/strong> too<\/a>l to access the area where your builder site files are published. If you are using the builder for your main domain, you will want to be in the <em>public_html<\/em> folder.<\/li>\n<li>You will be editing two different files in this tutorial. Locate the <strong>index.php<\/strong> file in the root folder of your builder and the <strong>styles.css<\/strong> file, which is located in the <strong>styles<\/strong> folder. <a href=\"\/support\/website\/how-to-edit-a-file\/\">Open each file for editing<\/a>.<\/li>\n<\/ol>\n<h2>Getting your desired Google font code<\/h2>\n<ol class=\"article_list\">\n<li>Now that we have prepared the files for editing, open a separate browser window or tab and visit the <em>Google Web Fonts. <\/em> page. There are many fonts listed here, scroll through the page and choose the <strong>Add to collection <\/strong>button for any that you want to keep.\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_review-fonts.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"std_ss\" style=\"margin: 0px 0px 15px 15px; max-width: 200px; float: right;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_review-fonts.png\" alt=\"review selected Google fonts\" width=\"1226\" height=\"592\"><\/a>\n<div style=\"clear: both;\"><\/div>\n<p>After selecting your desired fonts click on <strong>Review<\/strong> button to see the selected fonts side by side. You can see them in different sizes so you can understand how it may look on your site.<\/p>\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_step1.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"std_ss\" style=\"max-width: 200px; margin: 0px 0px 15px 15px; float: right;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_step1.png\" alt=\"Step One - choose the styles you want\" width=\"1035\" height=\"456\"><\/a>\n<div style=\"clear: both;\"><\/div>\n<p>Once you are happy with your selection, click on <strong>Use <\/strong> button. This will bring you to the next phase, which has a number of steps. <em>Step One<\/em> is entitled <strong>Choose the styles you want<\/strong>. From your list of fonts, select the ones you want to include in the code that will be generated. As adding fonts can impact the load time of your site, there is a neat little gauge next to the list that shows how the fonts will increase load time. Obviously, selecting more options adds to the impact.<\/p>\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_step2.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"std_ss\" style=\"margin: 0px 0px 15px 5px; max-width: 200px; float: right;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_step2.png\" alt=\"Step two - choose the character sets you want\" width=\"200\" height=\"37\"><\/a>\n<div style=\"clear: both;\"><\/div>\n<p>Next, look to <em>Step Two<\/em>, named <strong>Choose the character sets you want<\/strong>. This automatically includes the Latin set. If you need to use an extended character set, then you will be able to select it, if it is available for your fonts. Select the checkbox if you wish to add an available set.<\/p>\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_step3.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"std_ss\" style=\"margin: 0px 0px 15px 15px; max-width: 200px; float: right;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_step3.png\" alt=\"Step three - Add this code to your website\" width=\"200\" height=\"48\"><\/a>\n<div style=\"clear: both;\"><\/div>\n<p>Now, on to <em>Step Three<\/em>, where you will obtain the code to add to your website. There are three tabs on this step <strong>Standard<\/strong>, <strong>@import<\/strong>, and <strong>Javascript<\/strong>.These are for different code formats, however, we will go with the standard. Highlight the code in the box and copy it to your clipboard using <em>ctrl+c<\/em>.<\/p>\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_edit-index.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"std_ss\" style=\"margin: 0px 0px 15px 15px; max-width: 200px; float: right;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_edit-index.png\" alt=\"index page code edit\" width=\"1160\" height=\"308\"><\/a>\n<div style=\"clear: both;\"><\/div>\n<p>Remember the code editor screen you have open for the <strong>index.php<\/strong> file? Locate that screen and search for the <strong>&lt;head&gt;<\/strong> tag. Paste the code immediately after that tag, no spaces necessary. A quick example is shown below:<\/p>\n<div class=\"code_block\" style=\"max-width: 500px;\">&lt;html&gt;&lt;head&gt;&lt;link href=\u2019https:\/\/fonts.googleapis.com\/css?family=Wendy+One\u2019 rel=\u2019stylesheet\u2019 type=\u2019text\/css\u2019&gt;<\/div>\n<p>Once pasted, save the changes by clicking the <strong>Save Changes <\/strong>button from the upper right corner.<\/p>\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_step4.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"std_ss\" style=\"margin: 0px 0px 15px 15px; max-width: 200px; float: right;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_step4.png\" alt=\"Step four - Integrate the fonts into your CSS\" width=\"1037\" height=\"247\"><\/a>\n<div style=\"clear: both;\"><\/div>\n<p>After pasting the code in the index.php file, go back to the Google web fonts page and go to <em>Step Four<\/em>, entitled <strong>Integrate the fonts into your CSS<\/strong>. Copy the code displayed in the step, again with <em>ctrl+c<\/em>.<\/p>\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_css-edit.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"std_ss\" style=\"margin: 0px 0px 15px 15px; max-width: 200px; float: right;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_css-edit.png\" alt=\"edit the css code\" width=\"1226\" height=\"239\"><\/a>\n<div style=\"clear: both;\"><\/div>\n<p>Find the screen tab with the code editor for your <strong>styles.css<\/strong> file. Locate the line of code that begins with the <strong>.slogan<\/strong> identifier. Paste the copied code at the end of the line, but before the <strong>}<\/strong> character. There is an example below to demonstrate. Note that you may need to increase the<strong> font-size:<\/strong> attribute. We increased the example from 9pt to 14pt.<\/p>\n<div class=\"code_block\" style=\"max-width: 450px;\">.slogan { font-weight: bold; font-size: 14pt;<br>\nfont-family: Arial; color: #CDD5EA;<br>\nfont-family: \u2018Wendy One\u2019, sans-serif;}<\/div>\n<p>As with the <em>index.php<\/em> file, save the changes by clicking the <strong>Save Changes<\/strong> button from the upper right corner.<\/p>\n<p><strong>Note:<\/strong> If you wish to edit the <em>styles.css<\/em> file for the title itself, perform the same action for the <strong>.company<\/strong> identifier.<\/p><\/li>\n<\/ol>\n<p>Your new font should now appear on your website. Visit to see the results. Below is our test page showing a before and after comparison.<\/p>\n<table class=\"article_table\">\n<tbody>\n<tr>\n<th>Before<\/th>\n<th>After<\/th>\n<\/tr>\n<tr>\n<td><a href=\"\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_before.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"std_ss\" style=\"max-width: 200px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_before.png\" alt=\"before the title change\" width=\"1019\" height=\"341\"><\/a>\n<div style=\"clear: both;\"><\/div>\n<\/td>\n<td><a href=\"\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_after1.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"std_ss\" style=\"max-width: 200px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_after1.png\" alt=\"after the font change\" width=\"1298\" height=\"329\"><\/a>\n<div style=\"clear: both;\"><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>One of the most frequent questions we see when working with the builder is about whether the title or subtitle fonts in the header area can be changed. The answer is both Yes and No. No, it cannot be changed from within the builder itself as it is hard coded as part of your selected<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/\"> Read More ><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4322,4288],"tags":[],"class_list":["post-2481","post","type-post","status-publish","format-standard","hentry","category-google-tools","category-website"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to use Google Web Fonts for your builder | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Having a hard time reading the title or subtitle? Learn how to use Google fonts for your builder site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Google Web Fonts for your builder | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Having a hard time reading the title or subtitle? Learn how to use Google fonts for your builder site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-03-06T14:53:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-11T15:39:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1.png\" \/>\n<meta name=\"author\" content=\"Scott Mitchell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Scott Mitchell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/\"},\"author\":{\"name\":\"Scott Mitchell\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed\"},\"headline\":\"How to use Google Web Fonts for your builder\",\"datePublished\":\"2013-03-06T14:53:04+00:00\",\"dateModified\":\"2024-03-11T15:39:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/\"},\"wordCount\":985,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1.png\",\"articleSection\":[\"Google Tools\",\"Website\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/\",\"name\":\"How to use Google Web Fonts for your builder | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1.png\",\"datePublished\":\"2013-03-06T14:53:04+00:00\",\"dateModified\":\"2024-03-11T15:39:34+00:00\",\"description\":\"Having a hard time reading the title or subtitle? Learn how to use Google fonts for your builder site.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1.png\",\"width\":1019,\"height\":341,\"caption\":\"sample of subtitle\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Google Web Fonts for your builder\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed\",\"name\":\"Scott Mitchell\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/scott\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Google Web Fonts for your builder | InMotion Hosting","description":"Having a hard time reading the title or subtitle? Learn how to use Google fonts for your builder site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/","og_locale":"en_US","og_type":"article","og_title":"How to use Google Web Fonts for your builder | InMotion Hosting","og_description":"Having a hard time reading the title or subtitle? Learn how to use Google fonts for your builder site.","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2013-03-06T14:53:04+00:00","article_modified_time":"2024-03-11T15:39:34+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1.png","type":"","width":"","height":""}],"author":"Scott Mitchell","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Scott Mitchell","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/"},"author":{"name":"Scott Mitchell","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed"},"headline":"How to use Google Web Fonts for your builder","datePublished":"2013-03-06T14:53:04+00:00","dateModified":"2024-03-11T15:39:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/"},"wordCount":985,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1.png","articleSection":["Google Tools","Website"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/","name":"How to use Google Web Fonts for your builder | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1.png","datePublished":"2013-03-06T14:53:04+00:00","dateModified":"2024-03-11T15:39:34+00:00","description":"Having a hard time reading the title or subtitle? Learn how to use Google fonts for your builder site.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/03\/edu_pwb_add-google-font_sample1.png","width":1019,"height":341,"caption":"sample of subtitle"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/add-google-fonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to use Google Web Fonts for your builder"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed","name":"Scott Mitchell","url":"https:\/\/www.inmotionhosting.com\/support\/author\/scott\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=2481"}],"version-history":[{"count":5,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2481\/revisions"}],"predecessor-version":[{"id":108961,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2481\/revisions\/108961"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=2481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=2481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=2481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}