Montserrat Google Font Download & CDN

Montserrat is a Google font that can be downloaded and used in web development. It was designed by Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, and Jacques Le Bailly. Montserrat is available in Bold, SemiBold, Medium, and Black styles and can be used in CSS. Montserrat is used in more than 21,000,000 websites. It is a popular font choice due to its clean and modern look. Montserrat is also free to use and can be accessed via Google Fonts CDN

Montserrat Font Family CSS Style

font-family: 'Montserrat', sans-serif;

Montserrat Google Font CDN Link

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">

Montserrat Google Font Import

<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat');
</style>

Montserrat Font Family CSS Editor

Size 18px

Color:

BG Color:

Montserrat Thin 100

Select Thin 100

The quick brown fox jumps over the lazy dog

Montserrat Thin 100 Italic
Select Thin 100 Italic
```
The quick brown fox jumps over the lazy dog
```
Montserrat ExtraLight 200
Select ExtraLight 200
```
The quick brown fox jumps over the lazy dog
```
Montserrat ExtraLight 200 Italic
Select ExtraLight 200 Italic
```
The quick brown fox jumps over the lazy dog
```

Montserrat Light 300

Select Light 300

The quick brown fox jumps over the lazy dog

Montserrat Light 300 Italic
Select Light 300 Italic
```
The quick brown fox jumps over the lazy dog
```

Montserrat Regular 400

Select Regular 400

The quick brown fox jumps over the lazy dog

Montserrat Regular 400 Italic
Select Regular 400 Italic
```
The quick brown fox jumps over the lazy dog
```

Montserrat Medium 500

Select Medium 500

The quick brown fox jumps over the lazy dog

Montserrat Medium 500 Italic
Select Medium 500 Italic
```
The quick brown fox jumps over the lazy dog
```

Montserrat SemiBold 600

Select SemiBold 600

The quick brown fox jumps over the lazy dog

Montserrat SemiBold 600 Italic
Select SemiBold 600 Italic
```
The quick brown fox jumps over the lazy dog
```

Montserrat Bold 700

Select Bold 700

The quick brown fox jumps over the lazy dog

Montserrat Bold 700 Italic
Select Bold 700 Italic
```
The quick brown fox jumps over the lazy dog
```

Montserrat ExtraBold 800

Select ExtraBold 800

The quick brown fox jumps over the lazy dog

Montserrat ExtraBold 800 Italic
Select ExtraBold 800 Italic
```
The quick brown fox jumps over the lazy dog
```

Montserrat Black 900

Select Black 900

The quick brown fox jumps over the lazy dog

Montserrat Black 900 Italic
Select Black 900 Italic
```
The quick brown fox jumps over the lazy dog
```

Montserrat Font Family CDN

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

Import

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>

CSS

font-family: 'Montserrat', sans-serif;

Italic

Regular 400 at 48px

Montserrat: a geometric sans-serif with Buenos Aires soul, free for all.

Regular 400 at 32px

The Montserrat font family is a versatile sans-serif typeface characterized by its clean lines, open letterforms, and wide range of weights

Regular 400 at 40px

Bold and beautiful, Montserrat's geometric shapes add instant impact to your words.

Regular 400 at 24px

Born in Buenos Aires, Montserrat's geometric grace dances between modern headlines and playful posters. Its diverse weights let you tailor its personality, from confident & bold to light & airy.

Regular 400 at 36px

Here's how to download and use Montserrat font with different weights (Bold, SemiBold, Medium, Black) in your project using Google Fonts and CDN

Regular 400 at 16px

Evoking the spirit of Buenos Aires, Montserrat's geometric sans-serif struts onto the scene with confidence and clarity. Its clean lines and open letterforms lend a modern edge to headlines, while its diverse range of weights, from light to bold, allows you to tailor the type's personality to perfectly match your message

How do I apply the Montserrat Google Font to my website?

To apply the Montserrat Google Font to your website, you can follow these steps:

Add the following code to the head section of your HTML file:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

In the CSS file, specify the font family for the desired elements:

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
}

h3 {
    font-weight: 900; /* Use the desired font weight for headings */
}

p {
    font-weight: 400; /* Use the desired font weight for paragraphs */
}

To use different font weights, you can specify the font-weight property in the CSS file. For example, to use the Montserrat Thin font weight, you can add the following style:

p {
    font-weight: 100;
}

The Montserrat font family has a variety of font weights available, ranging from Thin to Black You can use the font-weight property to specify the desired font weight for your text

Here is the example, and please edit your code

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

</head>
 <style>
      body {
          font-family: 'Montserrat', sans-serif;
          font-size: 24px;
         }
      </style>

<body>
    <h3>Montserrat Font Styles</h3>
    <p style="font-weight: 100;">Montserrat Thin</p>
    <p style="font-weight: 200;">Montserrat ExtraLight</p>
    <p style="font-weight: 300;">Montserrat Light</p>
    <p style="font-weight: 400;">Montserrat Regular</p>
    <p style="font-weight: 500;">Montserrat Medium</p>
    <p style="font-weight: 600;">Montserrat SemiBold</p>
    <p style="font-weight: 700;">Montserrat Bold</p>
    <p style="font-weight: 800;">Montserrat ExtraBold</p>
    <p style="font-weight: 900;">Montserrat Black</p>
</body>

</html>
xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
​
</head>
 <style>
      body {
          font-family: 'Montserrat', sans-serif;
          font-size: 24px;
         }
      </style>
​
<body>
    <h3>Montserrat Font Styles</h3>
    <p style="font-weight: 100;">Montserrat Thin</p>
    <p style="font-weight: 200;">Montserrat ExtraLight</p>
    <p style="font-weight: 300;">Montserrat Light</p>
    <p style="font-weight: 400;">Montserrat Regular</p>
    <p style="font-weight: 500;">Montserrat Medium</p>
    <p style="font-weight: 600;">Montserrat SemiBold</p>
    <p style="font-weight: 700;">Montserrat Bold</p>
    <p style="font-weight: 800;">Montserrat ExtraBold</p>
    <p style="font-weight: 900;">Montserrat Black</p>
</body>
​
</html>
​
  