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 Theme Panel
Override Template Elements with Custom CSS
Use Custom Fonts in Your Community
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
Connect Your Community to Your Content Management System
Community Migration, Packaging, and Distribution
PDF

Newer Version Available

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

Use Custom Fonts in Your Community

Upload custom fonts as static resources and use them for primary and header fonts throughout 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 myFirstFont.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/myFirstFont.woff, and you name the resource MyFonts, the URL is /sfsites/c/resource/MyFonts/bold/myFirstFont.woff.

    For example:
    1/* example font */
2@font-face {
3    font-family: 'myFirstFont';
4    src: url('/sfsites/c/resource/MyFonts/bold/myFirstFont.woff') format('woff');
5}
    CSS editor with custom font example
  4. In the Theme panel, select Fonts. At the bottom of the panel, click Use Custom Font and add the font family name.Use Custom Font button in Theme panelEnter font family name in Use Custom Font dialog box