Google fonts Appear Slightly thicker

Report · Dec 08, 2016

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>

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>

Report · Dec 08, 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

Report · Dec 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?

Report · Dec 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

Google fonts Appear Slightly thicker

1 Correct answer