CODEWITHSUNDEEP
htmlcssfontsgoogle-font-apigoogle-fonts
seyet
seyet

Reputation: 1150

Certain Fonts used in HTML looks different than google fonts

In google docs, for Montserrat font they have the word January looking like this (which is the same as the design I want):enter image description here

In my code, I use the same format but what I see is a totally different font in my browser. This is my code:

<div class="event-date">January</div>

.event-date {
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
}

And this is what I see in the browser (totally different than google fonts):

enter image description here

Is there a way to fix it to look like google fonts?

Upvotes: 0

Views: 564

Answers (1)

Nogard
Nogard

Reputation: 309

You must first link the font (ideally in the head tag), because this font is not part of the operating system. When the web browser can't find the font, it uses default font for the operating system.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">

Or you can also import it in your CSS file.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');

Check the Google Fonts CSS API documentation for more info: https://developers.google.com/fonts/docs/css2

Upvotes: 1

Related Questions