About font families

Most companies use a regular font like Arial or Helvetica. These fonts are a way of showing your text. Some fonts are really modern while others are more elegant. The way you want to show your text, is a personal taste. Most businesses have requirements when it comes to writing text. In almost every case the font family and the size is a basic requirement.

Here is where the tricky part starts. Some companies, like mine, use a custom font. Specially tailored to your needs, a custom font a very cool way of making eye candy out of everything. But it requires some additional work when it comes to websites and Help Centers from Zendesk. So let's get started.

Ingredients

A custom web font, with the following files

webfont.ttf

webfont.eot

webfont.svg

webfont.woff

Custom theme in the Help Center

Some CSS skills (Beginner HTML & CSS Level is good enough)

How to do it

Now you have all the ingredients, lets start baking the new font into your Help Center.

Steps:

Open the Help Center.

From the tools panel, select Customize design.

Select Edit Theme.

Open up the Assets folder

Upload all four files. Zendesk will create a link for you.

Go to the CSS Tab and write the following code. (Somewhere you can remember. I suggest at the bottom.)

Note: If you modify your Zendesk URL, you must insert that in the code. In my case, that's support.connexys.nl. That will replace the company.zendesk.com part. When agents log in, the URL changes, making the Font not available, but customers will see the proper font.

7.

Replace the zdassets.com URLs with your URLs. Be very careful with the ' at the beginning and ' at the end.

You may rename the font family anything you like. Just remember, don´t use the spacebar, use_an_underscore.

Now let's activate the font within the CSS.

Go to the Body { code. Add in the following code. The $font_1; should be there already. Replace this. And of course, replace your_webfont_name.
> /* font-family: $font_1; */

font-family: your_webfont_name;

Go to the a { code. Add in the following code. $font_2 should be there. Replace this.
> /* font-family: $font_2; */

font-family: your_webfont_name;

Go to the h1, h2, h3, h4, h5, h6 { code. Add the following.

font-family: your_webfont_name;

Go to the .dropdown-toggle. Add the following.

/* font-family: "entypo"; */

font-family: your_webfont_name;

That's it!

Now you have replaced most of the fonts within the CSS. Your Help Center will now appear in your (custom) font. If you find any text that isn't showing in your font, look in the CSS for 'Font-family: not-your-font; And replace this.

Note: Don't add the Font of the CSS .search:before, .search-small:before. It will remove the Search icon in the Swiftest Elk theme.

The best way of replacing font codes is using one of the examples above. In those examples we exclude the Zendesk code without deleting it. If you ever want it back, it saves you a lot of searching and typing.

@Wes, please add your Google Fonts tip. It looks the same, but under the hood it's quite different. You may not even be using the Assets folder in the editor. Besides that, its better to have both then nothing :-)

@Jan yes you are correct I try not to use the Assets folder for any of tips unless I just have too. The less steps there are, the better for non-technical users. The problem with my font tip is I'm going too deep on the CSS and when I finished I thought it was too long. I've started over and maybe I can finish it up by the end of this week. I will add a link to your post inside of my tip so users can see both ways of doing fonts.

Hello, its me again. I have found something with the custom font in combination with FireFox. FireFox is a really strict browser when it comes to security. Therefore it doesn't like external posted URL's like the ones I use in this tip. There is no real harm in it. Firefox will just not load your custom fonts. I have tried to fix this problem, but had no success so far.

@Wes, you might want to take a look at this doing your Google Fonts tip. Especially for the Enterprise Zendeskians in combo with SSL, it's going to be a real challenge to get it working.

What changes? The URL's in the code are now pointing to your own Zendesk. It has your company.zendesk.com in it. This way FireFox thinks the Custom font is stored on the same location and will accept the new font. WIthin the CSS I'm telling FireFox where to look. All the other browser will also accept this.

Where is the catch? Well, if you mod your Zendesk URL (Enterprise only i think) you must insert that in the code. In my case, that's support.connexys.nl. That will replace the company.zendesk.com part

Also. When Agents log in, the URL changes. Making the Font not available. Clients, customers will see the proper font.

For now, this is the only way of 'escaping' the strict rules of FireFox.

@Jennifer, can you replace the code after step 6 with the one in this comment? I don't want to mess up all your hard work :) Step 8 is going to change a little bit

Old: Replace the zdassets.com URL's with your URL's. Be very carefull with the ' at the beginning and ' at the end.

New: Replace the zdassets.com URL's with your own assets URL's and edited in your Zendesk URL. Most likely company.zendesk.com/hc/theme/etc (If you are Enterprise with a custom domain, use that. example: support.connexys.nl/hc/theme/etc ) Be very carefull with the ' at the beginning and ' at the end.

@Wes, the Google fonts don't have this problem. I have tried it with FireFox, and it will accept Google Font because they are hosted at Google. Basically, just using the code Google gives you works fine

@Mariah - If this doesn't work out for you would you be interested in using Google Fonts as I have not seen any issues with the browsers using those. The link to my article is posted at the top of the instructions if your interested.

@John, using just a TTF set should work. Most of the times Internet Explorer doesn't accept the TTF set and wants a EOT or WOFF format. With the other browsers you can follow the steps in the tip. If you are keen on using Internet Explorer, maybe using Google Fonts is a better option. Wes has written a nice guide about that. (Link to that is in this article as well)

@Lucas; Thanks for the head-ups! You are right when it comes to custom company url's. Maybe Jennifer can mod in your info into the Article.

@Jennifer: Could you please add in the info Lucas shared with us :) You may add it in with Step 6 under the note I typed there. I'm a bit scared I will mess up your hard work by editing it myself.

@Jan Your instructions worked like a charm and thank you for sharing your tip! I changed all font-family items in CSS to OpenSans and the assets I used were a OpenSans-Regular.ttf and OpenSans-Regular.eot.

All the bold and italic text in my articles seem to have inherited OpenSans as well, which is great!

It is possible to add 2 Custom Fonts to your CSS. This is a lot of work, especially when you want headings to have a different Font as normal text. You will have to find all your headers (Step 9 bullet 3) and add in the custom font.

The code to add in 2 custom fonts is not that different from the normal 1 custom font. Here is an example

@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}

@font-face {
font-family: CustomFont2;
src: url('CustomFont2.ttf');
}

Make sure you name your Custom Font in a way you can easily type and remember it. If you have any questions, feel free to ask. Ill try to help out.

Sorry for the really late response. I could not find the time to reply earlier. (Doing it on my day off now :D)

Did you added the mycompany.zendesk.com to your own URL? (I think you did, but its really important. So if you log to the URL abshop.zendesk.com, that should be in there. Example ('//abshop.zendesk.com/hc/theme_assets/596873/200073129/museosans_900-webfont.eot'),

You added in the Woff2 file in perfectly. So thats not the problem. Its the bigger brother of WoFF. (For the other readers here) The other Fonts are loading in correctly too.

Hi there, I'm trying to add fonts (sourced from Typekit, not a file) into my theme. I've entered the below code, but when I save the changes, the fonts are not showing up on my site. I've published them in the Typekit platform, but I'm wondering if my syntax is correct. These are the fonts I'm trying to add: .tk-alternate-gothic-no-3-d, .tk-proxima-nova. Thanks!

Hi Lauren - Its been a while since I've worked with a TypeKit font but it should have gave you more code. The CSS you posted is correct but if you should have either an @font-face import code or some code that goes in your Document Head that imports the fonts for you. Hope this helps and gets you on the right track.