Using Custom Fonts

Using the right font can make a website more attractive and easy to read. Custom font is useful for changing the font according to what you want.

How do you change the font ?

This document contains detailed instructions to add more custom blocks

1. Download the theme code
2. Edit Style.css
3. Edit manifest.json
4. Edit document_head.hbs
5. Import new theme file to Zendesk

Download the theme code

• In the Guide Admin section, navigate to the theme workbench.
  

• Click on the theme settings icon, and choose Download. This will download the theme zip file.
  

• Extract the .zip file into a folder.
  
• Open Youth Folder
• Go to Assets
  
• And put your font file  in the assets folder (here I use the example of the dalfitra font)
  
  

Edit Style.css file

• Once extracted open the folder theme file with your code or text editor app such as Notepad or Notepad++. In our example, we're using Visual Studio Code
  

• Locate style.css and open it
  
• Enter the code below above the @media code. and change your_font to the name of the font you want.
  
  @font-face {

    font-family: 'your_font';

    font-style: normal;

    font-weight: 400;

    src: local('your_font'), url("{{asset 'your_font.woff'}}") format('woff');

  }
  
  

Edit manifest.json file

• Locate manifest.json and open it
  
• Find text font with Ctrl+F
• The custom font code is inside { }, so you should copy all the code inside and paste it below :
• then replace the word in the " " sign with your font name
  
  

• {
      "label": "your_font",
      "value": "'your_font',your_font_type"
  },

Edit document_head.hbs file

• Locate document_home.hbs in templates folder and open it
• Copy paste the code inside {{#issettings.body_font_family"'your_font', your_type_font"}} and end with {{/is}} and replace it with your font url 
  
  
  

• {{#issettings.body_font_family"'your_font', your_font_type"}}
      <linkhref='your_font_url' rel='stylesheet'>
  {{/is}}

• Go back to Youth folder select all the items there and then add it to archive.
  

• Set the format to .zip
  

Import the new theme file to Zendesk

• Drag the youth.zip or yourtheme.zip to Zendesk Guide theme workbench.
  

• Drag and drop it here.
  

• Once loaded, you can configure the settings and make it your live theme.
  
• Now you have added a Custom Font