Add web fonts and Google fonts to your iRise project

Using Google fonts in Editor

Google provides access to more than 600 open source fonts for use in more than 135 languages.

To add Google fonts to you project:

Go to Google Fonts
Browse the selection of fonts and click Plus (+) icons for all of the fonts you'd like to use in iRise.
Once your fonts are selected, click on the black bar at the bottom of the page that indicates your fonts selections.
Under the Embed tab, copy the entire Standard code snippet. It starts with
<link href="https://fonts...
Go to your iRise project.
At the bottom of the Font selector, click Add Fonts.
Under Add Google fonts, enter or paste in <link> code from Google. You can try it by using the code below.
Once added, the new font families will appear in the Font selector.
Apply the new font to any iRise widget

You can try adding Google fonts with this code snippet:

<link href="https://fonts.googleapis.com/css?family=Lobster|BioRhyme|Spirax" rel="stylesheet">

Add a custom web font

You can use @font-face CSS to embed custom fonts in iRise. To add a custom font:

At the bottom of the Font selector, click Add Fonts.
Under Add custom fonts, enter or paste in @font-face CSS. For more information on @font-face, click here. You can try it by using the code below.
Once added, the new font families will appear in the Font selector.
Apply the new font to any iRise widget

You can try adding custom fonts with this CSS snippet:

@font-face {
    font-family: 'Redkost Comic';
    src: url('https://s3.amazonaws.com/irise.user.files/fonts/Redkost-Comic.otf') format('opentype');
    }
    
@font-face {
    font-family: 'Orkney';
    src: url('https://s3.amazonaws.com/irise.user.files/fonts/Orkney-Regular.otf') format('opentype');
    font-weight: normal;
    }

@font-face {
    font-family: 'Orkney';
    src: url('https://s3.amazonaws.com/irise.user.files/fonts/Orkney-Bold.otf') format('opentype');
    font-weight: bold;
    }

For more information on @font-face, see: