Help Center - Adding Google Fonts to your Theme

47 Comments

  • David Barnett
    Comment actions Permalink

    Really well put together and easy to follow - thanks!

    0
  • Wes Drury
    Comment actions Permalink

    Thanks for the feedback David and I'm glad it helped.  Good luck with your customization. 

    0
  • David Barnett
    Comment actions Permalink

    I just noticed that since I have SSL enabled Google fonts are blocked by default due to the 'http' in the address listed on step 3.  The solution was really easy!

    Find this line on your HTML page (or template):

    <link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

    and change it to this:

    <link href='//fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

    This simple change will make your browser call the Google Font page in the applicable mode (HTTP vs HTTPS) and fix the problem I was running into!

    Thanks again!

    0
  • Jennifer Rowe
    Comment actions Permalink

    @David, glad you figured it out. Thanks for sharing the fix with us!

    0
  • Aaron Ilika
    Comment actions Permalink

    Great tip—thanks, Wes!

    0
  • Wes Drury
    Comment actions Permalink

    @Aaron - Thanks and enjoy.

    0
  • Bob Mulholland
    Comment actions Permalink

    So I just noticed one thing about the new font:

    Underscores are invisible when you're typing them into any of the text fields in the Admin sections of Zendesk (Adding/editing macros, views, etc.)

    This is for single line text fields only - underscores appear just fine in multi-line text boxes. 

    I'm hoping that someone at ZD can fix this to they appear in single line text fields again, since most of the tags we use in our macros use underscores in between every word. 

    0
  • Laura D.
    Comment actions Permalink

    Hi Bob, 

    The change to Zendesk's font is different than what Wes describes here. 

    I'm trying to replicate what you're seeing - do you have a screenshot of a place where you're trying to type an underscore and it's not showing? 

    0
  • Bob Mulholland
    Comment actions Permalink

    Oops! I commented in the wrong thread (had not open then got distracted).

    I'll repost the question in the right thread and include a screenshot. :)

    0
  • Laura D.
    Comment actions Permalink

    No worries, I'll catch up with you when I see that come through :)

    0
  • Richard Starr
    Comment actions Permalink

    An even easier fix for fonts being blocked by ssl is to simply change the links href to https rather than http. eg:

    <link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

    becomes

    <link href='https://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

    0
  • Wes Drury
    Comment actions Permalink

    @Richard - Too many screenshots to update but yes in order for Zendesk not to block the font you need to use https:

    I'll see if I can get them updated soon.

    0
  • Sane Nobles
    Comment actions Permalink

    I am using a modified version of the Humble Squid theme and these instructions are working great on everything except for my headings. I can't get the title to switch to any of my Google fonts. I was able to do so when I deselected the font showing up for h1 when I "inspect element" but then when I switched to a different browser the title still had the old font. This doesn't seem to be "overriding" the browser. 

    Here is an image that may give more insight. I've put my desired font as something comically ridiculous so that it is more easily identifiable.

    0
  • Wes Drury
    Comment actions Permalink

    @Sane - You need to add the following to your CSS under the h1. h2 etc

    Add the following:

    font-family: (your font); (google will show you exactly what to put in here)

    Here is an example:

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    }

     

    0
  • Sane Nobles
    Comment actions Permalink

    @Wes It might not be clear in the picture, but I did add the font family in there. I follow the instructions in this article to the T and am still having the issue. Any other ideas? Thanks in advance.

    0
  • Wes Drury
    Comment actions Permalink

    @Sane - Its hard for me to see unless I can actually see your HelpCenter so I can take a look at what you have.  Is there any way you can post the link to your HelpCenter.

    0
  • Sane Nobles
    Comment actions Permalink

    http://support.swizznet.com/hc/en-us

    This may direct you to our public-facing site, the old knowledgebase rather than the help center.

    0
  • Wes Drury
    Comment actions Permalink

    @Sane, I'll create an account on your Help Center as I have to be logged in.  My account will be  support@wesdrury.zendesk.com and you can delete it once we are done.

    0
  • Sane Nobles
    Comment actions Permalink

    Wes,

    I attempted to do that with a test user (non-admin/tech agent) and still saw the old support site so you may have further trouble. I am adding my code here just in case. Again, the font is ridiculous just to make it clear in images.

    h1, h2, h3, h4, h5, h6 {
    font-family: 'Devonshire', cursive;
    color: black;
    font-weight: 400;
    }

     

    0
  • Wes Drury
    Comment actions Permalink

    @Sane - Your code looks fine and I don't see anything wrong with it.  In your Document Head make sure you have https: and not http as Zendesk doesn't allow non-secure links.  My examples above only show http however it must be https.  Hope this helps.

    0
  • Sane Nobles
    Comment actions Permalink

    @Wes,

    Thank you for trying to help. Turns out that there is now 2 completely different "Base Style" sections in my code that was causing this issue. I have no clue how the second got there.

    0
  • Wes Drury
    Comment actions Permalink

    @Sane - Glad you got it figured out.

    0
  • Eva Wilhelmsson
    Comment actions Permalink

    Hi,

    I am creating a theme for my helpcenter and followed this guide but it don't seem to work for me, I can only choose between the default fonts. The help center is under construction and are not visable yet but do I have to active the help center before I can see the adjustment of the fonts?

     

    0
  • Wes Drury
    Comment actions Permalink

    Hi Eva - I have verified this solution currently works.  Please make sure that in your document head you have "https" and not "http" in the URL for the google font.  Also did you add the font-family in your CSS.

    I don't believe the Help Center has to be active in order for this font to show up.  Can you tell me what font you are trying to use and paste a copy of where you are using it in your CSS.

    0
  • Eva Wilhelmsson
    Comment actions Permalink

    Hi Wes,

    The fonts are Open Sans and Asap från google fonts. Let me know if I should paste something more :)

    Here is the document head:

     <!-- add code here that should appear in the document head -->
    <link href='https://fonts.googleapis.com/css?family=Asap|Open+Sans' rel='stylesheet' type='text/css'>

    And the body CSS:

    body {
      color: $color_4;
      font-family: 'Open Sans', sans-serif;
      font-size: 13px;
      font-weight: normal;
      line-height: 1.5;
      margin: 0;
      padding-bottom: 50px;
    }

    And the headings:

    h1, h2, h3, h4, h5, h6 {
      color: black;
      font-family: 'Asap', sans-serif;
      font-weight: 400;

     

     

     

    0
  • Eva Wilhelmsson
    Comment actions Permalink

    Update: There was an $ at the wrong place.. Problem solved :)

    0
  • Wes Drury
    Comment actions Permalink

    @Eva - Awesome, glad to hear you got it all worked out.  Best of luck.

    0
  • Mischa
    Comment actions Permalink

    Is it possible to display Google fonts on mobile version of the theme?

    0
  • Wes Drury
    Comment actions Permalink

    @Mischa - If your theme is responsive then yes, if you are using the Zendesk mobile then I don't believe so.  With responsive themes you can turn off the Zendesk mobile as the theme will work across all the devices.  Zendesk has one responsive theme called "Copenhagen".  Use that theme and turn off the mobile in your Help Center settings.

    0
  • Mischa
    Comment actions Permalink

    Thank you, Wes! We do indeed use Copenhagen theme. How exactly do I turn off mobile in the settings exactly?

    Also - not related to this - how do I make my logo a bit bigger on a Copenhagen theme?

    0

Please sign in to leave a comment.

Powered by Zendesk