Struggling to modify Google fonts using CSS

I successfully incorporated Google Fonts into my code, but I'm encountering difficulties in customizing it. I have tried to specify the font-family as "Montserrat-Black" or other styles such as thin or light, but it doesn't seem to be taking effect. Even changing the regular style and attempting to modify it has not yielded successful results. Additionally, the font weights are also not displaying as intended. Bootstrap 4 is being used in my code along with the following snippets:

HTML

<meta charset="utf-8">
<title>TinDog</title>

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Ubuntu&display=swap" rel="stylesheet">

<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">

<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/7258ec066a.js" crossorigin="anonymous"></script>

<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33435c434356411d594073021d02051d03">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>

<body>

<section id="title">
<div class="container-fluid">

<!-- Nav Bar -->

<nav class="navbar navbar-expand-lg navbar-dark ">
<a class="navbar-brand">tinDog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>


<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>

</div>
</section>

CSS

background-color: #ff4c68;
color: white;
}
body{
font-family: 'Montserrat-Thin', sans-serif;
}

.container-fluid{
padding:3% 15%;
}

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


/* Navigation Bar */

.navbar{
padding-bottom: 4.5rem;
}

 .navbar-brand{
font-family:"Ubuntu";
font-size: 2.5rem;
font-weight: bold;
 }

 .nav-item{
padding:0 18px;
 }

 .nav-link{
font-family:"Montserrat-Light";
font-size: 1.2rem;
 }

While using the Montserrat-Black family in this code, I've noticed that applying 

font-family:"Montserrat-Thin"
works fine within the body section, but when trying to use 
font-family:"Montserrat-Light"
for .nav-link, it doesn't take effect. Why could this discrepancy be happening?

htmlcssbootstrap-4fonts

Answer №1

When working with font families, it's important to remember they are not named with their weight. Instead, you should use 

font-family: 'Montserrat', sans-serif;
for all of them and then specify the weight using separate font-weight declarations. For instance:

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

Should now be written as:

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

This becomes evident when examining the CSS provided by Google Fonts (by opening the link in a browser) where the @font-face blocks are consistently named "Montserrat".

(Additionally, adding the 300 weight to the Google Fonts link is necessary as pointed out by @Jontee:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap" rel="stylesheet">
)

Answer №2

Only importing one font? Make sure you import both with this code:

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

Select the fonts and click on embed to generate the link for you.

This is what Matt was referring to: Font weight 100 is Thin Font weight 300 is Light Font weight 900 is Black Check the link in your HTML file to see the different weights: wght@100;300;900

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;900&display=swap" rel="stylesheet"> 

<style>
    .one{
        font-family: 'Montserrat', sans-serif;
        font-weight: 100
    }
    .two{
        font-family: 'Montserrat', sans-serif;
        font-weight: 300
    }
    .three{
        font-family: 'Montserrat', sans-serif;
        font-weight: 900
    }
</style>
<body>
    <h1 class="one">
        Thin
    </h1>
    <h1 class="two">
        Light
    </h1>
    <h1 class="three">
        Black
    </h1>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing Navbar or other elements in react-bootstrap

While working on my react project, I have been using react-bootstrap. However, I am interested in delving deeper into all the features that this framework has to offer. I have come across pages supported by react-bootstrap and even downloaded templates, bu ...

reactjsbootstrap-4react-bootstrap

Can Spring Boot be set up to return JSON instead of HTML for InvalidTokenException when configuring OAuth2?

When testing my Spring Boot application, I realized that querying one of my REST endpoints with an invalid token using Postman resulted in a response content in HTML format instead of JSON. The endpoint correctly responded with 401 InvalidTokenException, b ...

htmljsonspring-bootoauth-2.0spring-security-oauth2

Navigating with Bootstrap tabs

Seeking to create navigation controls with tabs similar to this: https://i.sstatic.net/fB6RF.png Utilizing Bootstrap and incorporating material design from ... Is there a method to position tab bars below the items in the navbar-brand section? ...

tabsmaterial-designbootstrap-4navbar

Move the components over to the right

How can I vertically align the user and the search bar on the right side of the page? #search { float: right; margin-top: 9px; width: 250px; } .search { width: 230px; height: 30px; position: relative; line-height: 22px; } ...

htmlcsstwitter-bootstrap

Ways to apply the jQuery .on() method using vanilla JavaScript and document query selectors

How can we achieve the functionality provided by jQuery's on() function – allowing DOM events to trigger on elements that might be added in the future – using plain JavaScript? Specifically, how can we handle a mouseenter event on elements with a ...

javascripthtmljquerydom-eventsmouseevent

