Custom font links

If you use non-standard fonts for your website and you want your Trumba spuds to use the same fonts, you can apply custom fonts as base styles.

Note For information about setting up standard fonts and other base styles and colors, go to Spud style settings.

Use custom fonts

To use a custom font, you have to take advantage of a web-based font service, including Adobe® Typekit, Adobe Edge Web Fonts, Google Fonts, Cloud.typography, and more.

On a font service site, when you select the font you want to use, the service provides you with a font link tag and the font-family name. You need these two pieces of data to set up custom fonts in Trumba.

Tips

• Keep in mind that using custom fonts may add to the time it takes for your webpages to load.
• Custom fonts you set on your base settings page are applied to all of a publication's main calendar, promotion, and control spuds.

  They are also applied to event submission forms.

• Custom fonts are not applied to calendar and event emails.

To add a custom font to a publication

Important Do not use JavaScript when you're adding a custom font in your base settings. Instead, use a link tag to load your font, such as in the examples we've included below. For assistance with adding custom fonts, contact Trumba Support at support@corp.trumba.com.

1. Go to the website for a web-based font service and select the font you want to use.
2. Copy the font tag link.

   (You'll need to use the link version of the font tag; see below for examples.)

3. In the Trumba Connect editing environment, select the publication to which you want to apply the custom font, and then click Publish Settings.

   (If you haven't already published your calendar, on the Publish page, click OK.)

4. In the Publishing Control Panel, click the Publish Settings tab.
5. Click Edit Styles & Icons.

   

6. On the Edit Settings for Base Calendar Styles page, in the Font Scheme section, paste the font link tag that you copied in step #2 into the Custom font link field, such as in the following examples:

   
   Google Fonts link format font tags look something like this:

   Note For link type font tags, it's a good idea to remove http: from link tags to allow the fonts to load safely on pages accessed with either http or https protocol.

   <link href='//fonts.googleapis.com/css?family=Open+Sans:400,500,700' rel='stylesheet' type='text/css'>

   
   

   Tip When setting spud styles, if you don't notice a difference when you set the font weight to medium (e.g. for event titles), you may need to add the "500" value into your custom font link, as shown in the example above.

   Adobe Typekit® link format font tags look something like this:

   Note You'd need to replace 'xxxxxxx' with the value for your font.

   <link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

   
   

   Cloud.typography link format font tags look something like this:

   Note You'd need to replace <AccountID> and <ProjectID> in the code sample (and screenshot) below with IDs you attain from the font service provider.

   <link rel='stylesheet' type='text/css' href='https://cloud.typography.com/<AccountID>/<ProjectID>/css/fonts.css' />

   
   

7. Back on the font service website, copy the font-family name.
   • For Google Fonts, the font-family name looks something like this: 'Open Sans'.
   • For Adobe Typekit, the font-family name looks something like this: 'Museo-Sans'.
   • For Cloud.typography, the font-family name looks something like this: 'Gotham A'.

   Tip Copy just the font name itself, surrounded by single quotation marks.

8. In the other sections of the Edit Settings for Base Calendar Styles page where you want to use a custom font, paste the custom font-family name from step #7 as the first font, separating it from the other system font names with a comma, such as in the screenshot below.

   (System fonts serve as a backup display option if the custom font service is not available.)

   

   Paste the font-family name into font fields as the first font.

   Note If you receive the error, Base font: invalid font set, you may have copied in "curly" quotation marks. To replace them with straight quotation marks, delete and then re-type them within the Trumba Connect editing environment.

   To apply the custom font globally across your website, paste it as the first font in all four of the following fields:

   • Base font, which is pictured above
   • Base header font
   • Base group font
   • Base subgroup font
9. If you have security setup where the font link URL only works on certain domains, add trumba.com to the allowed domains for your font link.
10. At the bottom of the form, click Preview to see how the custom font looks in the calendar, promotion, and control spuds you've added.

    Tip If you don't want to use the custom font in specific spuds, you can edit the spud settings, and remove the font-family name from the font fields. Learn more about editing spud settings.

11. To save the custom font settings, at the bottom of the form, click OK.

Tip You can use more than one custom font in a publication by pasting more than one font tag into the Custom font link field, and then applying each font-family name to the appropriate font fields. However, the more custom fonts you add, the slower the page load times.