Skip to main content
Known Participant
December 8, 2016
Answered

Google fonts Appear Slightly thicker

Hello All,

I am having an issue with a font I am trying to insert into my Bootstrap responsive website (code below). I applied the font "Fjalla One" to both the body and in H1 tag. In the body, the font appears perfectly. In <h1> , it appears slightly thicker and I'm not sure why.

Any idea why this is happening?

Here's a sample code just to show this issue:

<html>

  <head>

    <link rel="stylesheet" type="text/css"

          href="https://fonts.googleapis.com/css?family=Fjalla+One">

    <style>

      body {

        font-family: 'Fjalla One', sans-serif;

        font-size: 48px;

      }

   h1 {

        font-family: 'Fjalla One', sans-serif;

        font-size: 48px;

      }

    </style>

  </head>

  <body>

    <h1>Making the Web Beautiful!</h1>

    <div>Making the Web Beautiful!</div>

  </body>

</html>

This topic is closed to new replies. Start a new post to keep the conversation going.
Jon Fritz
Jon FritzCorrect answer
Community Expert
December 8, 2016

It could be is the browser default bold attached to <h1> tags. Try adding the following to your h1's css will fix it and see if it affects anything...

font-weight:normal;.

EDIT: edited for clarity after testing your code

3 replies

Known Participant
December 10, 2016

Hi.

That worked perfectly. The words using that font now looks like it suppose to. But I am using Bootstrap and when I insert the CSS, the words slightly becomes bold again. So there's something in the Bootstrap CSS that's causing it. Any idea how to solve this issue?

Translate
Jon Fritz
Community Expert
Community Expert
December 12, 2016

1. Create a new .css file.
2. Link that file just after the bootstrap .css file in the <head> of the page

3. Create overrides for the classes that are adding bold in the second .css file using the same class names that are in the BS .css file

Translate
Jon Fritz
Community Expert
Jon FritzCommunity ExpertCorrect answer
Community Expert
December 8, 2016

It could be is the browser default bold attached to <h1> tags. Try adding the following to your h1's css will fix it and see if it affects anything...

font-weight:normal;.

EDIT: edited for clarity after testing your code

Translate