{"id":3386,"date":"2023-02-08T17:28:59","date_gmt":"2023-02-08T17:28:59","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/add-a-new-font-font-files\/"},"modified":"2025-01-31T12:55:47","modified_gmt":"2025-01-31T12:55:47","slug":"add-a-new-font-font-files","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/add-a-new-font-font-files\/","title":{"rendered":"Add a New Font (Font Files)"},"content":{"rendered":"\n<div class=\"hs-callout-type-caution\" data-hs-callout-type=\"caution\">\n<p>Please check the<strong> <a href=\"https:\/\/obo.zoj.mybluehost.me\/frameworks-micro-themes-develop-your-own\/\" rel=\"noopener\">Developer&#8217;s Guide<\/a><\/strong> in advance<\/p>\n<\/div>\n\n\n\n<p>If you want to add new font files to Ion, you will need to have them in the following formats to account for the widest support across browsers:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>.eot (IE 6-9)<\/li>\n\n\n\n<li>.ttf (Safari, Android, iOS)<\/li>\n\n\n\n<li>.woff (pretty modern browsers)<\/li>\n\n\n\n<li>.woff2 (really modern browsers)<\/li>\n\n\n\n<li>.svg (iOS legacy)<\/li>\n<\/ul>\n\n\n\n<p>If these files are ready to go, follow the steps below. If you don&#8217;t have these font files and instead are using a third-party to host your fonts (i.e. Google Fonts,&nbsp; Typekit, etc.), go to this help article <a href=\"https:\/\/obo.zoj.mybluehost.me\/add-a-new-font-third-party\/\" rel=\"noopener\">here<\/a>.<\/p>\n\n\n\n<p>First, click the Libraries tab and then select Frameworks to get to the Frameworks Library:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"307\" height=\"616\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2025\/01\/Screenshot_2-11.png\" alt=\"\" class=\"wp-image-7414\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_2-11.png 307w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_2-11-150x300.png 150w\" sizes=\"auto, (max-width: 307px) 100vw, 307px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Click the &#8220;ion Framework 4&#8221; link (or the Framework you&#8217;d like to apply the font within):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"210\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2025\/01\/Screenshot_3-11-1024x210.png\" alt=\"\" class=\"wp-image-7415\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-11-1024x210.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-11-300x61.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-11-768x157.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-11-1536x314.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-11.png 1916w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Click &#8220;Themes&#8221; to show all of the Themes that exist in the Framework, hover over the Theme you would like to apply the font to and click on the &#8220;+ Files&#8221; button that appears. This will open up the Add or Replace Files dialog. You can either drag your files into this window or click &#8220;Browse&#8221; to locate your files:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/08\/3-4.jpeg\" alt=\"3-4\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Now that you&#8217;ve added the font files to the desired Theme, click into the &#8220;theme.css&#8221; file to access the main style sheet. This is where you will declare the font. <strong>Be mindful that this requires CSS knowledge.<\/strong><\/p>\n\n\n\n<p>Above the &#8220;html&#8221; class, you&#8217;ll use the @font-face rule to reference your font files. Below is an example of an @font-face declaration where you&#8217;ll replace &#8220;MyWebFont&#8221; with the font name, and &#8220;webfont&#8221; in each of the file name&#8217;s with your font files:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@font-face {\nfont-family: 'MyWebFont';\nsrc: url('webfont.eot'); \/* IE9 Compat Modes *\/\nsrc: url('webfont.eot?#iefix') format('embedded-opentype'), \/* IE6-IE8 *\/\nurl('webfont.woff2') format('woff2'), \/* Super Modern Browsers *\/\nurl('webfont.woff') format('woff'), \/* Pretty Modern Browsers *\/\nurl('webfont.ttf') format('truetype'), \/* Safari, Android, iOS *\/\nurl('webfont.svg#svgFontName') format('svg'); \/* Legacy iOS *\/\n}<\/pre>\n\n\n\n<p>You have now uploaded the font files, and referenced them in the Theme using the @font-face rule. To use your new font, just add the font family CSS to the elements you wish to use the font:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">element {\nfont-family: 'MyWebFont', Fallback, sans-serif;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add a New Font (Third Party)<\/h2>\n\n\n\n<div class=\"hs-callout-type-caution\" data-hs-callout-type=\"caution\">\n<p style=\"text-align: justify\">Please check the<strong>&nbsp;<a href=\"https:\/\/obo.zoj.mybluehost.me\/frameworks-micro-themes-develop-your-own\/\" rel=\"noopener\">Developer&#8217;s Guide<\/a><\/strong>&nbsp;in advance<\/p>\n<\/div>\n\n\n\n<p>This method assumes that you don&#8217;t have font files and are instead using a third party to host the fonts for you. Each third party should provide details for installing the font, but most will use a link reference or the @import rule. For a third party font using the link method, you should have a line of code that looks something like this Google Fonts example:<\/p>\n\n\n\n<p>&lt;link&nbsp;href=&#8217;\/\/fonts.googleapis.com\/css?family=Open+Sans&#8217;&nbsp;rel=&#8217;stylesheet&#8217;&nbsp;type=&#8217;text\/css&#8217;&gt;<\/p>\n\n\n\n<p>The @import rule method should look something like this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@import url(\/\/fonts.googleapis.com\/css?family=Open+Sans);<\/pre>\n\n\n\n<p><strong>Link Method<\/strong><\/p>\n\n\n\n<p>First, click the Libraries tab and then select Frameworks to get to the Frameworks Library:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"307\" height=\"616\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2025\/01\/Screenshot_2-12.png\" alt=\"\" class=\"wp-image-7416\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_2-12.png 307w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_2-12-150x300.png 150w\" sizes=\"auto, (max-width: 307px) 100vw, 307px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>Click the &#8220;ion Framework 4&#8221; link (or the Framework you&#8217;d like to apply the font within):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"210\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2025\/01\/Screenshot_3-12-1024x210.png\" alt=\"\" class=\"wp-image-7417\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-12-1024x210.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-12-300x61.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-12-768x157.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-12-1536x314.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-12.png 1916w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>Click Themes to show all of the themes that exist in the Framework, the expand the Theme you wish to add the font to:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/08\/3-Jan-08-2021-03-32-34-94-PM.jpeg\" alt=\"3-Jan-08-2021-03-32-34-94-PM\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>In the list of Theme files, open the file titled &#8220;webfonts.txt&#8221;. In this text file, you can paste in the link reference. Below is an example of links for both Google Fonts and FontAwesome:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/08\/4-3.jpeg\" alt=\"4-3\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>You can now &#8220;Save and Close&#8221; the webfonts.txt file. To declare the font you&#8217;ve linked, click into the &#8220;theme.css&#8221; file to access the main style sheet. This is where you will declare the font. To use your new font, just add the font family CSS to the elements where you&#8217;d like that font family to be used:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">element {\nfont-family: 'MyWebFont', Fallback, sans-serif;\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">&nbsp;<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>@import Rule Method<\/strong><\/h3>\n\n\n\n<p>First, click the Libraries tab and then select Frameworks to get to the Frameworks Library:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"307\" height=\"616\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2025\/01\/Screenshot_2-13.png\" alt=\"\" class=\"wp-image-7418\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_2-13.png 307w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_2-13-150x300.png 150w\" sizes=\"auto, (max-width: 307px) 100vw, 307px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Click the &#8220;ion Framework 4&#8221; link (or the Framework you&#8217;d like to apply the font within):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"210\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2025\/01\/Screenshot_3-13-1024x210.png\" alt=\"\" class=\"wp-image-7419\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-13-1024x210.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-13-300x61.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-13-768x157.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-13-1536x314.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/01\/Screenshot_3-13.png 1916w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Click Themes to show all of the themes that exist in the Framework, the expand the Theme you wish to add the font to:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/08\/8.jpeg\" alt=\"8\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>In the list of Theme files, open the file titled &#8220;theme.css&#8221;. This is where you will declare the font.<\/p>\n\n\n\n<p>Paste the @import rule to reference your font files, and be sure to place it above any CSS that may reference the fonts. Below is an example of an @import declaration:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/08\/9-1.jpeg\" alt=\"9-1\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Notice in the screenshot above, the Open Sans font imported using the @import rule being referenced in the html CSS class. Just like this screenshot, you will want to add the font family CSS to the elements where you&#8217;d like that font family to be used as well:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">element {\nfont-family: 'MyWebFont', Fallback, sans-serif;\n}<\/pre>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>To add your fonts as Micro-Theme options, check out the Micro-Theme Developer&#8217;s Guide&nbsp;<a href=\"https:\/\/obo.zoj.mybluehost.me\/frameworks-micro-themes-develop-your-own\/\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Please check the Developer&#8217;s Guide in advance If you want to add new font files to Ion, you will need to have them in the following formats to account for the widest support across [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5415,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[2030,7],"tags":[2171,2127,2157],"class_list":["post-3386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ion-themes","category-the-themes","tag-custom-css","tag-ion-themes","tag-micro-themes"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=3386"}],"version-history":[{"count":4,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3386\/revisions"}],"predecessor-version":[{"id":7421,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3386\/revisions\/7421"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5415"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=3386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=3386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=3386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}