CODEWITHSUNDEEP
csswordpressfontsfont-face
Joel
Joel

Reputation: 3

@font-face css add custom font

I have a wordpress theme and I want to add a custom font. I have added a "fonts" folder within the theme file in which I put the font files.

Right now my css looks like this:

@font-face {
font-family: Brandon;
src: url('/domains/test.innerwhy.com/html/wp-content/themes/thefox/fonts/Brandon_bld.otf');
font-weight: normal;
}
h1 {
font-family: Brandon;
}

However, this doesn't seem to work and I don't understand why.

Upvotes: 0

Views: 859

Answers (2)

Niraj Kachhadiya
Niraj Kachhadiya

Reputation: 151

It doesn't work because of the src path is wrong. "/domains/test.innerwhy.com/html/wp-content/themes/thefox/fonts/Brandon_bld.otf"

You can download font files locally and use like this:

@font-face {
font-family: 'Montserrat-Regular';
src: url('../fonts/montserrat-regular-webfont.eot');
src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/montserrat-regular-webfont.woff2') format('woff2'),
     url('../fonts/montserrat-regular-webfont.woff') format('woff'),
     url('../fonts/montserrat-regular-webfont.ttf') format('truetype');

}

Upvotes: 0

Sparkz
Sparkz

Reputation: 119

By looking at that I can only suggest that you check that the path is correct from css file. it would also be good to set a fall back in case that font fails to load too. You might also be missing the font file type that's supported by your device.

Upvotes: 1

Related Questions