Thanks for sharing Jan.  I have a font tip in the works but it looks like you beat me to it.  My tip is more focused on using Google Fonts so it will be a little different.  Great job!

Thanks for this great contribution, Jan! I'm sure a lot of users will find it helpful when they need to add a custom font. (And don't worry, Wes--people will still like your tip too! :)

Thanks for all the positive feedback! And the rework, Jennifer.

@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 :-)

I'm definitely happy to have both tips (whenever Wes finishes his!).

Jan, I'm linking all the HC tips here, so you can see the others Wes has done. 

https://support.zendesk.com/entries/25424716-Help-Center-community-tips-

And yours is there too! :)

@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. 

@Jan - thanks for the heads up and I will take a look when I get some time.

@Jan, thanks for the info. Good to know. Keep us posted if you find a workaround for FireFox.

Hello again! After some nights trying, I have found a solution for FireFox that will work, but with a catch. 

This is the new code that will show the custom font, even in FireFox. 

@font-face {
font-family: 'Regular';
src: local ("Regular"),
src: url('//company.zendesk.com/hc/assetslink.eot');
src: url('//company.zendesk.com/hc/assetslink.eot?#iefix') format('eot'),
url('//company.zendesk.com/hc/assetslink.woff') format('woff'),
url('//company.zendesk.com/hc/assetslink.ttf') format('truetype'),
url('//company.zendesk.com/hc/assetslink.svg#webfont') format('svg');
font-weight: 400;
font-style: normal;
}

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

Hope it helps for those using FireFox! 

Hi Jan,

That's awesome. Thanks for the update! 

I updated the code in the article and I added a note about the URL (double check it for me).

Thanks again for your hard work on this.

Hi Jennifer,

It looks great! Thanks for the edit on this article.

It should work on every major browser. If any one has questions, feel free to drop a comment!

Jan, thanks so much for writing this article with the FF adjustment! I was racking my brain as to why chrome was accepting the font and not FF. But now everything is copacetic! Gratzi!

Having issues getting the custom font to come through in IE, known issue? Any tricks or work arounds?

@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.

@Wes I will be sure to take a look! I am also not very worried about IE, just wanted to check!

Hi Mariah, 

As far as I know there is no issue with the Internet Explorers. Be sure that the EOT and TrueType are working, uploaded into Zendesk Assets and programmed into the CSS correctly. 

src: url('//company.zendesk.com/hc/assetslink.eot?#iefix') format('eot'),
url('//company.zendesk.com/hc/assetslink.ttf') format('truetype'),

These Fonts are the ones used in most Internet Explorers. 

If that's not working, can you give a description of the problem you are having? 

If you ever change your default Zendesk to support.yourcompany.com don't forget to change that on your rule as well:

@font-face {
font-family: 'Regular';
src: local ("Regular"), 
src: url('//support.yourcompany.com/hc/assetslink.eot');
src: url('//support.yourcompany.com/hc/assetslink.eot?#iefix') format('eot'),
url('//support.yourcompany.com/hc/assetslink.woff') format('woff'), 
url('//support.yourcompany.com/hc/assetslink.ttf') format('truetype'),
url('//support.yourcompany.com/hc/assetslink.svg#webfont') format('svg');
font-weight: 400;
font-style: normal; 
}

I downloaded this TTF set:  http://www.fontsquirrel.com/fonts/open-sans

It is a series of TTF files (for example, OpenSans-Bold, OpenSans-BoldItalic, OpenSans-Regular, etc.) but no .eot, .svg, and .woff files were included. Will the steps in this tip still work?

@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!

Trying to make this work and upload more than one font. More specifically, 2, on ncld.zendesk.com

Can't seem to get it to change for the headings though for the life of me. Unsure why. If I try to make the headings the first font, it defaults to a serif font instead.

Thoughts?

@Kevin, 

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. 

@Jan B,

I have been trying every permutation I can, to try to use a custom font in my theme. I am loading the font files into the assets tool, and I am using the following CSS:

@font-face {

font-family: 'Regular';

src: local ('Regular'),

src: url('//mycompany.zendesk.com/hc/theme_assets/596873/200073129/museosans_900-webfont.eot'),

src: url('//mycompany.zendesk.com/hc/theme_assets/596873/200073129/museosans_900-webfont.eot?#iefix'),

  url('//mycompany.zendesk.com/hc/theme_assets/596873/200073129/museosans_900-webfont.woff2') format('woff2'), 

url('//mycompany.zendesk.com/hc/theme_assets/596873/200073129/museosans_900-webfont.woff') format('woff'),

url('//mycompany.zendesk.com/hc/theme_assets/596873/200073129/museosans_900-webfont.ttf') format('truetype');

  font-weight: normal;

  font-style: normal;

}

.searchbox_header { 

  font-family: 'Regular'; 

}

Any advice would be greatly appreciated. Thanks!

Hello Matthew, 

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. 

There is 1 minor typo: At the first SRC: 

src: url('//mycompany.zendesk.com/hc/theme_assets/596873/200073129/museosans_900-webfont.eot'),

This needs a ; and not the comma , 

CSS is really picky and might not work just because of 1 tiny character.

The other code looks good and should work. 

Hopefully that will work. If not, try to run down the manual again and see if you changed up all the Font redirects in the CSS. It might still be pointing to Zendesk's default Font family.

Hope it helps! 

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!

body {
background-color: $color_5;
color: $color_3;
font-family: ".tk-alternate-gothic-no-3-d", "regular";
font-size: 15px;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) {
body > main {
min-height: 65vh;
}
}

h1, h2, h3, h4, h5, h6 {
font-family: ".tk-proxima-nova";
font-weight: 400;
margin-top: 0;
}

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.

Hi Wes, Thanks for your response! I posted the script they gave me in the Document Head on my Zendesk template, but for some reason it's still not working. 

Good to hear the syntax is correct, I wasn't sure because Zendesk originally had fonts formatted like $font1 and I wasn't sure if I should use that or the quotes. 

@Lauren - One thing to take a look at is make sure to use https in the script you copied into the document head.

If that doesn't work is your HC live yet so I can take a look at the code.

Got it resolved, FYI for anyone using typekit, delete the ".tk-" at the beginning of your font names. 

Thanks for reporting back, Lauren!