{"id":246,"date":"2021-04-22T08:40:22","date_gmt":"2021-04-22T08:40:22","guid":{"rendered":"https:\/\/utillz.com\/docs\/brikk\/2021\/04\/22\/how-to-change-the-body-and-heading-fonts\/"},"modified":"2021-10-10T11:56:38","modified_gmt":"2021-10-10T11:56:38","slug":"custom-fonts","status":"publish","type":"post","link":"https:\/\/utillz.com\/docs\/brikk\/custom-fonts\/","title":{"rendered":"Custom fonts"},"content":{"rendered":"<p>If you like to use your own font, you can easily manage this. First, open the <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener\">Google Font library<\/a> and pick a font.<\/p>\n<ul>\n<li>Then, Navigate to your admin dashboard, and go to <strong>Listing Types <i class=\"material-icon-arrow_right_alt __arrow\"><\/i> Theme Settings <i class=\"material-icon-arrow_right_alt __arrow\"><\/i> Site <i class=\"material-icon-arrow_right_alt __arrow\"><\/i> Fonts<\/strong><\/li>\n<li>Go to <a href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a> and pick some font you like. We will use <strong>Poppins<\/strong> for this example.<\/li>\n<li>Select the weights of the font and copy the font declaration only: <strong><strong>Poppins:wght@400;700<\/strong><\/strong><br \/>\n\u00e2\u20ac\u2039<img loading=\"lazy\" class=\"alignnone size-full wp-image-248\" src=\"https:\/\/utillz.com\/docs\/brikk\/wp-content\/uploads\/sites\/4\/2021\/09\/Poppins-Google-Fonts.png\" alt=\"\" width=\"391\" height=\"462\" srcset=\"https:\/\/utillz.com\/docs\/brikk\/wp-content\/uploads\/sites\/4\/2021\/09\/Poppins-Google-Fonts.png 391w, https:\/\/utillz.com\/docs\/brikk\/wp-content\/uploads\/sites\/4\/2021\/09\/Poppins-Google-Fonts-254x300.png 254w\" sizes=\"(max-width: 391px) 100vw, 391px\" \/><\/li>\n<li>Copy and paste the font declaration into the font field:<\/li>\n<li>Now that you have loaded the font, navigate to <strong>Appearance <i class=\"material-icon-arrow_right_alt __arrow\"><\/i> Customize <i class=\"material-icon-arrow_right_alt __arrow\"><\/i> Additional CSS<\/strong>, and add the following CSS code:\n<pre>:root {\r\n    --font-heading: 'Poppins'; \/\/ use for the heading font\r\n    --font-body: 'Open Sans'; \/\/ use for the body font\r\n}<\/pre>\n<\/li>\n<\/ul>\n<p>For self-hosted fonts, you can use 3rd party plugins like <a href=\"https:\/\/wordpress.org\/plugins\/custom-fonts\/\" target=\"_blank\" rel=\"noopener\">this one<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you like to use your own font, you can easily manage this. First, open the Google Font library and pick a font. Then, Navigate &#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/utillz.com\/docs\/brikk\/wp-json\/wp\/v2\/posts\/246"}],"collection":[{"href":"https:\/\/utillz.com\/docs\/brikk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/utillz.com\/docs\/brikk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/utillz.com\/docs\/brikk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/utillz.com\/docs\/brikk\/wp-json\/wp\/v2\/comments?post=246"}],"version-history":[{"count":0,"href":"https:\/\/utillz.com\/docs\/brikk\/wp-json\/wp\/v2\/posts\/246\/revisions"}],"wp:attachment":[{"href":"https:\/\/utillz.com\/docs\/brikk\/wp-json\/wp\/v2\/media?parent=246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/utillz.com\/docs\/brikk\/wp-json\/wp\/v2\/categories?post=246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/utillz.com\/docs\/brikk\/wp-json\/wp\/v2\/tags?post=246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}