Zendesk level: Beginner to Intermediate
Knowledge: CSS
Time Required: 20 minutes
Font choice is an integral design decision on any website. While the main body of text should always be something optimized for readability, titles and standout text can be your space to add a unique design with some font flair.
This tutorial will show you how you can easily add fonts into your Help Center. We will be making changes in the “Document Head” section and also the “CSS” section.
BEFORE:
AFTER:
Google Fonts has over 600 fonts to choose from and it’s super easy to add them into our theme without having to upload anything. This tutorial would be way to long if I tried to show you everything that Google Fonts can do so I found this great link which you can read over. We will only cover the necessary steps to get everything into your Help Center.
*I would stay away from the Google cursive fonts as they do not look the same across all browsers.
Note: Don’t want to use google fonts? Then check out this tip from Jan B.
LET’S GET STARTED!
First head over to the Google Fonts website and select your font or fonts.
For this example I’m going to select two fonts: Libre Baskerville & Devonshire
Google Fonts is going to give you the code below that we need to add into our “Document Head”. It will be under number 3.
Important: Keep the Google fonts page open as we will be using it again.
Let's add your Google Fonts code to Document Head
- From the “Tools Panel” select “Customize Design”
- Select “Edit Theme”
- Select “Document Head” and copy and paste the code from Google Fonts. Change http to https in the line below.
Let’s edit the CSS Body first
The body font is used throughout the Help Center so you want to make sure this is a very readable font.
- From the “Tools Panel” select “Customize Design”
- Select “Edit Theme”
- Select “CSS” and find Body { (should be around line 14 if you have default CSS)
- Locate the font-family: $font_1; and remove it.
- Back on your google fonts page under number 4 select the font that you are going to use for the Body of your Help Center. For my body I’m going to use Libre Baskerville. Copy the code.
- Paste this code into the CSS where you deleted the previous code.
Let’s Edit the H1-H6 headings
We are going to basically repeat the steps above.
- Select “CSS” and find h1, h2, h3, h4, h5, h6 { (should be around line 41 if you have default CSS)
- Locate the font-family: $font_2; and remove it.
- Back on your google fonts page under number 4 select the font that you are going to use for the Headers of your Help Center. For my h1-h6 I’m going to use Devonshire. Copy the code.
- Paste this code into the CSS where you deleted the previous code.
SUMMARY
We have just replaced the main fonts in your Help Center however there are more that you can replace if you would like. Just do a search for “font-family:” I would recommend copying all the CSS code into NotePad++ or another editor to do your searching and replacing.
There is a lot you can do with CSS so experiment with different fonts until you find the one you like. You could also have different fonts for different headings like below:
h1 {
font-family: 'Libre Baskerville', serif;
font-weight: bold;
color: #0066CD;
font-size: 36px;
}
If you do something like what I did above just make sure you remove the h1 heading from the following line:
h1, h2, h3, h4, h5, h6 {
The possibilities with fonts are endless so have fun and good luck!
