Add a New Font (Font Files)

Adding a new font to the ion platform is similar to adding fonts to most other platforms. We strongly recommend having experience with CSS before attempting. We also recommend reviewing the developer's guide prior to working within an ion Framework. 

If you have font files, you will need to have them in the following formats to account for the widest support across browsers:

  • .eot (IE 6-9)
  • .ttf (Safari, Android, iOS)
  • .woff (pretty modern browsers)
  • .woff2 (really modern browsers)
  • .svg (iOS legacy)

If you have these files ready to go, follow the steps below. If you don't have the font files mentioned above and instead are using a third-party to host your fonts (i.e. Google Fonts,  Typekit, etc.), go to the support post here.

To add your new font to ion there are a few steps that need to take place.

First, click the Libraries tab and then select Frameworks to get to the Frameworks Library.

1-Jan-08-2021-01-47-56-90-PM

Click the "ion Framework 4" link (or the Framework you'd like to apply the font within).

2-Jan-08-2021-01-48-07-05-PM

Click Themes 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 "+ Files" button that appears. This will open up the Add or Replace Files dialog. You can either drag your files into this window or click "Browse" to locate your files.

3-4

Now that you've added the font files to the theme, click into the "theme.css" file to access the main style sheet. This is where you will declare the font.
 

Above the "html" class, you'll use the @font-face rule to reference your font files. Below is an example of an @font-face declaration where you'll replace "MyWebFont" with the font name, and "webfont" in each of the file name's with your font files.
 

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

 

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.
 

element {
font-family: 'MyWebFont', Fallback, sans-serif;
}

 

To add your fonts as Micro-Theme options, check out the Micro-Theme Developer's Guide here.