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 (and to content within Steps for legacy content). You can adapt the CSS template below if needed. 

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.

CSS Template

This code applies font changes throughout the platform, excluding Blocks content.

  /* platform headings */
  .PathGroupDetails__title {

  /* content h1 */
  .Text--theme h1,
  .theme-typography h1,
  .Redactor--theme .redactor-editor h1 {

  /* content h2 */
  .Text--theme h2,
  .theme-typography h2,
  .Redactor--theme .redactor-editor h2 {

  /* content h3 */
  .Text--theme h3,
  .theme-typography h3,
  .Redactor--theme .redactor-editor h3 {

  /* content h4 */
  .Text--theme h4,
  .theme-typography h4,
  .Redactor--theme .redactor-editor h4 {

  /* content h5 */
  .Text--theme h5,
  .theme-typography h5,
  .Redactor--theme .redactor-editor h5 {

  /* content blockquote */
  .Text--theme blockquote,
  .theme-typography blockquote,
  .Redactor--theme .redactor-editor blockquote {

  /* content body text */
  .Text--theme div,
  .theme-typography div,
  .Redactor--theme .redactor-editor div,
  .Text--theme p,
  .theme-typography p,
  .Redactor--theme .redactor-editor p,
  .Text--theme li,
  .theme-typography li,
  .Redactor--theme .redactor-editor li,
  .question-card-view header .question-card-description {

  /* content links */
  .Text--theme a,
  .theme-typography a,
  .Redactor--theme .redactor-editor a {

  .Text--theme a:hover,
  .theme-typography a:hover,
  .Redactor--theme .redactor-editor a:hover {


  .Text--theme span:not([class]),
  .theme-typography span:not([class]),
  .Redactor--theme .redactor-editor span:not([class]) {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;

  /* italic */
  .Text--theme i,
  .theme-typography i,
  .Redactor--theme .redactor-editor i,
  .Text--theme em,
  .theme-typography em,
  .Redactor--theme .redactor-editor em {
    font-family: inherit;


  /* bold */
  .Text--theme b,
  .theme-typography b,
  .Redactor--theme .redactor-editor b,
  .Text--theme strong,
  .theme-typography strong,
  .Redactor--theme .redactor-editor strong {
    font-family: inherit;
    font-weight: 500;

  /* bold and italic */
  .Text--theme i>b,
  .theme-typography i>b,
  .Redactor--theme .redactor-editor i>b,
  .Text--theme em>b,
  .theme-typography em>b,
  .Redactor--theme .redactor-editor em>b,
  .Text--theme b>i,
  .theme-typography b>i,
  .Redactor--theme .redactor-editor b>i,
  .Text--theme b>em,
  .theme-typography b>em,
  .Redactor--theme .redactor-editor b>em,
  .Text--theme strong>i,
  .theme-typography strong>i,
  .Redactor--theme .redactor-editor strong>i,
  .Text--theme strong>em,
  .theme-typography strong>em,
  .Redactor--theme .redactor-editor strong>em,
  .Text--theme i>strong,
  .theme-typography i>strong,
  .Redactor--theme .redactor-editor i>strong,
  .Text--theme em>strong,
  .theme-typography em>strong,
  .Redactor--theme .redactor-editor em>strong {
    font-family: inherit;
    font-weight: 500;

Sample attributes


   font-family: "fontname", serif;

   font-weight: 300;

   font-size: 26px;

   font-style: normal;

   line-height: 42px;


   margin: 30px 0 !important;

   padding: 24px 0;

   text-align: center;

   border: none;

   border-top: 1px solid rgb(150,46,46);

   border-bottom: 1px solid rgb(150,46,46);


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?