How do I change my help center's font?

Zendesk allows you to change the font of your help center. By default, Zendesk brings a series of pre-determined fonts that you can choose from, but you can also add additional fonts to your help center. Whether that's a local webfont or a Google Font. Let us show you:

Use a default font:

1. Go to Guide

1._go_to_guide.png

2. In the sidebar navigation click on the Customize design icon

2._side_bar_customize_design.png

3. Click the Customize button under the theme you want to update

3._for_theme__click_customize.png

4. In the Setting panel, click Fonts

4._in_settings__click_fonts.png

5. Here you have a choice. You can switch the Heading Font and the Text Font by clicking on the dropdown and choosing from the available fonts

5._font_choices.png

 

Use a local font:

1. Go to Guide

2. In the sidebar navigation click on the Customize design icon

3. Click the Customize button under the theme you want to update

4. Click the Edit code button at the bottom right of the screen

4._edit_code.png

5. Click the assets folder

5._click_assets.png

6. Click Add asset and upload your web fonts

6._click_add_asset.png

7. Please note that Zendesk will create URLs for the fonts 

8. Click on the syles.css file and add this to the top of the page for each font variation replacing the font-family name and URLs:

@font-face {
font-family: 'Regular';
src: local ("Regular"), 
src: url('//company.zendesk.com/hc/assetslink.eot');
src: url('//company.zendesk.com/hc/assetslink.eot?#iefix') format('eot'),
url('//company.zendesk.com/hc/assetslink.woff') format('woff'), 
url('//company.zendesk.com/hc/assetslink.ttf') format('truetype'),
url('//company.zendesk.com/hc/assetslink.svg#webfont') format('svg');
font-weight: 400;
font-style: normal; 
}

 8._style.css.png

Use a Google Fornt:

  1. Go to Guide
  2. In the sidebar navigation click on the Customize design icon
  3. Click the Customize button under the theme you want to update
  4. Click the Edit code button at the bottom right of the screen
  5. Click on style.css and choose the font you would like to use and add the @import line Google Fonts provides. Here is an example:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Still need help?

Contact Us

Was this article helpful?