Search code examples
cssfontsfont-face

Beginner Question: How to use different font weights for the same font in the same stylesheet?

I have added the font face Acumin Pro Condensed twice, both with different font-weights; 400 and 700.

I have tried to apply the font with both seperate weights, 400 on a h3 tag and 700 on a 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;
}

I have tried changing the name of the font-family to something different but that doesn't seem to work either.

Solution

  • I believe you're defining the same font for both. (See this)

    In your font-family bindings, you're saying:

    A font-family called Acumin Pro Condensed with font-weight: 700 is 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')

    Then you're saying the same thing for a weight of 400. When you specify a weight in a font-family binding, you're identifying it so you can use it later, not changing it's weight.

    If you want to have a bolder or lighter version of Acumin Pro Condensedyou would need to find a different src for it. You haven't actually added both 700 and 400 weights, you've added the same font twice and said use the same thing whether you ask for 700 or 400.

    The great thing is, you got it to work as it's supposed to, you just didn't get the result you wanted. So just find that other font (heavier or lighter), switch the source file address to match and you'll be good to go!