CODEWITHSUNDEEP
htmlcss
Bacteria
Bacteria

Reputation: 37

Chrome not showing bold at all

basically I used that famous google font called "Thasadith" I used only the "bold" version and its just showing the normal version , I rechecked , used in html , used font weight in css and still the font is just viewed as normal..

Upvotes: 1

Views: 2425

Answers (1)

tao
tao

Reputation: 90138

You need to load the bold font if you want to use it. If you don't, the browser doesn't know how to render the bold weight and defaults to the closest it has (which is the one you loaded: normal).

In the case of Thasadith, which is available on Google fonts, you need to add :n,b after the font family name in the <link>'s url (or in the @import's url), where n stands for normal and b stands for bold (other available options being i - italic, bi, - bolditalic or specific weights - these depend on font, ranging from 100 to 900. as well as specific weight + i).

Here's a working example with Thasadith:

div {
  font-family: 'Thasadith';
  font-size: 5rem;
}
<link href="https://fonts.googleapis.com/css?family=Thasadith:n,i,b,bi" rel="stylesheet">

<div>Hel<i>lo</i>, <strong>Wor<i>ld!</i></strong></div>

In the case of Thasadith,

family=Thasadith:n,i,b,bi

is equivalent to

family=Thasadith:400,400i,700,700i

as 400 and 700 are the two available weights.

For more on how to load Google fonts, read their getting started.

Upvotes: 2

Related Questions