Search code examples
wordpressfont-face

How to include fonts @font-face

I have downloaded a font libertaion_sans that is keep inside a Wordpress theme under a font folder like this \fonts\liberation_sans

I saw lots of videos on Youtube and some links on StackOverflow, but I failed to include them correctly.enter image description here

If I am not wrong we have to define these fonts in style.css before actually using this:

font-family

Can some one please help me.

Currently,

I am interested in using them →

font-family: LiberationSans-Bold;
Solution

  • Something like this => In your css file

    @font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('/fonts/font.ttf'); /*URL to font*/
}

    And use like font-family: 'YourFontName' in any css rule.
    Cheers!

    PD: Create each separatly.

    @font-face {
    font-family: 'LS-bold'; /*a name to be used later*/
    src: url('/fonts/ls-bold.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'LS-Regular'; /*a name to be used later*/
    src: url('/fonts/ls-regular.ttf'); /*URL to font*/
}

    ..etc...
    And if you want to use the bold font, you have to font-family:'LS-bold'.
    Understood?