CSS fonts from Google Font

HTML & CSS
1

Hi everyone,
I’d like my font style to use one of Google Font’s font.
This is a demo I use of how to do so:

<html>
  <head>
    <link rel="stylesheet" type="text/css"
          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>

Uploading the above page I see this on my display:

Unfortunately, “Tangerine” is not the font I need.
From “Google Font” selection showm in the following image:

1600×900 126 KB

I selected ‘Rubik’ but then I didn’t get the desired font.
Could anyone please explain the right way to get a font from Google Font ?
Thanks

2

When you select the font, Google gives you the exact code to use in your <head>, and in the CSS. Were you careful to copy that code exactly, and place it in the correct location?

2 Likes
3

If I try this code:-

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

I see the text in a sans serif font.
Could it just be the characters you are using?
What if you change the text to something in your alphabet?

4

Yeah, that code works as it’s supposed to for me.

5

You are right ! I did it !

6

For non English font I had to follow WebMachine’s advise.
Thanks

7

The font will work in the non-English alphabet.
It’s just that the text that you have on the page is in English.
Just insert some text in the language and alphabet you want.

2 Likes
8

That works indeed ! Thanks !

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.