[Internal] Font Override

[Internal] Font Override

Introduction

This guide provides step-by-step instructions for when a client would like the default font changed on their template . There are steps for when making the change to all modules and separate steps for when making the change to a specific module. For a font override, it's important to go through the entire orientation to make sure all header tags, buttons, section and page titles were updated to the new font.

Font Override for all Modules


NOTE: To see how to create this override for all client modules, see the Create a Theme Override That Applies to all Client Modules guide.

 

 

1) From the Styles dropdown, select Create New .

2) in the File Name textbox, enter the name of the override. The name must not contain any spaces and it should reflect the change (e.g., logo_override_comevo ).

3) Copy and paste the following CSS code into the CSS textbox:

 

NOTE: The URL and name of the font family will need to be updated to what the client is requesting. Most fonts are not free. The client should be able to provide you with a URL or access to the font. If the client is using Google Fonts, go to fonts.google.com to locate the import URL.

 

/*---Font Override for Content, Headers and Navigation Pane---*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

#content, .section-title, .subnav-child a, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: 'Open Sans', sans-serif; }

/*---End Font Override---*/

4) Click Save .


Font Override for a Specific Module


NOTE: To see how to create this override for one client module, see the Create a Theme Override That Applies to one Client Module guide.

 

 

1) After creating a new theme, the Edit Theme form appears.

 

2) in the File Name textbox, enter the name of the override . The name must not contain any spaces and it should reflect the change (e.g., logo_override_comevo ).

3) Copy and paste the following CSS code into the CSS textbox:

 

NOTE: The URL and name of the font family will need to be updated to what the client is requesting. Most fonts are not free. The client should be able to provide you with a URL or access to the font. If the client is using Google Fonts, go to fonts.google.com to locate the import URL.

 

/*---Font Override for Content, Headers and Navigation Pane---*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

#content, .title, .section-title, .subnav-child a, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: 'Open Sans', sans-serif; }

/*---End Font Override---*/

4) Click Save .
To apply a theme override, refer to support guide Theme Override: Apply it.

 



    • Related Articles

    • [Internal] Theme Override Index

      Introduction This index provides a list of overrides you can make to a theme, which includes a link to the step-by-step guide for doing each one. To jump to a guide, just click on the override. Background Image Blurry Background Image: Clear it up ...

    • [Internal] Theme Override: Apply it

      Introduction This guide provides step-by-step instructions for applying a theme override after all the changes are made. These instructions are for overrides that apply to all client modules, as well as those that apply to one client module.     ...

    • [Internal] Support Guide Index

      Introduction This index provides an easy way to jump to any internal support guide without having to navigate to find it . Admin Intake Screen: Setting up a Pre-filled Email Address Organizational Unit: Create a New One Reports: Understanding Them ...

    • [Internal] Header in an Orientation: Resize it

      Introduction This document provides step-by-step instructions for adding the appropriate CSS to resize a header in an orientation when creating a theme override. These steps apply when resizing a header in all modules or just a single module. NOTE: ...

    • [Internal] Create a Case

      Introduction This document provides step-by-step instructions for creating a case in the Zoho CRM app. When technical support is needed, a case is created in Zoho CRM. Create the Case 1) Navigate to the client's account in Zoho CRM. 2) On the left ...