Add new font to community Napili Branding

Question

Can I add new font to the picklist from Napili Branding community?

Answer 1

No - this is not possible.

If you want to add custom fonts, you have to do so through CSS

Branding </>

Download a font file

Convert file to Base64 String,

and , edit CSS in your Community, for Ex:

@Some-Font { 
    font-family: 'FontName'; url(data:font/truetype;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE) format('truetype') 
} 
div {
    font-family: FontNamed; 
}

there is another stackexchange post that addresses how to do this in more detail.

Answer 2

hm, I don't know if you need add new font because somfing in default is wrong.

I import google font to the community via community builder -> branding -> -> to the top add imported font for example:

link to the google fonts

css example:

@import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i|Raleway:100,200,200i,400,500,600,600i,700,700i,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');

or with base64 like in post @glls

Answer 3

It is now possible to set custom font in the Napili brand editor template, use the instructions at the following link - https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_customize_font.htm

These instructions allow you to add the font in the branding editor, and doesn't require you to reference the resource directly in the head markup.

To get this working you'll need to perform the following steps:

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. If you have more than one font file to upload, use a .zip file to bundle the fonts.
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.

If you want more information regarding the CSS property font-face visit the following links:

• https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face
• https://css-tricks.com/snippets/css/using-font-face/

Below is example CSS of an example font being referenced from a zipped folder:

@font-face {
    font-family: 'myFirstFont';
    src: url('/sfsites/c/resource/MyFonts/bold/myFirstFont.woff') format('woff');
}

4. In the Branding panel, under Fonts, click Use Custom Font and add the font family name.