@font-face not loading custom font

Question

I'm trying to use a custom font (.oft) that I have uploaded into my font folder in my filesystem.

I've declared the font in CSS with the following:

@font-face {
    font-family: '400'; /*a name to be used later*/
    src: url('../font/400ml-Regular.otf'); /*URL to font*/
}

and called it with :

.intro .slogan {
    text-align: center;
    font-family: '400';
}

My index.html page is in the root folder (var/www/html) and the css and font are in /var/www/html/css and /var/www/html/font respectively (so i think the '..' in the src is correct). I've also added the following to .htaccess

AddType font/otf .otf

but i'm still not even able to see it loading in developer tools.

Does anyone have any advice?

Answer 1

To make @font-face work across different browsers and OP you need to make it like this

@font-face {
  font-family: '400';
  src: url('400ml-Regular.eot'); /* IE9 Compat Modes */
  src: url('400ml-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('400ml-Regular.woff') format('woff'), /* Modern Browsers */
       url('400ml-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('400ml-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Use a fontface generator to make different font formats. Try fontsquirel or simillar :)