Help Center - Adding Google Fonts to your Theme

47 Comments

  • Wes Drury
    Comment actions Permalink

    @Mischa - Turn off mobile go to "General" - "Help Center Settings" and uncheck "Mobile Layout".

    Make logo bigger do the following:

    Go to "General" - "Customize Design"

    Go to "CSS" tab

    Find line 418 should look like below:

    .logo img {
    max-height: 37px;
    }

    Change your max-height to be larger.

    0
  • Mischa
    Comment actions Permalink

    Thanks!!

    0
  • Wes Drury
    Comment actions Permalink

    @Mischa - Your welcome!  Best of luck

    0
  • Marco Slowik
    Comment actions Permalink

    @Wes Thumbs up, really easy to do this, thanks a lot!!!

    I am using the Gotham Font from typograpy.com and the workflow is the same like your Google Font workflow. I am using font-weight: 300 for regular text and 500 for strong.

    Now i got the problem that all the text tagged as <strong> in my articles is in font-weight: 700 because the WYSIWIG-Editor defines it as 700. Is there an easy way to change it with CSS? :)

    Sorry for my bad English ;)

    Cheers,
    Marco

    0
  • Wes Drury
    Comment actions Permalink

    Hi, Marco - Any way you can post the link to your HC if it's open to the public so that I can see the code.  I'm sure there's an easy way to edit it via CSS but it would help if I can see what is going on. 

    0
  • Marco Slowik
    Comment actions Permalink

    @Wes

    Sure, here is the link: https://portal.legalflex.de

    FYI: I am on the Enterprise Plan

    0
  • Wes Drury
    Comment actions Permalink

    Great thanks - Can you give me a link to an article where you have used the strong tag.

    0
  • Marco Slowik
    Comment actions Permalink

    @Wes

    Sure here is a link where the formatting was made with the WYSIWYG-Editor. I already tried to solve the the problem manually in this article with the subtitle (above the picture) and the first headline "Wann ist eine fristlose Kündigung unwirksam?"

    https://portal.legalflex.de/hc/de/articles/115001572609-Fristlose-Kündigung-In-welchen-Fällen-der-Chef-schlechte-Karten-hat

    0
  • Wes Drury
    Comment actions Permalink

    @Marco -  If I understand correctly you would like to use font weight of 500 instead of 700.  If that's correct add the following to your CSS tab.

    b, strong {
    font-weight: 500 !important;
    0
  • Marco Slowik
    Comment actions Permalink

    @Wes - Awesome! It works!!! Thanks a lot for your quick support! ;)

    0
  • Wes Drury
    Comment actions Permalink

    @Marco - Glad to hear and hope you have a great day!

    0
  • Justin
    Comment actions Permalink

    Does this tutorial add the google font style to email triggers sent to ticket requesters? I am interested in using a google font for both our Help Center and for emails sent to customers through Zendesk Support.

    0
  • lisa.brown
    Comment actions Permalink

    Hi @Wes -

    Articles on our support site include system response code that people may copy/paste into their command line. For an example, look at this article.  

    The green font represents command text (both the user entered, and system response) and right now, I can only apply a color to distinguish it from the regular body text. Using a non-monospace font is not handy for system commands as I need the ability to easily line up system response 'tables'. Right now, I have to physically create a ZDtable for the system response. 

    Normally our documentation uses Courier New (a mono-space font) or Lucida Console, but I can't find a way to define a new font style. 

    Thanks in advance!

    0
  • Wes Drury
    Comment actions Permalink

    @Lisa - Sorry for the delayed response as I've been out of town at a conference.  You can import and apply any font that you would like.  You can upload the fonts to the Asset area then call and import them in via the CSS tab.  It would look similar to below but your URL would be from the Asset URL.

    @font-face {
        font-family: MYfont;
        src: url(sansation_light.woff);
    }

    You could also install a code highlighter which could highlight your code differently.  I haven't tried any with the new Copenhagen theme but they did work in the past themes so they should still apply.

    0
  • Cilla Holmström Jutell
    Comment actions Permalink

    Hello!
    Does Zendesk support the font Roboto?

     

    0
  • Wes Drury
    Comment actions Permalink

    Hi Cilla and welcome to the community.  The Help Center will take any Google font.  As long as you are on a plan that allows you to edit our Help Center you should be able to follow the instructions above.  Just add the google font link into the "Document Head" then go into your CSS and call that font.

    Below goes into the "Document Head"

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    In your CSS you will call it like below:

    font-family: 'Roboto', sans-serif;

    0
  • Acarr
    Comment actions Permalink

    The interface to edit the Document Head has changed it is now located:

    Guide Admin > Customize Design > View Theme > Edit code > document_head.hbs

    Thanks to Jessie for that one

    0

Please sign in to leave a comment.

Powered by Zendesk