I'm having trouble with my Montserrat font not displaying the right font style

Question

I'm having trouble with my Montserrat font not displaying the right font style

I'm having an issue with my Montserrat font not displaying correctly. It appears as the standard style instead of the intended one. I have tried adding the specific style in the link, like this:

<link href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu" rel="stylesheet">

However, I don't want all elements to have the same style. I specifically want my h1 heading to be styled in Montserrat Black, so I added the following CSS:

h1 {
 font-family: "Montserrat-black";
}

Unfortunately, I am not seeing the desired effect. If I try adding a style for black like this:

<link href="https://fonts.googleapis.com/css?family=Montserrat:black|Ubuntu" rel="stylesheet">

The black style ends up being applied to the entire page rather than just h1. Can someone please assist me with how to achieve the result I'm looking for?

html css fonts

Answer 1

Answer №1

Personalize your typography with a variety of font options available on Google Fonts and adjust the font-weight to 300, 500, 700, or 900:

https://i.sstatic.net/xisTp.png

h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; /* black */
}

  
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900|Ubuntu:400,500,700" rel="stylesheet">
  
  <h1>
    Lorem ipsum dolor sit amet.
  </h1>

Answer 2

Personalize your typography with a variety of font options available on Google Fonts and adjust the font-weight to 300, 500, 700, or 900:

https://i.sstatic.net/xisTp.png

h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; /* black */
}

  
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900|Ubuntu:400,500,700" rel="stylesheet">
  
  <h1>
    Lorem ipsum dolor sit amet.
  </h1>

Answer 3

Answer №2

When choosing font weights from Google Fonts, options like Montserrat:400,900 are commonly selected. To utilize these weights in CSS, simply specify them in your styling.

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

h1 {
  font-weight: 900; /* Black */
}

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,900" rel="stylesheet">

<p>
  Normal body text
</p>

<h1>Black/ 900</h1>

Answer 4

When choosing font weights from Google Fonts, options like Montserrat:400,900 are commonly selected. To utilize these weights in CSS, simply specify them in your styling.

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

h1 {
  font-weight: 900; /* Black */
}

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,900" rel="stylesheet">

<p>
  Normal body text
</p>

<h1>Black/ 900</h1>

Answer 5

Answer №3

If you're working with both Bootstrap and CSS, the order in which they are written in the HTML code matters. I encountered a similar issue where my CSS code was placed before Bootstrap in the code.

If your custom styles are not taking precedence over the bootstrap styles, simply rearrange the order of your stylesheet links so that your custom stylesheet comes after the bootstrap CDN link:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">

By doing this, you first load the default bootstrap styles, allowing you to then customize or override specific components using your own custom CSS.

Answer 6

If you're working with both Bootstrap and CSS, the order in which they are written in the HTML code matters. I encountered a similar issue where my CSS code was placed before Bootstrap in the code.

If your custom styles are not taking precedence over the bootstrap styles, simply rearrange the order of your stylesheet links so that your custom stylesheet comes after the bootstrap CDN link:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">

By doing this, you first load the default bootstrap styles, allowing you to then customize or override specific components using your own custom CSS.

Answer 7

Answer №4

To achieve the desired font size, it is important to specify both the font family and the font weight. Here is an example:

 h1{
font-family: 'Montserrat', sans-serif;
font-weight: 900;
 }

Additionally, ensure that if you are utilizing an external CSS file, the link to it should be placed after all script and link tags within the head tag. Essentially, it should be located just above the end of the head tag.

  <link rel="stylesheet" href="css/styles.css">
  </head>

Answer 8

To achieve the desired font size, it is important to specify both the font family and the font weight. Here is an example:

 h1{
font-family: 'Montserrat', sans-serif;
font-weight: 900;
 }

Additionally, ensure that if you are utilizing an external CSS file, the link to it should be placed after all script and link tags within the head tag. Essentially, it should be located just above the end of the head tag.

  <link rel="stylesheet" href="css/styles.css">
  </head>

Answer 9

Answer №5

Google Fonts has undergone a major transformation. Now, adding font weight is essential. The default font family has been updated. No additional changes are necessary, but setting the font weight to very bold or Black style is recommended.

h1 {
    font-family:  'Montserrat', sans-serif;
    font-size: 3rem; /*Optional*/
    line-height: 1.5; /*Optional*/
    font-weight: 900;
}

  <!--All weights of Montserrat & Ubuntu included below. You can customize as needed-->

  <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&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

  
  <h1>Discover fascinating new canine companions in your area.</h1>
  <p>Normal text appears much smaller compared to the desired Montserrat-Black style.</p>

Answer 10

Google Fonts has undergone a major transformation. Now, adding font weight is essential. The default font family has been updated. No additional changes are necessary, but setting the font weight to very bold or Black style is recommended.

