browse
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
- Download the theme code
- Edit Style.css
- Edit manifest.json
- Edit document_head.hbs
- 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
Comments
0 comments
Please sign in to leave a comment.