Hi everyone, I am trying to add my custom Font Family but although I followed the same steps as on this post, zendesk doesn't still recognize my font. 

Anyone encountered the same problem ? 

@font-face {

  font-family: "Milliard-Bold";

  src: url(/assets/myfont-Milliard-Bold.woff) format("woff");

  font-style: "normal";

  font-weight: normal;

}

then I added the src as it its on the posts. 

Cheers,

Cemre.

Hi @Cemre and welcome to the Zendesk community.  

Your src doesn't look right, it should look like this:

src: url('/hc/theme_assets/426700/115000001263/ProximaNova-Reg.otf');

When you upload your font to the assets tab it will give you an URL, that is the URL that you need to use for your src.

Also, make sure that you change the rest of your CSS - you can hit CTRL + F and search for "$font" which should show you the ones you need to change to "Milliard-Bold".

Hope this helps and if you have any further questions just let me know.

Hi everyone!

I implemented a custom font on our help center but it's not showing. The code and details are in the photos below. Please note that support.test.com is not our real domain and it's here to anonymize the account. I'll update this to our correct domain in a bit.

Does anyone know what I'm doing wrong or how I can have my custom font show?

Thanks!

Adam

Hey Adam! Welcome to the Community!

I'll see if I can get some of our coding gurus in here to help you out!

Hello @Adam,

You can try this to a different way - 

Go to the "Document Head Template" > Paste the below code on the bottom area > Add files name as per your requirement(which you have uploaded in assets tab)

