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!
-
Really well put together and easy to follow - thanks!
-
Thanks for the feedback David and I'm glad it helped. Good luck with your customization.
-
I just noticed that since I have SSL enabled Google fonts are blocked by default due to the 'http' in the address listed on step 3. The solution was really easy!
Find this line on your HTML page (or template):
<link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>
and change it to this:
<link href='//fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>
This simple change will make your browser call the Google Font page in the applicable mode (HTTP vs HTTPS) and fix the problem I was running into!
Thanks again!
-
@David, glad you figured it out. Thanks for sharing the fix with us!
-
Great tip—thanks, Wes!
-
@Aaron - Thanks and enjoy.
-
So I just noticed one thing about the new font:
Underscores are invisible when you're typing them into any of the text fields in the Admin sections of Zendesk (Adding/editing macros, views, etc.)
This is for single line text fields only - underscores appear just fine in multi-line text boxes.
I'm hoping that someone at ZD can fix this to they appear in single line text fields again, since most of the tags we use in our macros use underscores in between every word.
-
Hi Bob,
The change to Zendesk's font is different than what Wes describes here.
I'm trying to replicate what you're seeing - do you have a screenshot of a place where you're trying to type an underscore and it's not showing?
-
Oops! I commented in the wrong thread (had not open then got distracted).
I'll repost the question in the right thread and include a screenshot. :)
-
No worries, I'll catch up with you when I see that come through :)
-
An even easier fix for fonts being blocked by ssl is to simply change the links href to https rather than http. eg:
<link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>
becomes
<link href='https://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>
-
@Richard - Too many screenshots to update but yes in order for Zendesk not to block the font you need to use https:
I'll see if I can get them updated soon.
-
I am using a modified version of the Humble Squid theme and these instructions are working great on everything except for my headings. I can't get the title to switch to any of my Google fonts. I was able to do so when I deselected the font showing up for h1 when I "inspect element" but then when I switched to a different browser the title still had the old font. This doesn't seem to be "overriding" the browser.
Here is an image that may give more insight. I've put my desired font as something comically ridiculous so that it is more easily identifiable.
-
@Sane - You need to add the following to your CSS under the h1. h2 etc
Add the following:
font-family: (your font); (google will show you exactly what to put in here)
Here is an example:
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
} -
@Wes It might not be clear in the picture, but I did add the font family in there. I follow the instructions in this article to the T and am still having the issue. Any other ideas? Thanks in advance.
-
@Sane - Its hard for me to see unless I can actually see your HelpCenter so I can take a look at what you have. Is there any way you can post the link to your HelpCenter.
-
http://support.swizznet.com/hc/en-us
This may direct you to our public-facing site, the old knowledgebase rather than the help center.
-
@Sane, I'll create an account on your Help Center as I have to be logged in. My account will be support@wesdrury.zendesk.com and you can delete it once we are done.
-
Wes,
I attempted to do that with a test user (non-admin/tech agent) and still saw the old support site so you may have further trouble. I am adding my code here just in case. Again, the font is ridiculous just to make it clear in images.
h1, h2, h3, h4, h5, h6 {
font-family: 'Devonshire', cursive;
color: black;
font-weight: 400;
} -
@Sane - Your code looks fine and I don't see anything wrong with it. In your Document Head make sure you have https: and not http as Zendesk doesn't allow non-secure links. My examples above only show http however it must be https. Hope this helps.
-
@Wes,
Thank you for trying to help. Turns out that there is now 2 completely different "Base Style" sections in my code that was causing this issue. I have no clue how the second got there.
-
@Sane - Glad you got it figured out.
-
Hi,
I am creating a theme for my helpcenter and followed this guide but it don't seem to work for me, I can only choose between the default fonts. The help center is under construction and are not visable yet but do I have to active the help center before I can see the adjustment of the fonts?
-
Hi Eva - I have verified this solution currently works. Please make sure that in your document head you have "https" and not "http" in the URL for the google font. Also did you add the font-family in your CSS.
I don't believe the Help Center has to be active in order for this font to show up. Can you tell me what font you are trying to use and paste a copy of where you are using it in your CSS.
-
Hi Wes,
The fonts are Open Sans and Asap från google fonts. Let me know if I should paste something more :)
Here is the document head:
<!-- add code here that should appear in the document head -->
<link href='https://fonts.googleapis.com/css?family=Asap|Open+Sans' rel='stylesheet' type='text/css'>And the body CSS:
body {
color: $color_4;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 1.5;
margin: 0;
padding-bottom: 50px;
}And the headings:
h1, h2, h3, h4, h5, h6 {
color: black;
font-family: 'Asap', sans-serif;
font-weight: 400; -
Update: There was an $ at the wrong place.. Problem solved :)
-
@Eva - Awesome, glad to hear you got it all worked out. Best of luck.
-
Is it possible to display Google fonts on mobile version of the theme?
-
@Mischa - If your theme is responsive then yes, if you are using the Zendesk mobile then I don't believe so. With responsive themes you can turn off the Zendesk mobile as the theme will work across all the devices. Zendesk has one responsive theme called "Copenhagen". Use that theme and turn off the mobile in your Help Center settings.
-
Thank you, Wes! We do indeed use Copenhagen theme. How exactly do I turn off mobile in the settings exactly?
Also - not related to this - how do I make my logo a bit bigger on a Copenhagen theme?
Post is closed for comments.
47 Comments