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: