Edit your font styles with CSS

Learn how to customize your font styles and colors.

Laurie Garcia avatar
Written by Laurie Garcia
Updated over a week ago

If you have coding knowledge and want more customization than is available in your account branding settings, you can add custom CSS (Cascading Style Sheets).

🗒 Note: Before you customize your CSS, just know that we can't provide support for any changes you make due to the infinite number of possibilities. Additionally, we make frequent small improvements to the UI and sometimes redesign areas completely which impacts CSS code across the platform. With that in mind, know that we can't guarantee your customized CSS will always apply or give advance notice for changes. To keep your custom CSS maintenance minimal, we suggest limiting your CSS changes to fonts and colors.

How to add CSS

Open your Administrator Dashboard and click "Account Settings" or just select "Settings" from the main menu. Go to "Customize your brand" and you'll see an advanced option where you can paste in your custom CSS (/manage/school/brand/css/).

H1, H2, H3, H4, body, blockquote and other text changes will be applied to your course headings and to the Path.

Hosting your font

Custom fonts require an embed code from a site like Typekit or Google Fonts. You can create an embed code for your desired font at a site such as (but not limited to):

Once you have the embed code for your font, go to "Account Settings" on the main menu or Dashboard, then "Connect other apps," then "Add custom code & pixel tracking." Paste your code into the header field (/manage/school/integrations/custom/). 

Note that using curly quotation marks instead of straight quotation marks can prevent the CSS from loading correctly.

Sample CSS for Blocks content

This code applies custom font changes to Block content inside of steps.

p { font-family: proximanova, "Helvetica neue", sans-serif; } ol { list-style-type: decimal; font-family: proximanova, "Helvetica neue", sans-serif; } ul { list-style-type: circle; font-family: proximanova, "Helvetica neue", sans-serif; }

Did this answer your question?