{"id":2203,"date":"2020-05-19T21:01:57","date_gmt":"2020-05-19T21:01:57","guid":{"rendered":"https:\/\/www.copahost.com\/blog\/?p=2203"},"modified":"2020-05-31T14:17:52","modified_gmt":"2020-05-31T14:17:52","slug":"custom-google-fonts","status":"publish","type":"post","link":"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/","title":{"rendered":"How to use custom Google Fonts in HTML5"},"content":{"rendered":"<p>In this article, we will learn How to Use<strong> Custom Google Fonts<\/strong> on your website with <strong>HTML5<\/strong>.<\/p>\n<p>This article is based on the video recorded by <strong>Gustavo Gallas<\/strong>, from <a href=\"http:\/\/copahost.com\">Copahost<\/a>. We recommend that you watch.<\/p>\n<p><iframe title=\"Google fonts: how to use in your website | CSS and Style\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/EvlXgI57UZs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>So, the topics of this article are:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#top01\">How to use Custom Google Fonts on our HTML5 Website<br \/>\n<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#top02\">Setting the font family with CSS<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#top03\">Setting the font family for different HTML elements<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#top04\">Other fonts from Custom Google Fonts<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#top05\">How to change the font size<\/a><\/li>\n<\/ul>\n<p><a name=\"top01\"><\/a><\/p>\n<h2>How to use Custom Google Fonts on our HTML5 Website<\/h2>\n<p>To find the font you want, you should access the <strong>Google Fonts<\/strong>. You can browse for Google Fonts at <a href=\"https:\/\/fonts.google.com\/\">fonts.google.com<\/a>. There are many <a href=\"https:\/\/www.copahost.com\/blog\/cheap-web-hosting-plans\/\" >options of fonts you can choose<\/a> for use in your HTML5 Website.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-2206 size-full\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/CopaHost-Video-Access-of-Custom-Google-Fonts-Website.jpg\" alt=\"CopaHost Video - Access of Google Fonts Website\" width=\"1920\" height=\"1080\" \/><\/p>\n<p>In this article, we will use the <strong>Pacifico<\/strong> Font. Gustavo Gallas uses the <a href=\"https:\/\/www.copahost.com\/blog\/html-image\/\" >example of the website as the image<\/a> below, initially, without a custom font set:<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2209 size-full\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/CopaHost-Video-Website-Without-custom-google-font.jpg\" alt=\"CopaHost Video - Website With default font.\" width=\"1920\" height=\"1080\" \/><\/p>\n<p>Now, you should choose a font, and then you&#8217;ll have to link this font in your Website head. To do that, we will use the <a href=\"https:\/\/www.copahost.com\/blog\/html-link\/\">link tag<\/a> &#8220;<strong>&lt;link&gt;<\/strong>&#8220;.<\/p>\n<p>Remember: this link must be placed in the <strong>head<\/strong> of your <a href=\"https:\/\/www.copahost.com\/blog\/html-file-hosting\/\" >HTML file<\/a>.<\/p>\n<p>We choose the Pacifico font. To find it, let&#8217;s just write down the font name Pacifico in Google Fonts Search Box. Like the image below:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-2207\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/Search-for-Pacifico-in-Google-Fonts.jpg\" alt=\"Search for Pacifico in Google Fonts\" width=\"524\" height=\"613\" \/><\/p>\n<p>Now, we should copy this link from google fonts and paste on our head link.<\/p>\n<pre class=\"lang:default decode:true\">&lt;link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css?family=\"&gt;\r\n<\/pre>\n<p>After that, inside the <strong>href<\/strong> attribute, we must add the Source name to the right of the &#8220;<strong>Family<\/strong>&#8221; parameter. This name must be exactly the same as that found on Google Fonts. The copy of our link tag should be like this:<\/p>\n<pre class=\"lang:default decode:true \">&lt;link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css?family=Pacifico\"&gt;<\/pre>\n<p><a name=\"top02\"><\/a><\/p>\n<h3>Setting the font family with CSS<\/h3>\n<p>So now we have just linked the <a href=\"https:\/\/www.copahost.com\/blog\/font-color-html\/\" >font to our HTML<\/a> Website.<\/p>\n<p>But, we don&#8217;t set anything yet. For do that, we must make the changes using a CSS Style Sheet. With this, we tell our browser that we want to use this font on our web page.<br \/>\nTo do that, you should use the style tag &#8220;<strong>&lt;style&gt;&lt;\/style&gt;<\/strong>&#8220;.<\/p>\n<p>So it is a small style sheet we will use to set a font to HTML body. Body means the body of the HTML file.<\/p>\n<p>To set this, we will use the attribute <strong>font family<\/strong> with the Pacifico value, which is the font we have just linked from Google.<\/p>\n<pre class=\"lang:default decode:true\">&lt;style&gt;\r\n    body {\r\n        font-family:Pacifico;\r\n    }\r\n&lt;\/style&gt;<\/pre>\n<p>After that, when we save the page and reload it, we can see how it looks like with the new font Pacifico.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2208\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/CopaHost-Video-Website-With-Pacifico-custom-google-font.jpg\" alt=\"CopaHost Video - Website With Pacifico custom google font\" width=\"1920\" height=\"1080\" \/><br \/>\n<a name=\"top03\"><\/a><\/p>\n<h3>Setting the font family for different HTML elements<\/h3>\n<p>In the example webpage, we have a simple structure. We have only a <strong>header tag<\/strong>, an <strong>h1<\/strong> tag, and then, a <strong>paragraph tag<\/strong>.<\/p>\n<p>We set the font family for all website body. But, let&#8217;s say you only want to apply this font to the heading tag, not to the paragraph. In this case, you must go in the style and place h1, which is the equivalent of the heading tag used. This way, placing in h1 instead of body, we&#8217;re telling the browser only to apply this font to the h1 tag. The code must be like the code below:<\/p>\n<pre class=\"lang:default decode:true \">&lt;style&gt;\r\n    h1{\r\n        font-family:Pacifico;\r\n    }\r\n&lt;\/style&gt;<\/pre>\n<p>Now, we have the paragraph with the standard font and the heading tag, the H1, with the new font. Then, this is how it must looks like:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2211\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/CopaHost-Video-Website-With-Pacifico-custom-google-font-on-h1-title-tag.jpg\" alt=\"CopaHost Video - Website With Pacifico custom google font on h1 title tag\" width=\"1920\" height=\"1080\" \/><\/p>\n<p>For instance, if you want the opposite, to apply only the font to the paragraph, not to the heading, it would place P instead of the h1.<\/p>\n<pre class=\"lang:default decode:true \">&lt;style&gt;\r\n    p{\r\n        font-family:Pacifico;\r\n    }\r\n&lt;\/style&gt;<\/pre>\n<p>As we have the text with the P tag it will apply only to this paragraph. So, that&#8217;s it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2212\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/CopaHost-Video-Website-With-Pacifico-custom-google-font-on-p-paragraph-tag.jpg\" alt=\"CopaHost Video - Website With Pacifico custom google font on p paragraph tag\" width=\"1920\" height=\"1080\" \/><br \/>\n<a name=\"top04\"><\/a><\/p>\n<h2>How to use other fonts from Custom Google Fonts<\/h2>\n<p>So if you want to use a different font from Custom Google Fonts you should only change the font name in the &#8220;family&#8221; parameter.<\/p>\n<p>To explain it better let&#8217;s link a second font from Custom Google Fonts. Firstly, let&#8217;s copy the link tag used before.<\/p>\n<pre class=\"lang:default decode:true \">&lt;link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css?family=\"&gt;<\/pre>\n<p>Then, we&#8217;ll come back to Google and choose another font. In this example, we choose <strong>Amatic SC<\/strong> font.<\/p>\n<p>Finally, we just have to place Amatic SC, which is the font name, in the family parameter. Like the code below:<\/p>\n<pre class=\"lang:default decode:true\">&lt;link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css?family='Amatic SC'\"&gt;<\/pre>\n<p>Now we have configured for the P, for the paragraph, the font Pacifico, which is linked before. Now we are going to place for the h1 the other font called Amatic SC.<\/p>\n<p>We are willing to place the font family, then we are going to reference this way the font.<\/p>\n<pre class=\"lang:default decode:true \">&lt;style&gt;\r\n    p{\r\n        font-family:Pacifico;\r\n    }\r\n    h1{\r\n        font-family:'Amatic SC';\r\n    }\r\n&lt;\/style&gt;<\/pre>\n<p>Remember that the font name has always to be equal to the font linked. If you place a different name, of course, it won&#8217;t work. And also, these link tags and also the style tag must be inside the head tag.<\/p>\n<p>So we have now for the P for the paragraph, the font Pacifico from Custom Google Fonts, and for the h1, the heading tag, we have the font Amatic SC, also from Custom Google Fonts. So, now we have a different font in heading and a different font in the paragraph.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2213 size-full\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/CopaHost-Video-Website-With-differents-custom-google-font-on-h1-and-p-tag.jpg\" alt=\"CopaHost Video - Website With differents fonts on h1 and p tag\" width=\"1920\" height=\"1080\" \/><br \/>\n<a name=\"top05\"><\/a><\/p>\n<h2>How to change the font size<\/h2>\n<p>You can also change the font size for instance. You can simply add the font-size attribute to the style sheet. Let&#8217;s try to change the P font size to 8px.<\/p>\n<pre class=\"lang:default decode:true\">&lt;style&gt;\r\n    p{\r\n        font-family:Pacifico;\r\n        font-size:8px;\r\n    }\r\n    h1{\r\n        font-family:'Amatic SC';\r\n    }\r\n&lt;\/style&gt;<\/pre>\n<p>So, now, the paragraph font size will be so small.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2215\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/CopaHost-Video-Change-font-size.jpg\" alt=\"CopaHost Video - Change font size of p\" width=\"1920\" height=\"1080\" \/><\/p>\n<p>For the heading, let&#8217;s make a bigger size. 50 pixels so.<\/p>\n<pre class=\"lang:default decode:true \">&lt;style&gt;\r\n    p{\r\n        font-family:Pacifico;\r\n        font-size:8px;\r\n    }\r\n    h1{\r\n        font-family:'Amatic SC';\r\n        font-size:50px;\r\n    }\r\n&lt;\/style&gt;<\/pre>\n<p>Now, it&#8217;s bigger than before.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2214\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/CopaHost-Video-Change-font-size-of-h1-and-p.jpg\" alt=\"CopaHost Video - Change font size of h1 and p\" width=\"1920\" height=\"1080\" \/><\/p>\n<p>So this is how to use <a href=\"https:\/\/www.copahost.com\/blog\/google-website-hosting\/\" >google fonts on your website<\/a>. It&#8217;s very easy. If you have any questions you can just comment in this article.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we will learn How to Use Custom Google Fonts on your website with HTML5. This article is based on the video recorded by Gustavo Gallas, from Copahost. We recommend that you watch. So, the topics of this article are: How to use Custom Google Fonts on our HTML5 Website Setting the font [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":2217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[150,114],"tags":[155,159,156,56,158,157,160],"class_list":["post-2203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-other-tutorials","tag-css","tag-custom-font","tag-font","tag-google","tag-google-font","tag-google-fonts","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use custom Google Fonts in HTML5 - Copahost<\/title>\n<meta name=\"description\" content=\"In this article, we will learn How to Use Custom Google Fonts on your website with HTML5 and CSS. It&#039;s very easy. Come to learn!\" \/>\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.copahost.com\/blog\/custom-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 custom Google Fonts in HTML5 - Copahost\" \/>\n<meta property=\"og:description\" content=\"In this article, we will learn How to Use Custom Google Fonts on your website with HTML5 and CSS. It&#039;s very easy. Come to learn!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"Copahost\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-19T21:01:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-31T14:17:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/How-to-Use-Custom-Google-Fonts-on-your-HTML5-Website.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1120\" \/>\n\t<meta property=\"og:image:height\" content=\"440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rafael Marques\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rafael Marques\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/\"},\"author\":{\"name\":\"Rafael Marques\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/1d2394d0fe0aa6712bab970668feb112\"},\"headline\":\"How to use custom Google Fonts in HTML5\",\"datePublished\":\"2020-05-19T21:01:57+00:00\",\"dateModified\":\"2020-05-31T14:17:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/\"},\"wordCount\":950,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/How-to-Use-Custom-Google-Fonts-on-your-HTML5-Website.jpg\",\"keywords\":[\"css\",\"custom font\",\"font\",\"google\",\"google font\",\"google fonts\",\"html\"],\"articleSection\":[\"HTML\",\"Other tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/\",\"url\":\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/\",\"name\":\"How to use custom Google Fonts in HTML5 - Copahost\",\"isPartOf\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/How-to-Use-Custom-Google-Fonts-on-your-HTML5-Website.jpg\",\"datePublished\":\"2020-05-19T21:01:57+00:00\",\"dateModified\":\"2020-05-31T14:17:52+00:00\",\"description\":\"In this article, we will learn How to Use Custom Google Fonts on your website with HTML5 and CSS. It's very easy. Come to learn!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#primaryimage\",\"url\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/How-to-Use-Custom-Google-Fonts-on-your-HTML5-Website.jpg\",\"contentUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/How-to-Use-Custom-Google-Fonts-on-your-HTML5-Website.jpg\",\"width\":1120,\"height\":440,\"caption\":\"How to Use Custom Google Fonts on your HTML5 Website\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.copahost.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use custom Google Fonts in HTML5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#website\",\"url\":\"https:\/\/www.copahost.com\/blog\/\",\"name\":\"Copahost\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.copahost.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#organization\",\"name\":\"Copahost\",\"url\":\"https:\/\/www.copahost.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png\",\"contentUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png\",\"width\":223,\"height\":40,\"caption\":\"Copahost\"},\"image\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/1d2394d0fe0aa6712bab970668feb112\",\"name\":\"Rafael Marques\",\"description\":\"Brazilian Web Developer and Writer!\",\"sameAs\":[\"https:\/\/ialife.com.br\/\",\"https:\/\/www.instagram.com\/rafamarquesrmb\/\",\"https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/\"],\"url\":\"https:\/\/www.copahost.com\/blog\/author\/rafael\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use custom Google Fonts in HTML5 - Copahost","description":"In this article, we will learn How to Use Custom Google Fonts on your website with HTML5 and CSS. It's very easy. Come to learn!","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.copahost.com\/blog\/custom-google-fonts\/","og_locale":"en_US","og_type":"article","og_title":"How to use custom Google Fonts in HTML5 - Copahost","og_description":"In this article, we will learn How to Use Custom Google Fonts on your website with HTML5 and CSS. It's very easy. Come to learn!","og_url":"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/","og_site_name":"Copahost","article_published_time":"2020-05-19T21:01:57+00:00","article_modified_time":"2020-05-31T14:17:52+00:00","og_image":[{"width":1120,"height":440,"url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/How-to-Use-Custom-Google-Fonts-on-your-HTML5-Website.jpg","type":"image\/jpeg"}],"author":"Rafael Marques","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Rafael Marques","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#article","isPartOf":{"@id":"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/"},"author":{"name":"Rafael Marques","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/1d2394d0fe0aa6712bab970668feb112"},"headline":"How to use custom Google Fonts in HTML5","datePublished":"2020-05-19T21:01:57+00:00","dateModified":"2020-05-31T14:17:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/"},"wordCount":950,"commentCount":0,"publisher":{"@id":"https:\/\/www.copahost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/How-to-Use-Custom-Google-Fonts-on-your-HTML5-Website.jpg","keywords":["css","custom font","font","google","google font","google fonts","html"],"articleSection":["HTML","Other tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/","url":"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/","name":"How to use custom Google Fonts in HTML5 - Copahost","isPartOf":{"@id":"https:\/\/www.copahost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#primaryimage"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/How-to-Use-Custom-Google-Fonts-on-your-HTML5-Website.jpg","datePublished":"2020-05-19T21:01:57+00:00","dateModified":"2020-05-31T14:17:52+00:00","description":"In this article, we will learn How to Use Custom Google Fonts on your website with HTML5 and CSS. It's very easy. Come to learn!","breadcrumb":{"@id":"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.copahost.com\/blog\/custom-google-fonts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#primaryimage","url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/How-to-Use-Custom-Google-Fonts-on-your-HTML5-Website.jpg","contentUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2020\/05\/How-to-Use-Custom-Google-Fonts-on-your-HTML5-Website.jpg","width":1120,"height":440,"caption":"How to Use Custom Google Fonts on your HTML5 Website"},{"@type":"BreadcrumbList","@id":"https:\/\/www.copahost.com\/blog\/custom-google-fonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.copahost.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use custom Google Fonts in HTML5"}]},{"@type":"WebSite","@id":"https:\/\/www.copahost.com\/blog\/#website","url":"https:\/\/www.copahost.com\/blog\/","name":"Copahost","description":"","publisher":{"@id":"https:\/\/www.copahost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.copahost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.copahost.com\/blog\/#organization","name":"Copahost","url":"https:\/\/www.copahost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png","contentUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png","width":223,"height":40,"caption":"Copahost"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/1d2394d0fe0aa6712bab970668feb112","name":"Rafael Marques","description":"Brazilian Web Developer and Writer!","sameAs":["https:\/\/ialife.com.br\/","https:\/\/www.instagram.com\/rafamarquesrmb\/","https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/"],"url":"https:\/\/www.copahost.com\/blog\/author\/rafael\/"}]}},"_links":{"self":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/2203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/comments?post=2203"}],"version-history":[{"count":9,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/2203\/revisions"}],"predecessor-version":[{"id":2535,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/2203\/revisions\/2535"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/media\/2217"}],"wp:attachment":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/media?parent=2203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/categories?post=2203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/tags?post=2203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}