adding new data rows to an existing data list using Angular

I am currently working on displaying data from a backend system. The data is coming from a table that receives new rows within a specific time frame. To retrieve these new rows, I have set up a mechanism using an Angular timer. My query pertains to the tem ...

jsonhtmlangulartypescript

Retrieve the content of a text field with jQuery

Check out this block of HTML: <div class="sub-middle-column"> <div class="div-header">Grandsire <a "#", class="table-control-focus sub-header-table-focus" id="table-control-focus-t" >abc</a> <ul class="table-controls h ...

javascriptjqueryhtml

Dynamically Incorporating HTML Attributes Using Angular

My goal is to automatically disable an HTML form field based on a property in a JSON file. The property value in the JSON determines whether the form field should be disabled or not. To achieve this, I added data-is-disabled={{field.rules.disabled}} to th ...

javascripthtmlangularjsangularjs-directive

Unable to get template part if it is not in the same file

Query regarding WordPress and Get Template Part: I have set up page.php and single.php with get_template_part for easy future template editing. However, I've noticed that they don't work when placed in separate files; they only function properl ...

phphtmlwordpress

Troubleshooting a Messaging Error between Background and Another Script

Attempting to transfer selected text from the current page to an HTML page using message passing: content script to background script, then background script to the HTML page. However, encountering errors if the HTML page is not already open, and even gett ...

javascripthtmlgoogle-chrome-extensionfrontendmessaging

Tips for adjusting image dimensions to accommodate small and large screens

Is there a way to make an image adapt to both mobile and full screen sizes? I attempted to make some adjustments, but unfortunately, I wasn't successful. The div class in question has a fixed width and height: <div class="pull-left thumb-con ...

htmlcssimagebootstrap-4

What could be causing the hover effect to malfunction in this code snippet?

I have been working on creating a hover effect for a list of items where an underline emerges from the center. While I have done something similar in the past, there seems to be an issue preventing it from working properly this time. I have included the HT ...

htmlcsshover

Secure HTML / CSS for JavaScript? I am unable to modify certain attributes during runtime

Due to ongoing discussions about blog colors for business purposes, we are looking to provide users with a "tool" (for those who are tech-savvy) to experiment with colors themselves. Our blog is a basic Wordpress site with various plugins (such as Google ...

javascripthtmlcss

Leveraging URL parameters to automatically enable the initial selection in a linked dropdown menu and trigger an OnChange event

Project Description: I have successfully implemented a search form with 5 dependent drop-down menus that are crucial for filtering data. The first dropdown, labeled dim_id, is chosen on the product_request page and triggers an OnChange event which sends th ...

javascriptphpjqueryhtmlajax

Facebook-Clone Chrome extension that automatically displays "User is listening to..."

I'm currently developing a Chrome Extension that will replace the chat input box with the music I'm listening to by simply pressing "´". It's worth noting that the chat is designed using react and does not use the traditional input/textarea ...

javascriptjqueryhtmlgoogle-chromegoogle-chrome-extension

Obtaining a binary value in the switch component of materialize framework with Typescript

Is there a way in Typescript to assign a value of 1 when a checkbox is checked and 0 otherwise? I am working on a project that uses the materialize framework. Below is the code snippet in question: <div class='switch'> <label&g ...

htmlangulartypescriptmaterializeswitching

What methods can be utilized to ensure that my wistia video player/playlist is responsive on different devices

I need some assistance with making my Wistia player responsive while using a playlist. I want the video player to adjust its size based on the screen size. Here is an example: My current code utilizes their iframe implementation: <div id="wistia_1n649 ...

javascriptjquerycsshtml5-videovideo-player

Using @font-face with faux-italic in Internet Explorer 8

After meticulously following the seemingly foolproof guidelines for @font-face outlined in this post here, I am still encountering faux-italicization issues with IE8 when using webfonts. This occurs as I try to accommodate the styling of my fallback fonts ...

cssinternet-explorer-8font-face

Ways to switch out the background image using jQuery

I am currently using jQuery to dynamically change the background image of a web page. Right now, I have implemented two separate buttons that toggle between Image A and Image B. By default, Image A is displayed on the page. My goal is to enhance this func ...

javascriptjqueryhtmlcss

Template not found: Error encountered in nodemailer-express-handlebars: ENOENT: The specified file or directory does not exist in the node

I've been attempting to utilize nodemailer and express-handlebars in my node.js application to send a template form. However, I keep encountering the "no such file" error. Unfortunately, I have no clue what I'm overlooking or missing. Here is m ...

htmlnode.jsexpressnodemailerexpress-handlebars