<style type="text/css">
 @font-face {
   font-family: 'Regular';
   src: url('{{asset 'YOUR-FILE-NAME.eot'}}');
   src: url('{{asset 'YOUR-FILE-NAME.eot'}}') format('embedded-opentype'), 
   url('{{asset 'YOUR-FILE-NAME.woff'}}') format('woff'), 
   url('{{asset 'YOUR-FILE-NAME.ttf'}}') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
 </style> 

Please let us know if face any issue.

Thanks
Customer Support Team
http://customersupporttheme.com
(Experts in Zendesk Themes, Zendesk Help Center, Plugins, Help Center Branding and Customization.)

What's the best way to use a custom font if the only file I have is .otf? I am wanting to use it for headers (h1, h2, etc) only.

Hey Justin!

I'm checking to see if one of our Community Moderators can help you with this!

Hey Justin!

You can simply use the .otf file in your CSS something like this -

@font-face {
 font-family: 'FONT_NAME';
 src: url( '{{asset 'font.otf'}}' );
}

Or you can use font-convertor and create other formats of the font file and use it in your CSS as mentioned in the post.

Thanks

Hi..

I am having trouble implementing the custom fonts to Zendesk and have tried all options above. 

Hey Brad! Can you be more specific about what's going wrong?

Hi @Brad, one question, where are you loading your @font-face? In HTML template or in CSS ?

Thanks

I was unable to get this to work using the original method stated. Thankfully putting it in the head worked.

<style type="text/css">
@font-face {
font-family: 'San Francisco';
src: local ('San Francisco');
src: url('{{asset 'SFUIDisplay-Thin.eot'}}'),
src: url('{{asset 'SFUIDisplay-Thin.eot?#iefix'}}'),
url('{{asset 'SFUIDisplay-Thin.woff'}}'),
url('{{asset 'SFUIDisplay-Thin.ttf'}}'),
url('{{asset 'SFUIDisplay-Thin.svg#webfont'}}');
font-weight: 200;
font-style: normal;
}
</style>

I do have another question however, I cannot for the life of me get any custom fonts to work when doing local theme development. Any ideas on that?

Hi @trapta,

I am loading the @font-face in the CSS, any ideas what is happening?

I have tried the method from @zack above and no result.

<style type="text/css">
@font-face {
font-family: 'Gotham-medium';
src: local ('Gotham-medium'),
src: url('{{asset 'GothamSSm-Medium.eot'}}');
url('{{asset 'GothamSSm-Medium.woff'}}'),
url('{{asset 'GothamSSm-Medium.ttf'}}'),
url('{{asset 'GothamSSm-Medium.svg#webfont'}}');
font-weight: 200;
font-style: normal;
}
</style>

Attached an image of dev tools to show the css is correct but no result.

@Brad, if you are adding it to your CSS then your code should be -

@font-face {
 font-family: 'Gotham-medium';
 src: local ('Gotham-medium');
 src: url('$asset-gothamssm-medium-eot'), // Use CSS variables available for assets
      url('$asset-gothamssm-medium-woff'),
      url('$asset-gothamssm-medium-ttf'),
      url('$asset-gothamssm-medium-svg');
 font-weight: 200;
 font-style: normal;
}

Note: Please confirm the CSS variables by clicking on fonts in assets and update the variables in above code from there.

There is a minor syntax error in the code you are using for the font in HTML template (one mentioned by Zach). Try this -

<style type="text/css">
 @font-face {
  font-family: 'Gotham-medium';
  src: local ('Gotham-medium');
  src: url('{{asset 'GothamSSm-Medium.eot'}}'),
       url('{{asset 'GothamSSm-Medium.woff'}}'),
       url('{{asset 'GothamSSm-Medium.ttf'}}'),
       url('{{asset 'GothamSSm-Medium.svg'}}');
  font-weight: 200;
  font-style: normal;
 }
</style>

Let me know how it goes for you.

Thanks

@Zach there must be something messing it up. It works perfectly for me while doing local development and loading custom fonts.

What errors do you see?

Thanks

@Trapta

There are no errors, but the fonts do not show up, only the next one in the stack does.

Can you let me know what code you and using and where to get the fonts to work? As described above, that was the only way I could get them to even work once uploaded was with the code below inside of document_head.hbs, but still can't get it local.

document_head.hbs

<style type="text/css">
  @font-face {
  font-family: 'San Francisco';
  src: local ('San Francisco');
  src: url('{{asset 'SFUIDisplay-Thin.eot'}}'),
         url('{{asset 'SFUIDisplay-Thin.woff'}}'),
         url('{{asset 'SFUIDisplay-Thin.ttf'}}'),
         url('{{asset 'SFUIDisplay-Thin.svg'}}');
  font-weight: 200;
  font-style: normal;
  }
</style>

styles.css

h1, h2, h3, h4, h5, h6 { font-family: 'San Francisco', serif; font-weight: 200; }

When I check my local code it appears to be pulling the right fonts in, but still is not displaying them.

@Zach

That's weird as I am using the exact same code that you are using. I have fonts in the assets folder and the code in document_head.hbs and it is working properly.

Thanks

Hi - I have just spent a good 3 hours following every step (and all the variations in the different comments) of this article with no success. We're in a desperate need to get our custom font types updated in the help centre. 

This is the code I have added to the CSS (also tried all the other versions shared in this post): 

@font-face {
font-family: 'GothamRounded-Bold';
src: local ("GothamRounded-Bold"),
src: url('$assets-gothamrounded-bold-woff');
font-weight: 400;
font-style: normal;
}

And this is how I've changed existing code: 

body {
background-color: $color_5;
color: $color_3;
font-family: $GothamRounded-Bold;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
font-family: $GothamRounded-Bold;
font-weight: 700;
margin-top: 0;
}

a {
font-family: $GothamRounded-Bold;
color: $color_4;
text-decoration: none;
}

This should be an easy fix, but I have not found a way to make it work. Any help will be greatly appreciated. 

Hey Irene! I'm going to see if one of our Community Moderators can look over this code for you.

Hi @Irene Vozzi,

Please remove the $ sign from font name in your CSS code.

Let us know how it goes for you.

Thanks

Team Diziana

Hi @Trapta. I tried that as well. This is the result: 

http://www.clipular.com/c/4721323130224640.png?k=_Eg4Fw0Rp2RBCjDFnikWVCEDTOI

For reference, this looks nothing like the custom font I uploaded. Although it is a different result from the one that I have if I add the $: 

http://www.clipular.com/c/4721323130224640.png?k=_Eg4Fw0Rp2RBCjDFnikWVCEDTOI

None of those options are the correct font, albeit the latter looks slightly better/more in brand. Any thoughts? 

@Irene Vozzi, got it. Update your code from

@font-face {
  font-family: 'GothamRounded-Bold';
  src: local ("GothamRounded-Bold"), 
  src: url('$assets-gothamrounded-bold-woff');
  font-weight: 400;
  font-style: normal; 
}

to

@font-face {
  font-family: 'GothamRounded-Bold';
  src: local ("GothamRounded-Bold");
  src: url('$assets-gothamrounded-bold-woff');
  font-weight: 400;
  font-style: normal; 
}

and let us know the results.

Thanks

Team Diziana

That worked wonderfully! Thanks for flagging the error. 

A great big thanks to Jan B for creating this to begin with.

However, this guide is really tricky to follow: It presupposes understanding, fails to elaborate on some important details and does not use visual aides and formatting that would help a lot.

I do not think it is a coincidence so many of us are having issues to begin with. I just got it to work, but not using the guide but rather by reading the comments. 

It'd also be nice to get a quick explanation of why all these different file types are needed (and perhaps why/when it is not). I know now that it's because of browser compatibility but at first I thought I could not do this because I do not have access to all file versions.

Hey guys!

help needed :) i went through the guidelines of this article a few times but it doesn't work. first of all - the interface of my assets folder looks different and it shows the url/link to the source files differently than in the guide. might this be the problem? What else could be wrong?

@font-face {
  font-family: 'CircularStd-Book';
  src: local ("CircularStd-Book");
  src: url('$assets-circularstd-book-otf'),
    url('$assets-circularstd-book-woff'),
    url('$assets-circularstd-book-ttf'),
    url('$assets-circularstd-book-eot'),
    url('$assets-circularstd-book-ttf');
  font-weight: 400;
  font-style: normal;
}

 And another question - how do i install two different typefaces? I'd like to change the headline and copy text seperately. Is that possible?

Thank you, Maria

Hello,

I have tried to insert a font family Gilroy, but it is not recognized in CSS. Please help me!!. this is my code:

1.

2. in the file style.css   company= I know the company is a reference 

@font-face {
font-family: 'Gilroy';
src: url('//company.zendesk.com/hc/Gilroy-Regular.eot');
src: url('//company.zendesk.com/hc/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
url('//company.zendesk.com/hc/Gilroy-Regular.woff2') format('woff2'),
url('//company.zendesk.com/hc/Gilroy-Regular.woff') format('woff'),
url('//company.zendesk.com/hc/Gilroy-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

3.finally I put font-family in the code, body, H1,H2,H3...... 

5.

Hey lucero,

You have to write the font name under the double quotes (" "), Just replace use the below code and it will solve your problem 

font-family: "Gilroy";

Let me know if you have any issue

Regards

Jay

Hi jay darado

I put this, but the font didn´t solve