What could be causing my custom Google font in CSS to not function properly?

I've been trying to change the font-family from Google Fonts in my Bootstrap 5 project, but it's not working as expected. Here's a snippet of my code:

HTML

<div class="row">
      <div class="col-lg-6 col-md-12">
        <h1 id="entryHeading">Meet new and interesting dogs nearby.</h1>
        <button type="button">Download</button>
        <button type="button">Download</button>
      </div>
      <div class="col-lg-6 col-md-12">
        <img src="images/iphone6.png" alt="iphone-mockup">
      </div>

    </div>

CSS

#entryHeading{
    font-family: "Montserrat-Black" sans-serif;
    font-size: 3rem;
    line-height: 1.5;

}

The font is changing to Montserrat, but I actually want Montserrat-Black. Any suggestions on how to fix this?

htmlcssfontsframeworksbootstrap-5

Answer №1

Make sure to include the comma ' , ' between font names for correct formatting

Styling with CSS

#elementTitle{
    font-family: "Lato-Regular", sans-serif;
    font-size: 2rem;
    line-height: 1.2;
}

Answer №2

To override the bootstrap fonts, consider using the !important rule with the font-family property.

#heading{
font-family: "Open Sans" sans-serif !important;
font-size: 2.5rem;
line-height: 1.2;

}

Note: Avoid using "!important" as it can cause issues with specificity.

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

Show the outcome of a mysql_query in PHP directly within MYSQL

I've been trying to figure out how to display my MySQL results in PHP using tables. Despite doing a lot of research on this topic, I haven't been able to find a solution yet. Here's the code that I have: <html> <head> </head& ...

phphtmlmysql

Issue with animating multi-column layout in Chrome causing display problems

I'm currently utilizing jQuery to create an animated multi-column layout that extends off the screen horizontally. I have implemented two controllers - one red and one blue - to navigate back and forth within the layout. Strangely enough, while the an ...

jqueryhtmlgoogle-chromecssmultiple-columns

Shifting Divs/Text while adjusting zoom levels in HTML/CSS with Bootstrap

As a newcomer to the coding world, I am encountering an issue with my Navbar. Everything appears fine at 100% zoom on the browser, but when I zoom in to 150%, everything becomes jumbled. How can I ensure that everything stays the same size regardless of zo ...

htmlcssbootstrap-4zooming

Design an aesthetically pleasing chat interface using CSS styling

Currently, I am working on organizing HTML elements to create a user-friendly interface. Utilizing MVC and ASP.NET for this chat client, I have encountered an issue with correctly arranging the items. The default MVC project in Visual Studio provides a str ...

htmlcss

Styling tip: Distance the tooltip from its parent element when scrolling through a list

I have a table inside li tag, and I want to display the description on :hover inside td. However, when scrolling through the list, the description content starts to appear with a distance from its parent. Despite trying various combinations of position se ...

htmlangularjscssangularjs-ng-repeat

Having issues with Bootstrap 4's bg-inverse not displaying correctly?

While attempting to replicate the navbar example from Bootstrap's documentation, I encountered an issue where the background color of the navbar was not loading properly. <nav class="navbar navbar-inverse bg-inverse"> <a class="navbar-br ...

cssbootstrap-4

Step-by-step guide to triggering the inactive dropdown function by selecting a different menu item

This issue seems to have cropped up recently, possibly due to multiple changes being made. The main problem is figuring out how to deactivate a dropdown menu when another menu item is clicked. As shown in the image below, it appears that two items are sele ...

javascriptjqueryhtmlbootstrap-4sidebar

Using AngularJS to interact with neighboring DOM elements

Imagine a scenario where there is a div containing 5 img elements. When one of these img elements is hovered over, the goal is to change the class of all the elements on its left side. <div id="stars"> <img src="star.png" data-rating="1" ng- ...

javascripthtmlangularjsfrontend

How to align text to the right with ellipsis and button in a ReactJS component

In a specific scenario, I need to display a button on the right corner of the header. The selected filter value should appear next to the filter button like this: | Between 01/23/2018 and 07/30/2018 {button}| As the user changes the screen size, I want to ...

htmlcssreactjsellipsis

Substitute link with asynchronous JavaScript and XML

I need to enable/disable user accounts by clicking on an anchor. The list of users is created dynamically using a loop. Here's an example of an anchor tag: <a href="http://www.example.com/users/deactivate/44" class="btn btn-success" title="Deactiv ...

javascriptjqueryhtmlajaxanchor

PHP encountered an issue while trying to compare the value stored in the $_POST variable with the value stored in a

In my current project, I have utilized a JSON file to store data and PHP to retrieve and display it. However, I am facing an issue when comparing values from $_POST - specifically, if the value contains spaces, the comparison fails. Here is the problematic ...

phphtmljsonformspost

HTML Input Hidden : Completely Concealed

I have been working on creating a 'captcha' for my website, and this is the code I am using: <form class="captcha" method="post"> <label><?php echo $captchas ?></label><br> <input name="captcha" /> <input t ...

htmlhtml-input

What is the best way to create extra space around elements without causing them to disappear off

Looking for a solution to add padding or margin to the right column of a two-column layout without pushing the content off screen? In my example, I've indicated where I would like the extra space to be with an arrow. When I try adding margin or paddin ...

css

Using php variable to pass data to jquery and dynamically populate content in jquery dialog

I am facing challenges trying to dynamically display MySQL/PHP query data in a jQuery dialog. Essentially, I have an HTML table with MySQL results. Each table row has an icon next to its result inside an anchor tag with the corresponding MySQL ID. echo &a ...

javascriptphpjqueryhtmlmysql

What is the process for determining the overall cost of a column in Angular 9?

I am facing a challenge in calculating the total price, total quantity, and total counted(#) of each column in a table. | Item | Price | Quantity | 1 | Mouse | 500 | 1 | 2 | Wire | 100 | 2 | TI:3 | |TP:600 | TQ:3 | < ...

javascripthtmljqueryangular

Instructions on how to present a list of employee information according to the user's gender preference using a selection of three radio buttons

I have developed a view that displays a table of employees, using a json array to store their details in the component. Additionally, I have implemented 3 radio buttons: all, male, and female. My goal is to have the table show all employees when "all" is ...

htmlangulartypescript

Artistically connect the main navigation bar to the secondary one

I am currently working on developing a responsive website. I am following the "content first" methodology, starting with designing for the smallest mobile layout. The homepage of the site (still under construction) looks something like this: When a user c ...

jqueryhtmlcss

Enhanced Compatibility of HTML5/CSS3 Modal Box with Internet Explorer

I'm experimenting with HTML5/CSS3 for the first time and have implemented a cool little link to display a dialog (modal) on one of my web pages. While this works perfectly in Chrome/Firefox, it unfortunately doesn't function properly in Internet ...

htmlinternet-explorercsscross-browser

Creative styling options for image thumbnails using Bootstrap

Can someone help me with an issue I'm having while using the Bootstrap Thumbnail grid system? My images are overlapping and I can't figure out why. I've attached an image for reference. Whenever I hover over the images, the ones in the midd ...

htmlcsstwitter-bootstrapgrid

How can I make a child of Object3d in Three.js face the camera?

One challenge I am facing involves an Object3d composed of 6 planes arranged to form a cube. After applying quaternion rotation based on mouse input and bringing the cube to a stop, my goal is to have the cube align itself directly with the camera at its c ...

htmlcanvasthree.js3d