Knowledge Base Article

Aurora: Set the font style and size for your community

You can set the font style and size for the headings and the body text from the Theme editor's Fonts area. To customize your site's fonts, open the Account menu and go to Designer > Theme > Fonts.

 

Heading styles and sizes

Set the style and size for different heading levels.

  • Font Picker: The font picker enables you to set the font family for headings in your community. You can choose from Local Fonts that are installed on your computer, Sans Serif font families, or Serif font families, or you can add a custom font family from Google Fonts.
  • Add Custom Font: Click Add Custom Font to add a custom font family from Google. See Add a custom font.
  • Font Weight: The font weight menu enables you to choose a style for the font family used in headings. Choose from among LightRegularMediumBold, and Italic.
  • Headings 1 through Headings 6: You can set the size from 14 to 56 pixels for the different headings using their respective sliders. Defaults are shown in the screenshot below.
  • Line height: Set the distance between the two lines in the headings of your community content (default 1.3).
  • Top spacing: Set the amount of space above heading text (maximum 60 pixels).
  • Bottom spacing: Set the amount of space below heading text (maximum 40 pixels).

Body text styles and sizes

Set the body text style and size:

  • Font Picker: The font picker enables you to set the font family for headings in your community. You can choose from Local Fonts that are installed on your computer, Sans Serif font families, or Serif font families, or you can add a custom font family from Google Fonts.
  • Add Custom Font: Click Add Custom Font to add a custom font family from Google. See Add a custom font.
  • Font Weight: The font weight menu enables you to choose a style for the font family used in body text. Choose from among LightRegularMediumBold, and Italic.
  • Paragraph text: Set the text size used in your community content (default 16 pixels).
  • Small: Set the text size used for supportive text blocks and text within widgets in your community (default 14 pixels).
  • Extra Small: Set the text size used for supportive text blocks in a community, such as within the breadcrumb trail (default 12 pixels).
  • Subheading: Set the subheadings that appear at the top of any content in your community (default 11 pixels).
  • Line height: Set the distance between the two lines in the body text of your community content (default 1.5).
  • Bottom spacing: Set the amount of space below body text (maximum 40 pixels).

Add a custom font

You can add a custom font family from Google Fonts or your local machine.

To add a custom Google Fonts family via pasted code:

  1. In the Fonts panel, click to open the font picker in the Headings or Body text section depending on which type of text should use the Google font family.
  2. Click Add Custom Font.
  3. In Google Fonts, copy the code provided for the font family you want to use.
  4. Paste the code into the Insert in <head> code field.
    Note: Variable fonts containing variable axes (axises) or weights are not supported in Aurora.

    Example of a font with variable weights: 
    https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,800;1,800&display=swap
    If you want to add more weights, you must specify the exact values in the <head> embed code.
  5. Click Add Font.

To add a custom font family via file upload:

  1. In the Fonts panel, click to open the font picker in the Headings or Body text section depending on which type of text should use the new font family.
  2. Click Add Custom Font.
  3. Click Upload File.
  4. In the Font file field, click Browse to locate the font file on your local machine.
  5. (Optional) Edit the pre-populated Font family name field.
  6. In the Style drop-down menu, select the desired style for the font.
  7. Click Add Font.
  8. (Optional) Continue adding fonts as needed.

After you’ve added your custom font, it is automatically selected to be used in the community and appears in the Choose a Font panel under Custom Fonts. From the Options menu (ellipsis icon), you can change or remove the font.

Note: Before clicking Save and Publish to push your Theme changes to the community, verify you have the correct fonts selected.

Reset fonts to default values

To reset the font back to the system defaults, click Reset Fonts to Defaults in the Fonts panel.

Important: Resettings fonts reverts all the settings to their system defaults, not the settings you saved previously.

Updated 4 months ago
Version 28.0
No CommentsBe the first to comment