Recent searches

No recent searches

Tip: How to make web beautiful with Google fonts

image avatar

RiTiK Lahori

Posted Apr 13, 2021

You don't need to program; you just need to add a special stylesheet link to your HTML document and make reference to a font in a CSS style.

Copies and pastes the following HTML content into a document:

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

 

1

3

3 comments

Date
    image avatar

    Federico

    Hi! How would you apply this in the Copenhagen Theme? I added the

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

    in the document_head.hbs file and changed the fonts in style.css, but to no avail.

    Thanks!

     

    ***EDIT***

    I found that i didn't change the $text_font and $heading_font tags. Now it works like a charm

    2

    image avatar

    Rebecca

    Could someone help explain how to add this to the Copenhagen theme (only lightly customized) to allow a custom Google webfont family to be applied by default across the whole Zendesk Guide/Help Center/Knowledge Base? This would be great to align our branding to be consistent with the rest of our company webpages, which also use a Google webfont.

    I'm unable to guess the missing steps between the brief article, and Federico's comment from last year. 

    The only other content I could find around custom fonts was from 2013, 11+ years ago and comments are closed there. Thank you so much!

    0

    image avatar

    Greg Katechis

    Zendesk Developer Advocacy

    Hi Rebecca! This video has a good overview of the process and should get you moving in the right direction!

    0

    Please sign in to leave a comment.

    Didn't find what you're looking for?

    New post