Understanding Fonts

Trying to find the right font? Before you choose Arial, Times New Roman, or even Papryus (please don’t) let’s explore the world of fonts and typography. It is a place of creativity, accessibility, and will have your campaign feeling very harmonious. Let’s dive in.

Skip Ahead To

Fonts & Typography

Finding the right font

• Accessibility comes before creativity. Before finding the curliest or grungiest font you can, consider your audience, and fonts that are clear and easily read.
• Find complementary serif & san-serif fonts. Serif fonts have stylised ends (eg. Lora whilst san-serif fonts have clean straight edges. Using serif font for your Headings and san-serif for paragraph and sub-headings can have a great effect.
• Start with Google Fonts (free) or Adobe fonts (paid subscription). For most use cases, you’ll find the perfect fit.
• Create a test page, rather than testing one word. Have a HEADING, sub-Heading, and paragraph/body text and play with fonts. Seeing the font in a use-case is much more helpful than just looking at single words.
• If in doubt, start with something simple like Lato (Google Font) or Neue Haas Grotesk (Adobe Font). These are quite generic fonts but are clean and offer a lot of flexibility. You are better off spending days working on your campaign than searching for the perfect font.  

Understanding hierarchy

Setting Up Your Fonts

### accordion

## expand

# Using Google Fonts

1

Within your campaign, on the sidebar select Design > Fonts

2

Select Heading 1 first to reveal font settings

3

Enter the first few characters of your font to reveal in selection, and Select your font

4

Adjust the size of your font, and any other height or width settings you require

5

Adjust the font weight, either selecting or unselecting Bold (B) or select the down arrow to reveal other weights if available. In web design, font weights may be represented by numbers (eg. 400 is normal, 700 is bold, 900 is heavy).

6

If you wish to set the heading style as capitalised, simply select the Transform ( Tt)button.

7

Colours can be selected now to set defaults, or individual through the page builder.

8

Select Save Changes before closing, otherwise font will revert to defaults.

9

Repeat this process for all the Heading and Paragraph styles you require.

10

Links carry the same settings as your Paragraph style, though they contain 3 styles relating to their action – regular, hover, active (clicked). To give your links some style, adjust the colour and styles of each.

## expand

## expand

# Using Adobe Fonts

1

From the campaign sidebar, select Settings > Apps & Integrations

2

Use the switcher to toggle Adobe Fonts to On. Paste in the Adobe Web Project ID, and select Save

3

Open the  Design > Fonts settings from your campaign sidebar. For each font style you will need to enter the exact name of your font family into the field (e.g. houschka-pro instead of Houschka Pro Bold). To find this, open the fonts setting in Adobe Fonts.    

4

If you have used various font weights, you will need to inject some CSS to specify which font-weight is used. Simply add:

 h1 {font-weight:100/200/300/400/500/600/700/900;}
	

## expand

## expand

# Advanced: Using Custom Fonts

1

From your campaign sidebar, select Design > Media Library. 

2

Upload your font files here, and copy URL for each file, pasting them into a blank table document you can refer to in the next steps. Include the file format in the table, as you will need this (eg. oft, woff, woff2, etc)

3

In Design, open up Custom Styles and then your stylesheet. Scroll down to the very bottom, where we can place custom code.

4

For each font you uploaded, you will need to enter the following lines:

@font-face {
font-family: "FONT FAMILY";
src: url(FONT URL from Media Library) format("FILETYPE");
font-weight:normal/bold/300/700/900;
}
	

For example, if I was using Riya as a font the code would be:

@font-face {
font-family: "Riya"; 
src: url(https://raisely-images.imgix.net/campaign/uploads/raya.otf) format("opentype");
font-weight:normal;
}
	

You can find the font family name from where you purchased the font.    

Font FILETYPES include: "woff", "woff2", "truetype", "opentype". Enter relevant file type from the files extension.

To enter multiple fonts, you can separate each on a new line followed by ,

@font-face {
font-family: "Riya";
src:url(https://yourURLhere.otf ) format("opentype"),
src:url(https://yourURLhere.woff ) format("woff"),
src:url(https://yourURLhere.woff) format("woff2"),
src:url(https://yourURLhere.ttf ) format("truetype");
}
	

4

Save Changes.

 h1 {
 font-weight:100/200/300/400/500/600/700/900;}

## expand

### accordion

Accessibility