CODEWITHSUNDEEP
csshtmlfonts
BBaccs
BBaccs

Reputation: 11

Why is this custom font not being applied?

I downloaded a font called Helio from envato, but I can't get the font into my local file (haven't tried live).

My code is 

@font-face {
    font-family: 'helios_roundedregular';
    src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
         url('../css/fonts/helios_rounded-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
    line-height: 1.4;
    margin: 0;
    padding: 0;
    font-family: Helios Rounded;
     font-weight: normal;
    font-style: normal;
}

This is a picture to the file path: picture

I believe it's correct. The I have the root folder, the css folder, and the font folder which contain the font files. The img shows the css and font folders open

Upvotes: 0

Views: 806

Answers (3)

Ajeje Brazow
Ajeje Brazow

Reputation: 5

You seems to be using wrong name for Font-Family, try this name instead. 

 @font-face {
       font-family: 'Helios Rounded';
    }

Upvotes: 0

samule barman
samule barman

Reputation: 21

your CSS files reside in the css directory, omit the css directory declaration.

src: url('./fonts/Helios Regular.woff') format('woff'), url('./fonts/Helios Rounded.woff') forma

Upvotes: 0

Jake Miller
Jake Miller

Reputation: 2642

The file names differ from the font in your path.

change

src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
     url('../css/fonts/helios_rounded-webfont.woff') format('woff');

to

src: url('../css/fonts/Helios Regular.woff') format('woff'),
     url('../css/fonts/Helios Rounded.woff') format('woff');

Also, if your CSS files reside in the css directory, omit the css directory declaration.

src: url('./fonts/Helios Regular.woff') format('woff'),
     url('./fonts/Helios Rounded.woff') format('woff');

Upvotes: 0

Related Questions