Tip of the Week: Spice up Your Zendesk with Google Web Fonts

Tip of the Week: Spice up Your Zendesk with Google Web Fonts

January 13, 2012
Tip of the Week: Spice up Your Zendesk with Google Web Fonts

Using custom fonts is a great way to add a bit of simple flair to your web portal. In today’s example, we’ll use Google Web Fonts to change the header title and forum title in Zendesk. You can learn more about modifying Zendesk CSS elements over in the CSS Cookbook.

To summarize, you’ll want to grab your favorite font from the Google Web Fonts directory. When you’re ready, click the quick-use link to bring up the implementation page. Scroll down just a bit and select the @import tab. While you’re there, go ahead and copy the import rule to your clipboard. Leave this tab open for now, because you’ll need to also copy the font-family property a bit later. Next, head back to Zendesk and add a global CSS widget by navigating to Settings > Extensions and clicking the add widget link. Give the global CSS widget a title, and make it available for anyone, including those who are not logged in.

To change the header and forum title fonts as we did, paste your import rule at the top and simply add the CSS statements below. Remember to also copy over the respective font-family property from the Google Web Fonts page as well. Want to use different fonts for each element? Once you’ve located an additional font, just and add another import rule, edit the appropriate font-family property and update the widget. You’re all set!

Header
[html]
@import url(https://fonts.googleapis.com/css?family=Raleway:100);

#table_header {
font-size: 30px;
color: #efefef;
font-family: ‘Raleway’, cursive;
}
[/html]

Forum Title
[html]
.column h3 a {
font-size: 18px;
font-weight: normal;
font-family: ‘Raleway’, cursive;
}
[/html]

If you have any questions, please comment below and we’ll be sure to get you on the right track.

We know. It's a lot to take in.

Sign up for our newsletter and read at your own pace