{"id":3391,"date":"2023-02-08T18:15:27","date_gmt":"2023-02-08T18:15:27","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/add-a-new-font-third-party\/"},"modified":"2025-01-31T13:00:38","modified_gmt":"2025-01-31T13:00:38","slug":"add-a-new-font-third-party","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/add-a-new-font-third-party\/","title":{"rendered":"Add a New Font (Third Party)"},"content":{"rendered":"\n
\n

Please check the Developer’s Guide<\/a><\/strong> in advance<\/p>\n<\/div>\n\n\n\n

This method assumes that you don’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

<link href=’\/\/fonts.googleapis.com\/css?family=Open+Sans’ rel=’stylesheet’ type=’text\/css’><\/p>\n\n\n\n

The @import rule method should look something like this:<\/p>\n\n\n\n

@import url(\/\/fonts.googleapis.com\/css?family=Open+Sans);<\/pre>\n\n\n\n
If you’re not using a hosted font and instead have font files ready to upload, follow the steps outlined in the support post here<\/a>.<\/strong><\/p>\n\n\n\n
Link Method<\/strong><\/h3>\n\n\n\n
First, click the Libraries tab and then select Frameworks to get to the Frameworks Library:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
 <\/p>\n\n\n\n
Click the “ion Framework 4” link (or the Framework you’d like to apply the font within):<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
 <\/p>\n\n\n\n
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
\"3-Jan-08-2021-03-32-34-94-PM\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
In the list of Theme files, open the file titled “webfonts.txt”. 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
\"4-3\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
You can now “Save and Close” the webfonts.txt file. To declare the font you’ve linked, click into the “theme.css” 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’d like that font family to be used:<\/p>\n\n\n\n
element {\nfont-family: 'MyWebFont', Fallback, sans-serif;\n}<\/pre>\n\n\n\n
 <\/h3>\n\n\n\n
@import Rule Method<\/strong><\/h3>\n\n\n\n
First, click the Libraries tab and then select Frameworks to get to the Frameworks Library:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Click the “ion Framework 4” link (or the Framework you’d like to apply the font within):<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
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
\"8\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
In the list of Theme files, open the file titled “theme.css”. This is where you will declare the font.<\/p>\n\n\n\n
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
\"9-1\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
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’d like that font family to be used as well:<\/p>\n\n\n\n
element {\nfont-family: 'MyWebFont', Fallback, sans-serif;\n}<\/pre>\n\n\n\n
 <\/p>\n\n\n\n
To add your fonts as Micro-Theme options, check out the Micro-Theme Developer’s Guide\u00a0here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Please check the Developer’s Guide in advance This method assumes that you don’t have font files and are instead using a third party to host the fonts for you. Each third party should provide details for […]<\/p>\n","protected":false},"author":1,"featured_media":5865,"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-3391","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\/3391","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=3391"}],"version-history":[{"count":4,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3391\/revisions"}],"predecessor-version":[{"id":7426,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3391\/revisions\/7426"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5865"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=3391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=3391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=3391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}