{"id":2800,"date":"2019-06-10T09:25:41","date_gmt":"2019-06-10T16:25:41","guid":{"rendered":"http:\/\/www.wellgolly.com\/?p=2800"},"modified":"2019-06-10T09:25:41","modified_gmt":"2019-06-10T16:25:41","slug":"using-open-source-fonts-on-your-web-page","status":"publish","type":"post","link":"https:\/\/www.wellgolly.com\/?p=2800","title":{"rendered":"Using open source fonts on your web page."},"content":{"rendered":"<p>I saw a <a href='https:\/\/nationalparktypeface.com\/Download'>font<\/a> that might be fun on a friend\u2019s national parks website so I wrote up some notes to help them install and use it.<\/p>\n<p>You can put the NationalPark folder in the root of your site. i.e. the same place that the wp-admin, wp-content, \u2026  folders are located or if you think you\u2019ll want to use multiple fonts, create a font folder in the root.<\/p>\n<p>Then add these lines to the end of your CSS file that is located in the theme that you are using. He\u2019s using twentynineteen. It will be a different folder if you aren\u2019t using the twentyninteen style.<\/p>\n<p>\/wp-content\/\/themes\/twentyninteen\/style.css<\/p>\n<p><pre><code class=\"preserve-code-formatting\">\n@font-face {\n font-family: &quot;NationalPark&quot;;\n src: url(&quot;\/fonts\/NationalPark\/NationalPark-Regular.otf&quot;);\n }\n\n.NationalPark {\n&nbsp;&nbsp;font-family: NationalPark;\n}\n\n@font-face {\n font-family: &quot;NationalParkBold&quot;;\n src: url(&quot;\/fonts\/NationalPark\/NationalPark-Heavy.otf&quot;);\n }\n\n.NationalParkBold {\n&nbsp;&nbsp;font-family: NationalParkBold;\n}\n<\/code><\/pre><\/p>\n<p>Call it with <\/p>\n<p><code class=\"preserve-code-formatting\">&lt;h2 class=&#039;NationalParkBold&#039; style=&#039;font-size: 400%;&#039;&gt;<\/code><\/p>\n<h2 class='NationalParkBold' style='font-size: 400%;'>Like This<\/h2>\n<p>or<\/p>\n<p><code class=\"preserve-code-formatting\">&lt;p class=&#039;NationalPark&#039;&gt;<\/code><\/p>\n<p class='NationalPark'>You can also use it in paragraphs, but it doesn\u2019t have the impact like it does with headers. This paragraph is not much different than normal san serif text.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I saw a font that might be fun on a friend\u2019s national parks website so I wrote up some notes to help them install and use it. You can put the NationalPark folder in the root of your site. i.e. the same place that the wp-admin, wp-content, \u2026 folders are located or if you think &hellip; <a href=\"https:\/\/www.wellgolly.com\/?p=2800\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Using open source fonts on your web page.<\/span><\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-2800","post","type-post","status-publish","format-standard","hentry","category-html-and-css"],"_links":{"self":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/2800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2800"}],"version-history":[{"count":11,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/2800\/revisions"}],"predecessor-version":[{"id":2811,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/2800\/revisions\/2811"}],"wp:attachment":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}