{"id":892,"date":"2022-10-13T08:06:41","date_gmt":"2022-10-13T08:06:41","guid":{"rendered":"https:\/\/oceanthemes.net\/docs\/theratio\/?p=888"},"modified":"2022-10-13T08:06:41","modified_gmt":"2022-10-13T08:06:41","slug":"how-to-add-a-custom-font-for-kirki","status":"publish","type":"post","link":"https:\/\/docs.oceanthemes.site\/archi\/2022\/10\/13\/how-to-add-a-custom-font-for-kirki\/","title":{"rendered":"How to add a custom font for Kirki?"},"content":{"rendered":"\n<p>Open the file in this path\u00a0<strong>\/wp-content\/themes\/theme-folder\/function.php\u00a0<\/strong>using some editor like notepad++.<\/p>\n\n\n\n<p>If you have activated the child theme then open the file in this path\u00a0<strong>\/wp-content\/themes\/childtheme-folder\/function.php<\/strong>\u00a0using some editor like notepad++ and append the below code.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function oceanthemes_custom_fonts( $standard_fonts ){\n  $my_custom_fonts = array();\n  $my_custom_fonts&#091;'kitten'] = array(\n    'label' =&gt; 'kitten',\n    'variants' =&gt; array('regular'),\n    'stack' =&gt; 'kitten, sans-serif',\n  );\n  $my_custom_fonts&#091;'font2'] = array(\n    'label' =&gt; 'Another Font',\n    'variants' =&gt; array('regular','italic','700','700italic'),\n    'stack' =&gt; 'anotherfont, sans-serif',\n  );\n  return array_merge_recursive( $my_custom_fonts, $standard_fonts );\n}\nadd_filter( 'kirki\/fonts\/standard_fonts', 'oceanthemes_custom_fonts', 20 );<\/code><\/pre>\n\n\n\n<p><em><strong>Note: You have to replace the text\u00a0kitten\u00a0as per your need.<\/strong><\/em><\/p>\n\n\n\n<p>You\u2019ve already added your own fonts to the WordPress Typography dropdown. Now you also need to add the fonts to your website.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>1. Create a folder \u201cfonts\u201d in the parent&#8217;s theme (or child theme) and upload your font files (.woff, .woff2, etc.) to the folder \u201cfonts\u201d via FTP.<\/li><li>2. Load your fonts from the style.css file of your theme (child theme) file, using the @font-face method.<\/li><\/ul>\n\n\n\n<p>CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\nfont-family: 'kitten';\nsrc: url('fonts\/kitten_light-webfont.woff2') format('woff2'),\nurl('fonts\/kitten_light-webfont.woff') format('woff');\nfont-weight: normal;\nfont-style: normal;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Open the file in this path\u00a0\/wp-content\/themes\/theme-folder\/function.php\u00a0using some editor like notepad++. If you have activated the child theme then open the file in this path\u00a0\/wp-content\/themes\/childtheme-folder\/function.php\u00a0using some editor like notepad++ and append the below code. Note: You have to replace the text\u00a0kitten\u00a0as per your need. You\u2019ve already added your own fonts to the WordPress Typography dropdown. Now [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-892","post","type-post","status-publish","format-standard","hentry","category-custom-font-for-kirki"],"_links":{"self":[{"href":"https:\/\/docs.oceanthemes.site\/archi\/wp-json\/wp\/v2\/posts\/892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.oceanthemes.site\/archi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.oceanthemes.site\/archi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.oceanthemes.site\/archi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.oceanthemes.site\/archi\/wp-json\/wp\/v2\/comments?post=892"}],"version-history":[{"count":0,"href":"https:\/\/docs.oceanthemes.site\/archi\/wp-json\/wp\/v2\/posts\/892\/revisions"}],"wp:attachment":[{"href":"https:\/\/docs.oceanthemes.site\/archi\/wp-json\/wp\/v2\/media?parent=892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.oceanthemes.site\/archi\/wp-json\/wp\/v2\/categories?post=892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.oceanthemes.site\/archi\/wp-json\/wp\/v2\/tags?post=892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}