Lightning Communities Developer Guide

Get Up to Speed with Lightning Communities
Develop Lightning Communities: The Basics
Customize the Look and Feel of a Lightning Template
Update a Template with the Branding Panel
Override Template Elements with Custom CSS
Override Default Fonts with Custom Fonts
Customize the Theme Layout of Your Template
Create Custom Content Layout Components for Communities
Configure Swappable Search and Profile Menu Components
Standard Design Tokens for Communities
Example: Build a Condensed Theme Layout Component
Develop Secure Code: LockerService and Stricter CSP
Analyze and Improve Community Performance (Developer Preview)
Community Migration, Packaging, and Distribution
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Override Default Fonts with Custom Fonts

You can upload custom fonts as static resources and use them to override the default fonts in your community. If you have more than one font file to upload, use a .zip file.
  1. In Setup, enter Static Resources in the Quick Find box and click Static Resources.
  2. Click New, upload the file, and give the resource a name. Keep a note of the static resource name.
  3. In the CSS Editor in Community Builder, use the @font-face CSS rule to reference the uploaded font.

    To reference a single font file, use the syntax /sfsites/c/resource/resource_name. For example, if you upload a file called letter_bold.woff and name the resource MyFonts, the URL is /sfsites/c/resource/MyFonts.

    To reference a file in a .zip file, include the folder structure but omit the .zip file name. Use the syntax /sfsites/c/resource/resource_name/font_folder/font_file. So if you upload fonts.zip, which contains bold/letter_bold.woff, and you name the resource MyFonts, the URL is /sfsites/c/resource/MyFonts/bold/letter_bold.woff.

    For example:
    1/* example font */
2@font-face {
3    font-family: 'letter_bold';
4    src: url('/sfsites/c/resource/MyFonts/bold/letter_bold.woff') format('woff');
5}
  4. Locate the fully qualified name of each component that you want to apply the font to and add CSS overrides in the CSS Editor.
    For example:
    1.THIS p.titleContainer.forceChatterCompactFeedItemBody {
2    font-family: 'letter_bold';
3}