CODEWITHSUNDEEP
htmlcsswordpressfontsfont-face
idbruin
idbruin

Reputation: 68

How can i include different font-weights with one font file?

I am currently making a website in Wordpress. The problem I have is using a font. I couldn't find an answer to my question here, so I decided to ask myself. Someone send a font to me to use, but the problem is when I open the file there are different styles of that font. To be clearer: the font is Avenir Next and the different styles are Avenir Next Bold, Avenir Next Medium, Avenir Next Ultra Light.

It is not a google font. I have tried to include it with @font-face :

@font-face {
    font-family: Avenir Next;  
    src: url('http://localhost/cultuurfonds/wp-
         content/themes/monstroid/fonts/Avenir-Next.ttf');
    font-weight: bold;
    font-weight: 700;
}

@font-face {
    font-family: Avenir Next Medium;  
    src: url('http://localhost/cultuurfonds/wp-
         content/themes/monstroid/fonts/Avenir-Next.ttf');
    font-weight: normal;
    font-weight: 400;
}

With this I can use the Avenir Next (which is pretty bold, so I don't want to use that), but Avenir Next Medium doesn't work.

It is a paid font, but I am not the one who bought it. That person send the font file (Avenir-Next.ttf) to me, so this is what I have to work with.

I prefer to not use a plugin to include it. I couldn't find a good plugin for it anyway. But if there is no other way than to use a plugin, I am willing to use it.

I hope my question is clear (first question here).

Upvotes: 3

Views: 4865

Answers (1)

Tautvydas Banys
Tautvydas Banys

Reputation: 133

If you want to load fonts from your local files, firstly you have to use tools like https://www.web-font-generator.com/ to generate different formats of the font.

Then you have to load all formats of the font like this

@font-face {
    font-family: 'AvenirNextLTPro';
    src: url('fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),  
        url('fonts/AvenirNextLTPro-Regular.otf')  format('opentype'),
        url('fonts/AvenirNextLTPro-Regular.woff') format('woff'), 
        url('fonts/AvenirNextLTPro-Regular.ttf')  format('truetype'), 
        url('fonts/AvenirNextLTPro-Regular.svg#AvenirNextLTPro-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNextLTPro';
    src: url('fonts/AvenirNextLTPro-Demi.eot?#iefix') format('embedded-opentype'),  
        url('fonts/AvenirNextLTPro-Demi.woff') format('woff'), 
        url('fonts/AvenirNextLTPro-Demi.ttf')  format('truetype'),
        url('fonts/AvenirNextLTPro-Demi.svg#AvenirNextLTPro-Demi') format('svg');
    font-weight: 500;
    font-style: normal;

}

As you can see font-family name is the same, but font weight size is different (Regular - 400 and Demi - 500)

Then, when you want to use different font weight in different elements you have to declare it like this:

p {
  font-family: 'AvenirNextLTPro';
  font-weight: 400;
}

h1 {
  font-family: 'AvenirNextLTPro';
  font-weight: 500;
}

Upvotes: 1

Related Questions