h1 {
    font-family:  'Montserrat', sans-serif;
    font-size: 3rem; /*Optional*/
    line-height: 1.5; /*Optional*/
    font-weight: 900;
}

  <!--All weights of Montserrat & Ubuntu included below. You can customize as needed-->

  <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&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

  
  <h1>Discover fascinating new canine companions in your area.</h1>
  <p>Normal text appears much smaller compared to the desired Montserrat-Black style.</p>

Answer 11

Answer №6

The font goes by the name of Monserrat, not Monserrat-black.

h1 {
  font-family: 'Montserrat', sans-serif;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu" rel="stylesheet">

<h1>This is a title, styled with the h1 tag</h1>

<p>This is a paragraph, not styled with the h1 tag</p>

Check out the code snippet from the small popup in the bottom-right corner on Google Fonts: https://i.sstatic.net/TC1sa.png

Answer 12

The font goes by the name of Monserrat, not Monserrat-black.

h1 {
  font-family: 'Montserrat', sans-serif;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu" rel="stylesheet">

<h1>This is a title, styled with the h1 tag</h1>

<p>This is a paragraph, not styled with the h1 tag</p>

Check out the code snippet from the small popup in the bottom-right corner on Google Fonts: https://i.sstatic.net/TC1sa.png

Answer 13

Answer №7

Unfortunately, the font-family style for "Montserrat-something" is no longer functioning properly.

To fix this issue, please make sure to use: font-family: "Montserrat"; font-weight: specify the desired font weight;

Answer 14

Unfortunately, the font-family style for "Montserrat-something" is no longer functioning properly.

To fix this issue, please make sure to use: font-family: "Montserrat"; font-weight: specify the desired font weight;

Answer 15

Answer №8

The positioning of your external stylesheet link within the HTML document is essential. To effectively modify the default styles, make sure to place your customized stylesheet as the last link in the head section.

This should result in the desired outcome.

Answer 16

The positioning of your external stylesheet link within the HTML document is essential. To effectively modify the default styles, make sure to place your customized stylesheet as the last link in the head section.

This should result in the desired outcome.

Answer 17

Answer №9

This solution may not be effective. If you are facing this issue in Angela Yu's Web Development Bootcamp, make sure to refer to section 71 for guidance. You will find specific instructions to utilize

h1 
{
    font-family: 'Montserrat-Black, sans-serif';
    font-size: 3rem;
    line-height: 1.5; 
    font-weight: 900;
}

Alternatively, to replicate the tutorial's example, you can also use font-weight: bold;

Answer 18

This solution may not be effective. If you are facing this issue in Angela Yu's Web Development Bootcamp, make sure to refer to section 71 for guidance. You will find specific instructions to utilize

h1 
{
    font-family: 'Montserrat-Black, sans-serif';
    font-size: 3rem;
    line-height: 1.5; 
    font-weight: 900;
}

Alternatively, to replicate the tutorial's example, you can also use font-weight: bold;

Answer 19

Answer №10

It's important to ensure that the CSS file link is placed below the Bootstrap link for everything to work correctly.

Answer 20

It's important to ensure that the CSS file link is placed below the Bootstrap link for everything to work correctly.

Answer 21

Answer №11

Google no longer supports the

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

. To continue using that font, please update your code with the following:

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

If this solution does not work, ensure that your CSS Style Sheet link is placed after the bootstrap and any other CSS Stylesheet Link.

Answer 22

Google no longer supports the

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

. To continue using that font, please update your code with the following:

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

If this solution does not work, ensure that your CSS Style Sheet link is placed after the bootstrap and any other CSS Stylesheet Link.

I'm having trouble with my Montserrat font not displaying the right font style

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Answer №11

Similar questions

CSS: customize the color of a highlighted row within a table

Retrieve properly formatted text from the editor.document using the VSCode API

Issue with input width percentage not functioning as expected

Centering an image on a webpage using CSS

Adaptable background image - smoothly resize/reposition

Unable to find component: "wrestler-choice-box". If this is a built-in custom element, please ensure it is not included in component resolution

best method for embedding javascript code within html (within a script tag)

Tips for preventing harmful messages in a chat room app

Expanding CSS styles on hover

Exploring the Four Quadrants of CSS

Search field in DataTables appears to be misaligned

Mobile Exclusive Bootstrap 5 Collapse Feature

Ensuring Safe Data Storage for an Angular 2 Project with Local Storage

Exploring the Layout Options of Twitter Bootstrap 3

The border-radius property in Bootstrap buttons causes unwanted white border artifacts to appear

Printing content from a web page using window.print() function in a form using javascript and angular

Can the value in a JavaScript object be updated dynamically when a button is clicked?

Various CSS regulations for various languages/modes in CodeMirror

Adjustable block with excess content

Ways to capture all characters (including special characters like ) using Visual Studio Regex