0

I am currently creating a HTML document from scratch. I am using MAMP to host the site however when I link to a google font it doesn't work.

When I download it do I link it to my css file? and if so how do I call it?

Thanks

Rimil Dey
  • 827
  • 2
  • 13
  • 33
M.Doe
  • 43
  • 1
  • 6
  • Please take a tour of the help centre to see how to ask a good question – Pete Jan 26 '17 at 11:00
  • 4
    Possible duplicate of [How to host google web fonts on my own server?](http://stackoverflow.com/questions/8966740/how-to-host-google-web-fonts-on-my-own-server) – Roope Jan 26 '17 at 11:04
  • please elaborate what you did so far and what kind of errors you ran into – xmoex Jan 28 '17 at 11:38

3 Answers3

1

Its better to customize the font in your site, and for customization you need to download fonts in four formats (webfont.eot, webfonts.svg, webfonts.woff, webfonts.ttf) and then use them from CSS. Follow this url: https://css-tricks.com/snippets/css/using-font-face/

hameeda naz
  • 287
  • 3
  • 13
1

Check this example for how to use online fonts.

<html>
    <head>
        <style>
            @font-face{
                font-family:fontName;
                src:url(https://fonts.gstatic.com/s/varelaround/v6/APH4jr0uSos5wiut5cpjrugdm0LZdjqr5-oayXSOefg.woff2)
            }
            body{
                font-family:fontName;
                font-size:2em;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>Title</h1>
    </body>
</html>
user7393973
  • 2,270
  • 1
  • 20
  • 58
0

Rather than downloading them and serving them 'locally' I'd suggest to check what the error might be and use the fonts delivered via Google API. They provide a getting started guide, so you can start with a basic example like the following and work your way up to what you need:

<html>
  <head>
    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      .fancy {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    Example for using 
    <span class="fancy">Tangerine</span>
  </body>
</html>

You can also browse all available fonts here and let google generate a custom <link rel="stylesheet" ...> tag for you which serves only what you explicitly specified.

xmoex
  • 2,602
  • 22
  • 36