Newbie Query: How can I apply various font weights to a single font within the same stylesheet?

Twice I have inserted the font Acumin Pro Condensed, once with a weight of 400 and again with a weight of 700.

I attempted to use both weights separately; assigning the 400 weight to an h3 tag and the 700 weight to an h2 tag. However, only the 700 font weight is being applied.

@font-face {
font-family: 'Acumin Pro Condensed';
src: url('../fonts/Acumin\ Pro\ Condensed.woff2') format('woff2'),
    url('../fonts/Acumin\ Pro\ Condensed.woff') format('woff'),
    url('../fonts/Acumin\ Pro\ Condensed.ttf') format('truetype');
font-weight: 700;
font-style: normal;
} 

@font-face {
font-family: 'Acumin Pro Condensed';
src: url('../fonts/Acumin\ Pro\ Condensed.woff2') format('woff2'),
    url('../fonts/Acumin\ Pro\ Condensed.woff') format('woff'),
    url('../fonts/Acumin\ Pro\ Condensed.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}

h3 {
font-size: 1em;
color: white;
font-family: 'Acumin Pro Condensed';
font-weight: 400;
text-transform: uppercase;
}

h2 {
font-size: 1.25em;
color: white;
font-family: 'Acumin Pro Condensed';
font-weight: 700;
}

Even when I tried changing the font-family name to something else, the issue persisted without any resolution.

cssfontsfont-face

Answer №1

It appears that you have assigned the same font for two different weights. (Check this out)

Within your font-family declarations, you are specifying:

A font-family named Acumin Pro Condensed with font-weight: 700 is located here:

src: url('../fonts/Acumin\ Pro\ Condensed.woff2') format('woff2'),
    url('../fonts/Acumin\ Pro\ Condensed.woff') format('woff'),
    url('../fonts/Acumin\ Pro\ Condensed.ttf') format('truetype')

Similarly, you have specified the same information for a weight of 400. When you assign a weight in a font-family declaration, you are merely defining it for later use rather than altering its weight.

If you desire a bolder or lighter version of Acumin Pro Condensed, you will need to source a distinct src for it. Essentially, you have not included both 700 and 400 weights; instead, you have inserted the identical font twice and instructed it to be utilized regardless of whether 700 or 400 is requested.

The positive aspect is that you have achieved the intended functionality, albeit not producing the desired outcome. To remedy this, locate the alternative font (heavier or lighter), update the source file address accordingly, and you should be all set!

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

"Enhance your website navigation with the Bootstrap BS3 navbar clc Dropdown-Submenu feature

Utilizing Bootstrap BS3 for the construction of my Django website. I created a dropdown-submenu that is operational on http://www.bootply.com/nZaxpxfiXz# However, when implementing the same in my project, I encountered: The issue is that the dropdown-men ...

jquerycssdjangotwitter-bootstrapdrop-down-menu

The function assigned to [variable].onclick is not being executed, despite no errors being displayed in the console

I'm new to javascript and I'm looking for help with a simple task. I want to create a code that when clicking on an image, it will open in a modal. This feature is important for viewing full-size images on my portfolio. Although there are no erro ...

javascriptcsssimplemodal

Highlighting table rows on mouseover using CSS

I am trying to add a hover effect to my table rows, but when I apply the CSS styles for this behavior, the rows start wrapping. Here's a comparison of how the table rows look before and after applying the styles. You can see the wrapping issue in the ...

htmlcss

Placing a moveable object in a designated spot for dropping at the desired location

I've been attempting to clone and drop a draggable object at the exact position within a droppable area where the drop event takes place. While I have come across examples online that demonstrate appending draggables to droppables, they all tend to re ...

javascriptjqueryhtmlcssjquery-ui

What is the option for receiving automatic suggestions while formatting components in a react.js file?

When styling elements in our app using app.css or styles.css, VS Code provides auto-suggestions. For example, if we type just "back" for background color, it will suggest completions. However, this feature does not work in react.js or index.js. Why is that ...

javascripthtmlcssreactjs

An issue arises in vue.js where the v class binding takes precedence over other bindings and fails to properly remove

I have a game with a punching bag where I want to incorporate an animation class each time the bag is clicked. Once the health meter hits zero, I intend to replace the bag image with one depicting a burst bag. Things are running smoothly up until the poin ...

javascriptcssvue.js

I have to define a specific identifier in Django so that I can easily incorporate it into Bootstrap later on

I am working on creating a portfolio in Django. I have a section in my HTML code that connects to my jobs list in Django using {% for ... %} in order to display images, summaries, and titles of my projects. However, there is an ID within this div that refe ...

cssdjangodjango-templates

Display the page number when printing using CSS

I am struggling to display the page number at the bottom of my printable document. I followed a source on Stack Overflow, but unfortunately, it did not work for me. My current CSS attempt to achieve this is as follows: body { text-align: justify; } /* ...

htmlcss

Achieving responsive design using text font percentage instead of text images can be done by implementing the following code snippet provided below

When working with text in HTML, I encountered an issue where using percentages for width and height was not giving me the desired results. To work around this, I used images of text instead, but each image ended up either stretched or looking too small. H ...

htmlcss.netimagealignment

Tips for properly aligning an image within an owl carousel

Currently, I am attempting to center a small image within the owl carousel. While I have managed to center it when it's active and in the center, I'm encountering issues when the item no longer carries the "center" class. You can access Owlcarou ...

javascripthtmlcsssassowl-carousel

Is there a way to arrange three of these cards side by side using CSS to alter their layout?

Hey everyone, I currently have a page that looks like this: Check out the current page I'm looking to change it so that instead of one image per row, there are three images per row (and reduce their size to fit three in a row). Here is my current c ...

htmlcssbootstrap-5

What is the best way to ensure a div element on a printed page has a space between its bottom edge and the physical paper, as well as a space between its top

Within my div element lies a collection of other div elements. These elements contain lengthy text that may span multiple pages. I am attempting to print this text starting 50mm from the top edge of every physical paper, and stopping 20mm before the edge o ...

htmlcssprintingmedia-queries

Positioning the box at the exact middle of the screen

I'm trying to center an item on the screen using material ui, but it's appearing at the top instead of the middle. How can I fix this? import * as React from 'react'; import Box, { BoxProps } from '@mui/material/Box'; functio ...

cssreactjstypescriptmaterial-ui

Skewed top-left border surrounds the element with a dashed design

I'm looking to achieve a border effect similar to the one shown in the image linked below: https://i.sstatic.net/a4hCQ.jpg Here is the code I have tried so far: <p>Some Text</p> p{ -webkit-transform: perspective(158px) rotateX(338deg ...

htmlcssbordercss-shapes

Personalizing the predefined title bar outline of the input text field

The outline color of the title in the input textbox appears differently in Google Chrome, and the bottom border line looks different as well. <input type="text" title="Please fill out this field."> https://i.stack.imgur.com/iJwPp.png To address th ...

htmlcssangulartypescript

Is using transform scale in CSS to scale SVG sprites a valid method of scaling?

I have been using an SVG sprite as a CSS background image in this manner: .icon-arrow-down-dims { background: url("../sprite/css-svg-sprite.svg") no-repeat; background-position: 16.666666666666668% 0; width: 32px; height: 32px; display: inline-b ...

htmlcsssvg

Display a custom toast from a list using Bootstrap 5

I've been utilizing the toast feature from Bootstrap, and it works perfectly when displaying a single toast. However, I encountered an issue when trying to display a specific toast, like an error toast, from a list of predefined toasts. It ended up sh ...

csstoastbootstrap-5

What is the best way to center this menu on the web page?

Is there a way to center this menu on the web page for better alignment? Any suggestions on improving the code are welcome. Thank you in advance. Edit: Also, how can I modify the hover effect to change the background color to green and make it expand full ...

css

Attempting to change the background color of a table row when hovering in React, but experiencing no success

Describing the appearance of my table row: <tr onMouseEnter={() => {this.buttonIsHovered = true} } onMouseLeave={() => {this.buttonIsHovered = false}} className={this.buttonIsHovered ? 'hover' : null}> The initial value ...

javascriptcssreactjs

Having trouble getting CSS to center text properly. It just won't cooperate

After spending 2 days trying to figure this out on my own, I have come to a dead end. It seems that my lack of expertise in CSS is the root cause of the issue. Here is the code snippet I am working with: <table class="demo"> <tr> <th style ...

htmlcss