I can't seem to get my font-family to work using @font-face

Hello I downloaded a font from the web and have tried implimating it in CSS using @font-face, but it doesn't work. I'm using Netbeans IDE 8.0.2 and the file is in my fonts folder.

@font-face {
    font-family: MINISTRY;
    src: url(fonts/MINISTRY.otf);
    src: local("MINISTRY"), local("MINISTRY"), url(MINISTRY.otf)  format("opentype");
}

Solution

Ok let me re-iterate what I had mentioned in the comments section.

According to articles found here and here, browser support for the .otf font type is spotty to say the least. According to the latest W3C specs, the .wofffont type has the best support amongst all modern browsers.

So my suggestion is to convert your web font to the woff format using one of the multitudes of online conversion tools available. FontSquirrel is one such online site which has been used and recommended by a lot of people. Now you can use just the one font type (.woff) or you can add multiple font types to your @font-face rule like it is referenced here in this article by Paul Irish. Although I should mention that this article is almost 5-6 years old and not completely relevant to current times.

Now that being said, make sure the path to the font file is properly referenced. What I mean by that is, if your file structure resembles something like this,

root Folder
    |
    |-- css folder
    |       |-- .css file
    |-- Font folder
    |       |-- .otf font file
    |       |-- .woff font file
    |       |-- .svg font file
    |-- Html files folder
    |       |-- .html file(s)

Now in this example the path to your font files as mentioned in the @font-face rule is "../fonts/filename.filetype". So the path to the font file matters.

Now even after that if you are finding that your font files are not loading, check if the server has proper access to serve the font files. What I mean is if the server gets a font file type , then it knows what to do with that specific font type. Now if you have a cross domain font request ( using CDN) then some browsers complain and quit working. You will find this reference to be very useful to understand and handy.

Hope I have shed enough light on this subject for you. Happy Coding :)

UPDATE::

also refer this SO question for idea