Skip to main content

Fonts

Using standard and custom fonts with your Run site

To edits your site fonts, navigate to the Design Settings sidebar via the Design Settings tab in the top right of your Run CMS.

Run provides a curated selection of fonts for your website, some of which are specifically licensed for the platform and others that exist under open source licenses.

To preview any of these fonts on your Run site, start by selecting a font category, choose your headline font, and then choose your body and button fonts.

Custom Font Manager

Run allows for two methods of including custom fonts on the platform — "hosted" fonts (i.e. Google Fonts or Adobe), and uploaded fonts.

To add a custom font, start by clicking Launch Font Manager on the Design Settings sidebar. You can add a hosted font in the first tab, or navigate to the second tab to upload font files.

External Font Links

In the space provided on the first tab, copy the code that starts with "<link..." provided by Google, Adobe, or any other hosted font provider. If this is done correctly, a new "Custom" category will be created inside the Font Category dropdown and your fonts will be there. Your font will also be added to the Body Font and Button Font lists. Simply select the font in those lists to use it.

Google fonts

To add fonts from Google, visit fonts.google.com and navigate to the font of your choice. Next to any of the the font styles you'd like to use, click to Select the font.

In the sidebar, under the "Use on the web" header, keep the <link> radio button selected, and copy the code there. If you want to use multiple Google fonts, additional fonts will continue to be added to that snippet of code, so just wait until after you've added all your fonts. Putting more than one Google font link tag on your Run site will cause the font import to fail.

Adobe fonts

To add and use fonts from Adobe you must be a paid subscriber. Visit fonts.adobe.com to get started. Select the font or fonts of your choice and once on the font page, click the Add to Web Project button.

In the area provided, create a new Project to add your fonts to. Select only the font weights you need. Anything else you add will slow down the loading of your site. Once you've selected and added your fonts to the the Project, you'll be provided the Link tag code to paste into your Run site. If you have multiple fonts you want to add to your site, add them all to the same project before pasting the Link tag into your Run site.

To update or manage your Project at any time, click the Manage Fonts link at the top right of the page and select Web Projects from the dropdown. Updates to your font projects will take a few minutes to appear on your Run website.

Upload Font Files

Click the Launch Font Manager button on the Design Settings sidebar, and in the second tab of the Font Manager, you will see a dropdown listing any existing fonts you have already uploaded to your site as well as the option to add a new one.

To add a new font, select "Add new font" from the dropdown. Below, name your font family. Once you provide a font family name, you will see six font upload sections appear below: Regular, Regular Italic, Bold, Bold Italic, Headline, and Headline Italic. Upload the corresponding font files.

File Format Requirements

Only .woff and .woff2 files are accepted. If you have TTF or OTF files, ensure you have a valid web font license before converting. Desktop font licenses often don't include web usage rights.

Font Sizing, Line Height, and Offset Adjustments

Run has a sophisticated font adjustment featured that allows you to adjust the size, line height, and "vertical offset" of custom fonts you add to the platform. This is at the bottom of the popup where you add the font.


Our system will place your custom font next to Galano, one our standard platform fonts to allow you to match it for the best possible adjustments.

Font Size: The key here is to have it "feel" like the same size as Galano, not to match the height. For example, for a condensed font, you'll want it taller than Galano.

Line height: There's some subtely to this, you'll need to use your judgement so the lines don't feel too close or too far apart.

Vertical Offset: This is for making sure the text sites right in vertical center of buttons. Use the button example to get this right.

Did this answer your question?