This article will guide you on how to add custom fonts to a theme.

Before you begin

Your font must be available in the following four web formats:

• .eot
• .woff
• .svg

Including all three font formats will provide maximum coverage of support for en-user browsers, missing one or more may cause display issues. Also avoid using complex font filenames, especially if the file contains multiple 'periods' or 'dots'. For example, myfont-1.0.woff would be best named myfont-1_0.woff.

A quick note on TTF fonts

TTF fonts are not optimised for web delivery and are not directly supported for use in the Experiences platform, however there are a number of on-line tools that will allow you to convert TTF files to other formats such as WOFF, removing most of the unnecessary content from the font file in the resulting converted format.

How to upload and declare a font for use in your theme

If you intend to use a cloud based font service, navigate to the bottom of the article. Here you will find a working example on using the Google Fonts service.

A word on configurable themes (Theme Designer)

If the theme you intend to add fonts to was not setup as configurable (meaning that the theme was not intended for use in the Theme Designer) you will only have the option to Edit Theme, where you must add a CSS Override and use any custom fonts. If you can use the Theme Designer on the theme you will see this icon: 

What does it mean if I can't use Theme Designer?

Many of the simple to use controls to design your theme will not be available and whilst custom fonts can still be added to Theme Assets, you will need to add code to the CSS Overrides area to declare them. With Theme Designer the process is a little simpler and more options are made readily available to use custom and Google fonts. More information on creating a new theme (based on an existing one) so that you can use the Theme Designer is available here.

Uploading fonts to the platform

1. Click Themes from the drop-down Folder menu icon.
2. Find the theme you want to add your fonts to and click the Theme Designer button, if this is not available click Edit Theme.
3. Once in the Theme Designer, open Theme Assets.
   
   
   
   
4. You can now drag and drop the fonts to the drop zone at the bottom of the editor. Once the upload is complete, a green success message will appear, clicking on Fonts will list the fonts now uploaded to the theme.
   
   

Selecting your custom font(s) when Theme Designer is available

1. When using the Theme Designer you will notice many more options on the left navigation menu, click Common Settings.
   
   
   
   
2. Click the selector icon next to the font names under Default Font Family.
   
   
   
   
3. Now switch to Custom at the top, select your custom font from the list below.
   
   You will only be able to select a single font from this drop down list, but you can move back to Common settings and type in comma separated list of font names, be sure to wrap fonts with a space in with quotes.
   

   'My font 1','My font 2','Bold Font',Arial,Helvetica

4. You can now click through the other areas, such as Headings & Copy, Buttons and Forms to either inherit the new default font you selected or to use another font.

You are now setup to use your uploaded font(s) in all campaigns that use this theme

Declaring your custom font(s) when only Edit Theme is available

The following CSS example demonstrates some CSS that will load the intended font in a number of formats to cover all the major internet browsers. This will need to be added to the CSS Overrides area of the Theme.

1. Click on CSS Overrides.
2. Enter in your own CSS font declaration, here is an example:
   

   @font-face {
    font-family: fontName;
    src: url('fontFileName.eot');
    src: url('fontFileName.eot?#iefix') format('embedded-opentype'),
    url('fontFileName.woff') format('woff'),
    url('fontFileName.svg#ywftsvg') format('svg');
    font-weight: normal;
    font-style: normal;
   }

Notes:

• 'fontName' is the reference you will use for your font.
• Avoid using spaces or symbols in the reference for the font.
• 'fontFileName' is the file name of the actual font file.

As an example you can then set which font is used for the Body text:

body {
 font-family: fontName;
}

You are now setup to use your uploaded font(s) in all campaigns that use this theme.

Using Google fonts in your theme

If you intend to use Google Fonts rather than upload your own, you can follow these instructions.

Important: The use of cloud based font services can add significant load times to your campaigns. Most cloud font services will indicate to you the expected load on your campaign when selecting the fonts to use. We strongly advise against could font services on high volume campaigns, contact your CSM to discuss.

Selecting a Google Font (Theme Designer only)

1. Click Themes from the drop-down Folder menu icon.
2. Click the Edit Theme icon on your chosen theme.
3. Once in the Theme Designer, Click on the selector.
   
   
   
   
4. Now switch to Google at the top, select your custom font from the list below (You can type in the Filter box to search)

You are now setup to use your selected font(s) in all campaigns that use this theme.

Importing a Google Font (Edit Theme)

1. Visit Google Fonts, add the fonts you require to your collection, with the + button (On the left of each font).
2. When your collection is complete, click Family selected in the bottom right.
3. Click @import, this will be the CSS you need to include in your theme css
   
   
   
   
4. Navigate back to the dashboard and open the Themes area under the Folder icon.
5. Click on the Edit Theme icon.
6. You can now reference your font in your CSS Overrides area.
   
   
7. Below @import, the body element has been set to use Roboto, meaning that all text contained within the body will use this font, change this as required:
   

   body {font-family: Roboto;}

8. Once you are happy with the changes, click Apply to save.

You are now setup to use your selected font(s) in all campaigns that use this theme.