1

Can I add new font to the picklist from Napili Branding community? enter image description here

0

3 Answers 3

2

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.

2
  • I know that and now I using similar solution. I upload my custom fonts to assets of community and define in css. But I trying add this font to specific picklist for community branding and I don't know it is posible and if yes how shoud do this.
    – John
    Aug 8, 2017 at 17:21
  • first line of the post answers your question =P
    – glls
    Aug 8, 2017 at 17:24
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

2

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:

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');
}
  1. In the Branding panel, under Fonts, click Use Custom Font and add the font family name.

Branding Panel Enter Custom Font

1
  • all correct though if you've qualified your community path, you will have to include the path in the resource url as well. in setup, goto Custom URLs. if the path is defined as xyz, for example, the font definition should be: @font-face { font-family: 'myFirstFont'; src: url('/**xyz**/sfsites/c/resource/MyFonts/bold/myFirstFont.woff') format('woff'); }
    – user57759
    Jun 21, 2018 at 18:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.