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

Tips on making Material-UI Drawer compress other content when it is open

Seeking assistance from those familiar with CSS and Material UI! I'm currently working on implementing a Material UI Drawer component that doesn't just slide out over the top of the page content, but actually causes the page content to adjust aro ...

cssreactjsmaterial-ui

Troubleshooting Material-UI Menus

I need the menu to adjust its height dynamically as the content of the page increases vertically. Even though I have applied "height:100%" in the styles, it doesn't seem to work. Can anyone assist with this issue? Here is the code snippet: import R ...

javascriptcssreactjsmaterial-uimenu-items

Removing accordion borders in Bootstrap and AngularJS can be achieved by customizing

Can anyone help me figure out how to hide the border in each accordion group that contains a panel and inner elements? I've tried using classes like .accordion and .inner but nothing seems to work. Any advice on where to find the specific class or ID ...

csslessangularjs-bootstrap

Adding dashes as padding in HTML/CSS

I am currently working on updating the user management block on my website and I want to showcase it with some visual examples. I believe that using images is the most effective way to demonstrate changes. This is the current appearance of the block: ...

htmlcss

What is the best way to ensure all my borders are uniform in size?

As I work on a JavaScript project that organizes words into blocks based on their size, I encountered an issue with inconsistent border thickness in certain areas. I'm using spans to contain each word, but I can't figure out how to make the borde ...

javascripthtmlcss

I'm having trouble making the colors change on my Icon font/sprite rollover

I am currently attempting to position some related icons above my main navigation menu. The goal is to change the text and icon colors when a user hovers over a specific area (the tag with large padding). Unfortunately, I am facing challenges in achieving ...

htmlcsscss-sprites

Linking HTML files across different directories

Here is the current structure of my folders: de/ index.html en/ index.html hu/ index.html img/ image.png style/ stylesheet.css I am wondering how I can link to the css file in the style folder and the image in the img folder directly ...

htmlcsshyperlinkdirectory

Styling list items (li) on hover without using the li:

I have a menu where I am using the :after element. When I hover over a li in the menu, the hover effect also includes the :after element. HTML: <ul class="main-menu"> <li class="active"><a href="">Menu</a></li> <l ...

htmlcsshoverhtml-lists

Extract the color of an individual character

There is a code snippet in JavaScript using p5.js that functions as a video filter: const density = ' .:░▒▓█' //const density = ' .tiITesgESG' //let geist; let video let asciiDiv let playing = false let ...

javascripthtmlcssprocessingp5.js

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

javascriptcss

Trouble with setting the color attribute using setProperty in a GXT text area

Help needed in dynamically changing the font color of a text area from the color menu. Existing attempts to change it have not been successful. Can someone provide assistance? final ColorMenu fontColorMenu = new ColorMenu(); fontColorMenu.getPalette().a ...

javahtmlcssgwtgxt

The variablewidth feature in Slick Carousel is malfunctioning

I've integrated slick slider 1.8.1 into my Rails app (v.5.2.0) and I'm encountering an issue with variablewidth set to true. My expectation was to achieve a layout similar to the example shown here: However, what's happening in my case is t ...

jqueryhtmlcssslick.js

Creating a CSS grid layout with a scrollbar positioned on the left side and content filling from left to right

How can I move the scrollbar to the left while keeping ng-repeat population from left to right? I'm using an ng-repeat to fill a grid that is 3 by X (Width by height). By default, the scroll bar appears on the right side. I want to position it on the ...

htmlcssangularjscss-gridgrid-layout

Tips for navigating a dynamic viewport using scroll movement

Attempting to create a responsive page with two distinct sections at this example link including: Map View Table View Both of these views (table and map divs) need to be responsive without a hard-coded height, so the size of the map div adjusts automatic ...

javascriptjquerycss

a single column with a div of varying height using flexbox

I need to create a div with a height of 120px using only the CSS property display: flex. I am not allowed to use float and can only use div elements. Here is the code I have so far, but I'm unsure how to achieve the desired outcome: .flex-containe ...

htmlcssflexboxdisplay

What is the best way to include my preferred links for reading with PHP Universal FeedParser?

Recently, I've been experimenting with the PHP Universal FeedParser to retrieve and display RSS feeds on my website. However, as a newcomer to this technology, I have encountered some challenges. While the initial link provided in the sample works wit ...

phphtmlcssxmlrss

What causes the disparity in the rendering of iframe content height when using "src" compared to "srcdoc"?

After comparing the behaviors of iframes with src and srcdoc, I stumbled upon a puzzling difference: a div set to 100% height renders as the full height of the iframe when using src=[data uri], but not with srcdoc. The issue can be easily replicated with ...

htmlcssiframe

What sets npm node-sass apart from npm sass?

Recently, I discovered that the recommended approach is to utilize @use rather than @import in sass. However, it appears that using npm sass instead of npm node-sass is necessary for this. Can you clarify the distinction between these two? Also, why do @ ...

cssnpmsassnode-modulesnode-sass

Creating a tiny arrow using CSS

Can anyone advise on the best way to create a small arrow design using CSS? I have tried using a regular closing > arrow, but it's not quite what I'm looking for. https://i.stack.imgur.com/7uLMG.png ...

htmlcss

How can we add a class to a radio button using jQuery when it is checked, and remove the class when it

I'm looking for help with using jQuery to toggle between two radio buttons and display different divs based on the selection. jQuery(document).ready(function($) { if ($('#user_personal').is(':checked')) { $('.user_co ...

javascriptjqueryhtmlcss