Help Center - Adding Google Fonts to your Theme
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!
-
@Mischa - Turn off mobile go to "General" - "Help Center Settings" and uncheck "Mobile Layout".
Make logo bigger do the following:
Go to "General" - "Customize Design"
Go to "CSS" tab
Find line 418 should look like below:
.logo img {
max-height: 37px;
}Change your max-height to be larger.
-
Thanks!!
-
@Mischa - Your welcome! Best of luck
-
@Wes Thumbs up, really easy to do this, thanks a lot!!!
I am using the Gotham Font from typograpy.com and the workflow is the same like your Google Font workflow. I am using font-weight: 300 for regular text and 500 for strong.
Now i got the problem that all the text tagged as <strong> in my articles is in font-weight: 700 because the WYSIWIG-Editor defines it as 700. Is there an easy way to change it with CSS? :)
Sorry for my bad English ;)
Cheers,
Marco -
Hi, Marco - Any way you can post the link to your HC if it's open to the public so that I can see the code. I'm sure there's an easy way to edit it via CSS but it would help if I can see what is going on.
-
@Wes
Sure, here is the link: https://portal.legalflex.de
FYI: I am on the Enterprise Plan
-
Great thanks - Can you give me a link to an article where you have used the strong tag.
-
@Wes
Sure here is a link where the formatting was made with the WYSIWYG-Editor. I already tried to solve the the problem manually in this article with the subtitle (above the picture) and the first headline "Wann ist eine fristlose Kündigung unwirksam?"
-
@Marco - If I understand correctly you would like to use font weight of 500 instead of 700. If that's correct add the following to your CSS tab.
b, strong {font-weight: 500 !important; -
@Wes - Awesome! It works!!! Thanks a lot for your quick support! ;)
-
@Marco - Glad to hear and hope you have a great day!
-
Does this tutorial add the google font style to email triggers sent to ticket requesters? I am interested in using a google font for both our Help Center and for emails sent to customers through Zendesk Support.
-
Hi @Wes -
Articles on our support site include system response code that people may copy/paste into their command line. For an example, look at this article.
The green font represents command text (both the user entered, and system response) and right now, I can only apply a color to distinguish it from the regular body text. Using a non-monospace font is not handy for system commands as I need the ability to easily line up system response 'tables'. Right now, I have to physically create a ZDtable for the system response.
Normally our documentation uses Courier New (a mono-space font) or Lucida Console, but I can't find a way to define a new font style.
Thanks in advance!
-
@Lisa - Sorry for the delayed response as I've been out of town at a conference. You can import and apply any font that you would like. You can upload the fonts to the Asset area then call and import them in via the CSS tab. It would look similar to below but your URL would be from the Asset URL.
@font-face {
font-family: MYfont;
src: url(sansation_light.woff);
}You could also install a code highlighter which could highlight your code differently. I haven't tried any with the new Copenhagen theme but they did work in the past themes so they should still apply.
-
Hello!
Does Zendesk support the font Roboto? -
Hi Cilla and welcome to the community. The Help Center will take any Google font. As long as you are on a plan that allows you to edit our Help Center you should be able to follow the instructions above. Just add the google font link into the "Document Head" then go into your CSS and call that font.
Below goes into the "Document Head"
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
In your CSS you will call it like below:
font-family: 'Roboto', sans-serif;
-
The interface to edit the Document Head has changed it is now located:
Guide Admin > Customize Design > View Theme > Edit code > document_head.hbs
Post is closed for comments.
47 Comments