Table of contents

This article outlines Brand Fonts and Text Styles, what they are, how to customize them, and how to use them in Channels and Pages.

Brand_Fonts_and_Text_Styles_1.png

Brand_Fonts_and_Text_Styles_1.png

What are Brand Fonts?

Brand Fonts allow you to better represent your brand by using Google Fonts or uploading your own Custom Fonts for use in Pages and Channels. 

Brand Fonts can be found in Happeo’s Admin Settings under Branding, in the Typography tab.

Areas where custom fonts will not be supported

Custom fonts will not be supported in the following:

  • All emails
  • Global navigation
  • Mobile

What are Text Styles?

Text Styles ensure that typography can be globally defined. Admins can now define font family, weight, line height, letter spacing, and color for different font styles. These aspects can be applied to Pages and some aspects to Channels.

Text Styles ensure typography is on-brand. The Active Style is applied by default when users create text.

Text Styles can be found in Happeo’s Admin Settings under Branding, in the Typography tab.

Brand_Fonts_and_Text_Styles_2.png

How to access the Branding section in the Admin Settings

To access the Branding section in Happeo’s Admin Settings, you can:

  1. Click your Happeo avatar and select Admin Settings
  2. From the left-hand panel, you can click Branding

In this section, you can find Brand Text Styles and Brand Fonts. You can also edit Text Styles by clicking the Typography tab in the section’s menu at the top of the page.

Brand_Fonts_and_Text_Styles_3.png

How to add a Google Font

From the Brand Font section, you can add a Google Font by selecting one from the dropdown list. You can install as many as you want. An automatic preview of the font is generated when selected.

Brand_Fonts_and_Text_Styles_3.png

Here’s a link to Google’s Terms and Services

Brand_Fonts_and_Text_Styles_4.png

How to add a Custom Font

To upload a Custom Font, you can scroll down the Typography tab and click Upload Font. A Font needs to be selected from your computer matching supported font types, namely:

  • TrueType (TTF)
  • OpenType (OTF)
  • Web Open Font Format (WOFF)
  • Web Open Font Format 2 (WOFF2)

Brand_Fonts_and_Text_Styles_4.png

Brand_Fonts_and_Text_Styles_6.png

As seen in the screenshot below, which can be found when you scroll down the Typography tab, the colored icons are Google Fonts whereas the text icons are Custom Fonts. 

Brand_Fonts_and_Text_Styles_5.png

How to delete a Custom Font

Deleting a Custom Font is simple! You can click the bin icon next to the Custom Font on the right of it.

Brand_Fonts_and_Text_Styles_5.png

How to set up Brand Text Styles

Create Text Styles

From the Brand Text Styles section, Admins can create new Text Styles for both Pages and Channels. 

You can click Add Text Style at the top right corner to make one. The Text Style setup can be given a name. It can also be previewed either when you’re customizing the Text Style, or from the Typography tab by clicking the eye icon once the Text Style has been created.

Brand_Fonts_and_Text_Styles_7.png

Delete Text Styles

To delete a Text Style, you can click the bin icon next to the preview button for an existing Text Style.

Define Channel Text Styles

Text Styles can be customized for Articles and Posts (and therefore Announcement Posts). The details you can alter include:

  • Heading 1
  • Heading 2
  • Heading 3
  • Body text
  • Comments

What you can alter includes:

  • Font family
  • Font weight

Brand_Fonts_and_Text_Styles_6.png

Brand_Fonts_and_Text_Styles_1.png

Define Page Text Styles

You can customize the Text Styles in Pages based on:

  • Heading 1
  • Heading 2
  • Heading 3
  • Body
  • Link
  • Quote

What you can alter includes:

  • Font family
  • Font weight
  • Font size (px)
  • Line height (px)
  • Letter spacing (px)
  • Color

Brand_Fonts_and_Text_Styles_7.png

Brand_Fonts_and_Text_Styles_2.png

Set a Brand Text Style as Active

The Text style you want to use in Pages and Channels must be Set as Active. Click Set as active to enable the Text Style. 

Brand_Fonts_and_Text_Styles_8.png

You can adjust which Text style is Set as Active from the main Typography tab as well by clicking on the checkmark symbol.

Important notes about Text Styles in terms of Channels and Pages

As noted previously, Active Brand text styles apply to newly created Pages and existing Pages. They will not apply to Pages where a Style Template is used that already contains Paragraph Styles. This is to prevent undesirable changes to specific content with a custom setup.

Existing Pages that already have paragraph styles will not be updated.

For Channels, Active Brand Text Styles apply to all new and existing Posts and Articles.

How to use Brand Text Styles in Channels

Brand Text Styles for Channels automatically apply to all new and existing text content created in Posts and Articles, by the user. It does not apply to the UI or a Channel Feed Widget when used in Pages.

How to use Brand Text Styles in Pages

Apply to new Pages

Once a Brand Text Style is set as Active, all new Pages will automatically use these styles by default. Any Paragraph Styles that are applied to a Page via a Style Template will take precedence and disconnect the Active Styles from your Page.

This also means that when you edit a text in a Text Widget, these edits will override your Style Template and Branding settings set in the Admin Settings.

Apply to existing Pages that use Paragraph Styles

To apply Text Styles to Pages that have not inherited the Active Styles, the user will need to:

  1. Navigate to Page Group Styles (from the Page Settings, click the paintbrush icon)
  2. Click Styles
  3. Open Paragraph Styles
  4. Click Reset to default. This will clear the Custom Styles so that your Active Brand style is applied

Brand_Fonts_and_Text_Styles_8.png

Brand_Fonts_and_Text_Styles_9.png

If you do not wish to completely reset the Paragraph Style, you can manually bring it up to date by adjusting the settings in the Page Group Style settings. To navigate to the Paragraph Style editor, you can:

  1. Click Page Group Styles (the paintbrush icon in the Page editor menu)
  2. Styles
  3. Edit template
  4. Paragraph Styles

Apply to Pages that don’t have existing Paragraph Styles

Once a brand text style is set as Active, all existing Pages will automatically use these styles by default

 

Previous
Next
9430115481617
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.