Recent searches
No recent searches

Jan B
Joined May 13, 2021
·
Last activity Dec 07, 2022
Following
0
Followers
0
Total activity
20
Votes
5
Subscriptions
5
ACTIVITY OVERVIEW
BADGES
ARTICLES
POSTS
COMMUNITY COMMENTS
ARTICLE COMMENTS
ACTIVITY OVERVIEW
Latest activity by Jan B
Jan B commented,
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!
View comment · Posted Nov 19, 2014 · Jan B
0
Followers
0
Votes
0
Comments
Jan B commented,
@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.
View comment · Posted Aug 11, 2014 · Jan B
0
Followers
0
Votes
0
Comments
Jan B commented,
@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.
View comment · Posted Mar 26, 2014 · Jan B
0
Followers
0
Votes
0
Comments
Jan B commented,
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?
View comment · Posted Feb 28, 2014 · Jan B
0
Followers
0
Votes
0
Comments
Jan B commented,
Thanks Joseph and Tom!
I used a bit of both worlds to get this working. Joseph his setup and Tom's automation are now working on our Zendesk :) Kudos on sharing this!
View comment · Posted Jan 21, 2014 · Jan B
0
Followers
0
Votes
0
Comments
Jan B commented,
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!
View comment · Posted Oct 31, 2013 · Jan B
0
Followers
0
Votes
0
Comments
Jan B commented,
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!
View comment · Posted Oct 30, 2013 · Jan B
0
Followers
0
Votes
0
Comments
Jan B commented,
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.
View comment · Posted Oct 23, 2013 · Jan B
0
Followers
0
Votes
0
Comments
Jan B commented,
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 :-)
View comment · Posted Oct 16, 2013 · Jan B
0
Followers
0
Votes
0
Comments
Jan B created a post,
It's my first try at Community tips, English manual writing and explaining CSS. Bear with me :-)
With the new Help Center a lot of nice stuff has become available. Including CSS modding. This allows for the modification of your font family. Let's explain some things first.
Note: If you'd like to use Google Fonts, check out this tip from Wes Drury.
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.)
@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;
}
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.
Happy coding!
Posted Oct 16, 2013 · Jan B
3
Followers
33
Votes
59
Comments