Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations.<\/p>\n\n\n\n
Find and download the font from Google Fonts<\/a>. If it’s a “Variable” font, you’ll probably want a single font file such as PlayfairDisplay-VariableFont_wght.ttf<\/code> and optionally PlayfairDisplay-Italic-VariableFont_wght.ttf<\/code>.<\/p>\n<\/details>\n\n\n\nInter variable font<\/summary>\nInter is a really popular modern font you can get from Google Fonts<\/a> (or Bunny Fonts<\/a>), load it from rsms.me\/inter<\/a> CDN sponsored by Cloudflare<\/a> or self-host it. To self-host<\/strong>, first download it from https:\/\/rsms.me\/inter\/download\/<\/a> and find the InterVariable.woff2<\/code> from the web<\/code> directory of the zip file.<\/p>\n<\/details>\n\n\n\nCustom font<\/summary>\nIf you have a font from another source they usually come with specific instructions about which files and CSS to use – adapt it accordingly.<\/p>\n<\/details>\n\n\n\nSystem font<\/summary>\nDo you even need a font? Best performance and least hassle – try a system font from System Font Stack<\/a>. These will look slightly different depending on the operating system the user is using, how ever.<\/p>\n<\/details>\n<\/div>\n\n\n\nSelf-hosting a font<\/h2>\n\n\n\nFor this example, let’s set up the Inter variable font.<\/p>\n\n\n\n1. Prepare the child theme<\/h3>\n\n\n\nCreate a fonts<\/code> directory in your child theme folder (comes by default with ska-theme-child<\/code>) and place the InterVariable.woff2<\/code> file in there. Optionally add an .htaccess<\/code> file (if you’re using Apache web server):<\/p>\n\n\n\nServe static assets with an efficient cache policy<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
PlayfairDisplay-VariableFont_wght.ttf<\/code> and optionally PlayfairDisplay-Italic-VariableFont_wght.ttf<\/code>.<\/p>\n<\/details>\n\n\n\nInter variable font<\/summary>\nInter is a really popular modern font you can get from Google Fonts<\/a> (or Bunny Fonts<\/a>), load it from rsms.me\/inter<\/a> CDN sponsored by Cloudflare<\/a> or self-host it. To self-host<\/strong>, first download it from https:\/\/rsms.me\/inter\/download\/<\/a> and find the InterVariable.woff2<\/code> from the web<\/code> directory of the zip file.<\/p>\n<\/details>\n\n\n\nCustom font<\/summary>\nIf you have a font from another source they usually come with specific instructions about which files and CSS to use – adapt it accordingly.<\/p>\n<\/details>\n\n\n\nSystem font<\/summary>\nDo you even need a font? Best performance and least hassle – try a system font from System Font Stack<\/a>. These will look slightly different depending on the operating system the user is using, how ever.<\/p>\n<\/details>\n<\/div>\n\n\n\nSelf-hosting a font<\/h2>\n\n\n\nFor this example, let’s set up the Inter variable font.<\/p>\n\n\n\n1. Prepare the child theme<\/h3>\n\n\n\nCreate a fonts<\/code> directory in your child theme folder (comes by default with ska-theme-child<\/code>) and place the InterVariable.woff2<\/code> file in there. Optionally add an .htaccess<\/code> file (if you’re using Apache web server):<\/p>\n\n\n\nServe static assets with an efficient cache policy<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
PlayfairDisplay-Italic-VariableFont_wght.ttf<\/code>.<\/p>\n<\/details>\n\n\n\nInter variable font<\/summary>\nInter is a really popular modern font you can get from Google Fonts<\/a> (or Bunny Fonts<\/a>), load it from rsms.me\/inter<\/a> CDN sponsored by Cloudflare<\/a> or self-host it. To self-host<\/strong>, first download it from https:\/\/rsms.me\/inter\/download\/<\/a> and find the InterVariable.woff2<\/code> from the web<\/code> directory of the zip file.<\/p>\n<\/details>\n\n\n\nCustom font<\/summary>\nIf you have a font from another source they usually come with specific instructions about which files and CSS to use – adapt it accordingly.<\/p>\n<\/details>\n\n\n\nSystem font<\/summary>\nDo you even need a font? Best performance and least hassle – try a system font from System Font Stack<\/a>. These will look slightly different depending on the operating system the user is using, how ever.<\/p>\n<\/details>\n<\/div>\n\n\n\nSelf-hosting a font<\/h2>\n\n\n\nFor this example, let’s set up the Inter variable font.<\/p>\n\n\n\n1. Prepare the child theme<\/h3>\n\n\n\nCreate a fonts<\/code> directory in your child theme folder (comes by default with ska-theme-child<\/code>) and place the InterVariable.woff2<\/code> file in there. Optionally add an .htaccess<\/code> file (if you’re using Apache web server):<\/p>\n\n\n\nServe static assets with an efficient cache policy<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Inter is a really popular modern font you can get from Google Fonts<\/a> (or Bunny Fonts<\/a>), load it from rsms.me\/inter<\/a> CDN sponsored by Cloudflare<\/a> or self-host it. To self-host<\/strong>, first download it from https:\/\/rsms.me\/inter\/download\/<\/a> and find the InterVariable.woff2<\/code> from the web<\/code> directory of the zip file.<\/p>\n<\/details>\n\n\n\nCustom font<\/summary>\nIf you have a font from another source they usually come with specific instructions about which files and CSS to use – adapt it accordingly.<\/p>\n<\/details>\n\n\n\nSystem font<\/summary>\nDo you even need a font? Best performance and least hassle – try a system font from System Font Stack<\/a>. These will look slightly different depending on the operating system the user is using, how ever.<\/p>\n<\/details>\n<\/div>\n\n\n\nSelf-hosting a font<\/h2>\n\n\n\nFor this example, let’s set up the Inter variable font.<\/p>\n\n\n\n1. Prepare the child theme<\/h3>\n\n\n\nCreate a fonts<\/code> directory in your child theme folder (comes by default with ska-theme-child<\/code>) and place the InterVariable.woff2<\/code> file in there. Optionally add an .htaccess<\/code> file (if you’re using Apache web server):<\/p>\n\n\n\nServe static assets with an efficient cache policy<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
InterVariable.woff2<\/code> from the web<\/code> directory of the zip file.<\/p>\n<\/details>\n\n\n\nCustom font<\/summary>\nIf you have a font from another source they usually come with specific instructions about which files and CSS to use – adapt it accordingly.<\/p>\n<\/details>\n\n\n\nSystem font<\/summary>\nDo you even need a font? Best performance and least hassle – try a system font from System Font Stack<\/a>. These will look slightly different depending on the operating system the user is using, how ever.<\/p>\n<\/details>\n<\/div>\n\n\n\nSelf-hosting a font<\/h2>\n\n\n\nFor this example, let’s set up the Inter variable font.<\/p>\n\n\n\n1. Prepare the child theme<\/h3>\n\n\n\nCreate a fonts<\/code> directory in your child theme folder (comes by default with ska-theme-child<\/code>) and place the InterVariable.woff2<\/code> file in there. Optionally add an .htaccess<\/code> file (if you’re using Apache web server):<\/p>\n\n\n\nServe static assets with an efficient cache policy<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
web<\/code> directory of the zip file.<\/p>\n<\/details>\n\n\n\nCustom font<\/summary>\nIf you have a font from another source they usually come with specific instructions about which files and CSS to use – adapt it accordingly.<\/p>\n<\/details>\n\n\n\nSystem font<\/summary>\nDo you even need a font? Best performance and least hassle – try a system font from System Font Stack<\/a>. These will look slightly different depending on the operating system the user is using, how ever.<\/p>\n<\/details>\n<\/div>\n\n\n\nSelf-hosting a font<\/h2>\n\n\n\nFor this example, let’s set up the Inter variable font.<\/p>\n\n\n\n1. Prepare the child theme<\/h3>\n\n\n\nCreate a fonts<\/code> directory in your child theme folder (comes by default with ska-theme-child<\/code>) and place the InterVariable.woff2<\/code> file in there. Optionally add an .htaccess<\/code> file (if you’re using Apache web server):<\/p>\n\n\n\nServe static assets with an efficient cache policy<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If you have a font from another source they usually come with specific instructions about which files and CSS to use – adapt it accordingly.<\/p>\n<\/details>\n\n\n\nSystem font<\/summary>\nDo you even need a font? Best performance and least hassle – try a system font from System Font Stack<\/a>. These will look slightly different depending on the operating system the user is using, how ever.<\/p>\n<\/details>\n<\/div>\n\n\n\nSelf-hosting a font<\/h2>\n\n\n\nFor this example, let’s set up the Inter variable font.<\/p>\n\n\n\n1. Prepare the child theme<\/h3>\n\n\n\nCreate a fonts<\/code> directory in your child theme folder (comes by default with ska-theme-child<\/code>) and place the InterVariable.woff2<\/code> file in there. Optionally add an .htaccess<\/code> file (if you’re using Apache web server):<\/p>\n\n\n\nServe static assets with an efficient cache policy<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Do you even need a font? Best performance and least hassle – try a system font from System Font Stack<\/a>. These will look slightly different depending on the operating system the user is using, how ever.<\/p>\n<\/details>\n<\/div>\n\n\n\nSelf-hosting a font<\/h2>\n\n\n\nFor this example, let’s set up the Inter variable font.<\/p>\n\n\n\n1. Prepare the child theme<\/h3>\n\n\n\nCreate a fonts<\/code> directory in your child theme folder (comes by default with ska-theme-child<\/code>) and place the InterVariable.woff2<\/code> file in there. Optionally add an .htaccess<\/code> file (if you’re using Apache web server):<\/p>\n\n\n\nServe static assets with an efficient cache policy<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
For this example, let’s set up the Inter variable font.<\/p>\n\n\n\n
Create a fonts<\/code> directory in your child theme folder (comes by default with ska-theme-child<\/code>) and place the InterVariable.woff2<\/code> file in there. Optionally add an .htaccess<\/code> file (if you’re using Apache web server):<\/p>\n\n\n\nServe static assets with an efficient cache policy<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
fonts<\/code> directory in your child theme folder (comes by default with ska-theme-child<\/code>) and place the InterVariable.woff2<\/code> file in there. Optionally add an .htaccess<\/code> file (if you’re using Apache web server):<\/p>\n\n\n\nServe static assets with an efficient cache policy<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
ska-theme-child<\/code>) and place the InterVariable.woff2<\/code> file in there. Optionally add an .htaccess<\/code> file (if you’re using Apache web server):<\/p>\n\n\n\nServe static assets with an efficient cache policy<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
InterVariable.woff2<\/code> file in there. Optionally add an .htaccess<\/code> file (if you’re using Apache web server):<\/p>\n\n\n\nServe static assets with an efficient cache policy<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
.htaccess<\/code> file (if you’re using Apache web server):<\/p>\n\n\n\nServe static assets with an efficient cache policy<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
# Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nNow we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Now we need this font loaded on the front end but also in the Block editor<\/strong> and TinyMCE editor<\/strong> (classic editor, for editing post types that don’t support Gutenberg, such as WooCommerce products). This can either be achieved by modifying the child theme’s style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
style.css<\/code> file or via hooks in the child theme’s functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
functions.php<\/code> file.<\/p>\n\n\n\n2. Load the self-hosted font<\/h3>\n\n\n\nChild theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Child theme’s style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
style.css<\/code> is the best place to put your @font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
@font-face<\/code> because with ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
ska-theme-child<\/code> the child theme’s style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
style.css<\/code> is “inlined” by default – no extra file request on the front end.<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/style.css<\/span>CSS<\/span><\/header>\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\/**\n * Theme Name: ska-theme-child\n * Template: ska-theme\n * Version: 1.0.1\n *\/\n \n@font-face {\n\tfont-family: 'Inter';\n\tsrc: url('\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2') format('woff2');\n\tfont-weight: 100 900;\n\tfont-style: normal;\n\tfont-display: swap;\n}<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIncrement the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Increment the Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Version<\/code> of the child theme header comment to ensure cache busting.<\/p>\n\n\n\n3. Pre-load the font<\/h3>\n\n\n\nIt’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n\/wp-content\/themes\/ska-theme-child\/functions.php<\/span>PHP<\/span><\/header>add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
It’s a good idea to tell the browser as soon as possible to start fetching the font in order to minimize FOUT (Flash of Unstyled Text).<\/p>\n\n\n\n
add_action('wp_head', function() {\n\techo '<link rel=\"preload\" as=\"font\" href=\"\/wp-content\/themes\/ska-theme-child\/fonts\/InterVariable.woff2\" type=\"font\/woff2\" fetchpriority=\"high\" crossorigin=\"anonymous\">';\n}, 5);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nBe sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Be sure to use crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
crossorigin=\"anonymous\"<\/code> even though the font is served from your own domain because otherwise the browser may not treat the URL specified in the style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
style.css<\/code> the same as the one in the <link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<link><\/code> and produce 2 network requests that take additional time to sort it out.<\/p>\n\n\n\nIt’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n4. Update Tailwind configuration<\/h3>\n\n\n\nFinally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n\nNavigate to ska-blocks -> Tailwind -> Typography<\/strong>.<\/li>\n\n\n\nFind the font you’re self-hosting and click “Edit<\/strong>“.If you’re adding a brand new font just click the plus icon.<\/em><\/li>\n\n\n\nChange the font source to “No external font<\/strong>“.<\/li>\n\n\n\nEnter the font name<\/strong> manually as the first item<\/strong> under “Local fonts” (the rest are fallback fonts).This can be done by clicking a plus icon of the first row and then clicking an up arrow icon to move the newly created row to the first position.<\/em>Fonts that have a name with spaces<\/strong> should be wrapped in double quotes<\/strong> (\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
It’s not render-blocking, just a strong hint to the browser to get the font downloaded ASAP.<\/p>\n\n\n\n
Finally you should update Tailwind typography settings to no longer use an external font.<\/p>\n\n\n\n
\"<\/code>).<\/li>\n<\/ol>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nA custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
A custom font can include another font as a fallback by using var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
var(--font-{slug})<\/code> as a fallback font:<\/p>\n\n\n\n\n<\/a>\n\n\n\n<\/a>\n<\/div>\n\n\n\nOptimizing further<\/h2>\n\n\n\nSubset your fonts<\/h3>\n\n\n\nSubsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Subsetting a font to only include the characters that your site needs can reduce its’ size by 5-10x<\/strong>.<\/p>\n\n\n\nAlternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Alternatively ensure that you’re only loading the correct subset, e.g. latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
latin<\/code>, and not the full font.<\/p>\n\n\n\nA tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
A tool like glyphhanger<\/a> can be used to scan your site for a whitelist of all the characters that it uses and then create a subset from that.<\/p>\n\n\n\nOr you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Or you can create a general-purpose font file using fonttools<\/a> that includes a pre-defined set of generic letters, numbers and symbols.<\/p>\n\n\n\nCharacters you might need<\/span><\/header># Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
# Letters\nAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n\n# Language-specific letters\n\u00d5\u00f5\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u0160\u0161\u017d\u017e\n\n# Numbers\/math\n<\u2264012\u00b23\u00b3456789\u207f\u221e\u00b0+-\u00b1=\u2260~\u2248%\u00f7*\u00d7^\u2211\u220f\u2265>\n\n# Punctuation\n.,;:!?\u2026\n\n# Currency\n$\u00a3\u20ac\n\n# Symbols\n#@&\u00a9\u00ae\u2122\n\n# Quotes\n'\"\u201c\u201d\u2018\u2019\u201b\u201e\u201f`\n\n# Brackets\n()[]{}\n\n# Bullets\n\u25cf\u2022\u2981\u00b7\n\n# Arrows\n\u2192\u2190\u00ab\u00bb\u2191\u2193\u2794\u279c\u2196\u2197\u2198\u2199\n\n# Misc\n|\u2013\u2014_\/\\\u00a7<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nUnicode range for the above characters<\/span><\/header>U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
U+20,U+21,U+23-7E,U+A3,U+A7,U+A9,U+AB,U+AE,U+B0-B3,U+B7,U+BB,U+C4,U+D5-D7,U+DC,U+E4,U+F5-F7,U+FC,U+2013,U+2014,U+2018,U+2019,U+201B-201F,U+2022,U+2026,U+207F,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+220F,U+2211,U+221E,U+2248,U+2260,U+2264,U+2265,U+25CF,U+2794,U+279C,U+2981<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nYou can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You can check the original font file with a tool like FontDrop!<\/a> for information about axes, instances, OpenType features, glyphs, ligatures and supported languages.<\/p>\n\n\n\nUsing fonttools<\/span><\/header>pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
pyftsubset \"VendSans.ttf\" --output-file=\"VendSans-subset.woff2\" --flavor=woff2 --layout-features+=liga,kern --retain-gids --no-hinting --unicodes=...<\/code><\/pre><\/div><\/div>\n\n\n\nWith the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
With the font tools subsetting tool<\/a> you can create a subset suitable for you.<\/p>\n\n\n\nAdditional notes<\/h2>\n\n\n\nBenefits to self-hosting a font<\/h3>\n\n\n\n\nPreloading<\/strong> – when using a Google font you can’t efficiently pre-load the font file because it’s loaded with a hashed name from the CSS that you include.<\/li>\n\n\n\nReduced latency<\/strong> – fonts load directly from your server, eliminating third-party delays.<\/li>\n\n\n\nCaching control<\/strong> – we set custom cache headers to optimize how browsers store and reuse font files.<\/li>\n\n\n\nNo third-party tracking, GDPR compliance<\/strong> – reduces concerns about user data being sent to external servers, which is critical for privacy regulations.<\/li>\n<\/ul>\n\n\n\nDownsides to self-hosting a font<\/h3>\n\n\n\n\nMarginally slower<\/strong> – a CDN tailored for serving fonts can get the job done in 20-30ms<\/strong>, serving it yourself from a regular web server that makes additional checks may take 50-60ms<\/strong>. When it comes to Google fonts or similar setups, it’s still faster overall because you have a concrete font file URL you can pre-load with a high priority.<\/li>\n\n\n\nNeeds subsetting<\/strong> – if you download a font from Google Fonts it’ll be around 500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
500kb<\/code>, even though when loading it from Google Fonts you were only served ~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
~20-50kb<\/code> chunks of it for the subset that was appropriate (e.g. latin).So when self-hosting you’ll also want to subset the font in order to not serve a drastically bigger file with unnecessary characters.<\/li>\n<\/ul>\n\n\n\nWhich font file format to use?<\/h3>\n\n\n\nwoff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
woff2<\/code> is the best modern font file format and you should prefer to use that. You can provide an alternative woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
woff<\/code>, otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
otf<\/code> or ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
ttf<\/code> as a fallback but the support for woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
woff2<\/code> is good and it’s not the end of the world if a user with an old browser can’t load the font so it’s probably not worth the extra effort.<\/p>\n\n\n\nChild theme style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
style.css<\/code> on the front end<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
With ska-theme<\/a> the child theme’s stylesheet is enqueued automatically but if you’re using some other theme you may need to enqueue it yourself via the child theme’s functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
functions.php<\/code>:<\/p>\n\n\n\nEnqueuing a child theme’s style.css<\/span>PHP<\/span><\/header>add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
add_action('wp_enqueue_scripts', function() {\n\twp_enqueue_style(\n\t\t'your-child-theme',\n\t\tget_theme_file_uri('style.css'),\n\t\t[],\n\t\twp_get_theme()->get('Version')\n\t);\n}, 150);<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nIf you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\nadd_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If you don’t want ska-theme to automatically load the style it can be turned off using:<\/p>\n\n\n\n
add_filter('ska_theme_enqueue_child_theme_stylesheet', '__return_false');<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
style.css<\/code> in the block editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
With ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the block editor. The above method for enqueueing the style on the front end should also carry over to the block editor, but if you need to enqueue it manually then you can add it to the block editor settings with the following filter:<\/p>\n\n\n\nAdding child theme style.css to the block editor<\/span>PHP<\/span><\/header>add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
add_filter('block_editor_settings_all', function($editor_settings) {\n\tif(get_stylesheet() !== get_template()) {\n\t\t$editor_settings['styles'][] = [\n\t\t\t'id' => 'your-child-theme',\n\t\t\t'css' => file_get_contents(get_theme_file_path('style.css')),\n\t\t\t'__unstableType' => 'theme',\n\t\t];\n\t}\n\treturn $editor_settings;\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nChild theme style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
style.css<\/code> in the classic editor<\/h3>\n\n\n\nWith ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
With ska-theme<\/a> the child theme’s stylesheet is automatically enqueued in the TinyMCE editor. Should you need to do it yourself, here’s the code:<\/p>\n\n\n\nAppend child theme style.css to TinyMCE CSS files list<\/span>PHP<\/span><\/header>add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
add_filter('mce_css', function($css = '') {\n\tif(get_stylesheet() !== get_template()) {\n\t\treturn $css . ',' . get_theme_file_uri('style.css');\n\t}\n\treturn $css; \/\/ Comma-delimited list of stylesheets.\n});<\/code><\/pre>Copy<\/button><\/div><\/div>\n\n\n\nAccess control for custom fonts<\/h3>\n\n\n\nIf you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If you need serve your custom fonts on multiple domains the .htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
.htaccess<\/code> file should include directives to provide cross-origin permissions:<\/p>\n\n\n\nAllowing Klaviyo to use your custom font on klaviyo.com<\/span><\/header># Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
# Serve fonts with an efficient cache policy\n<IfModule mod_headers.c>\n\t<FilesMatch \"\\.(otf|ttf|woff|woff2)$\">\n\t\tSetEnvIf Origin \"https:\/\/(www\\.)?klaviyo\\.com$\" ORIGIN_ALLOWED=$0\n\t\tHeader set Access-Control-Allow-Origin \"%{ORIGIN_ALLOWED}e\" env=ORIGIN_ALLOWED\n\t\tHeader set Cache-Control \"max-age=315360000, public\"\n\t<\/FilesMatch>\n<\/IfModule><\/code><\/pre>Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Adding a custom font using a child theme – self-hosting is essential for best performance and removes privacy considerations. Choosing a font for self-hosting Self-hosting a font For this example, let’s set up the Inter variable font. 1. Prepare the child theme Create a fonts directory in your child theme folder (comes by default with…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":22,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/427\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}