@font-face not working. I am a novice html & css user

Question

 @font-face
   {
    font-family: 'trajan';
    src:
        url ('fonts/trajan.otf'),
        url ('fonts/trajan.eot'),
        url ('fonts/trajan'),
        url ('fonts/trajan.woff'),
        url ('fonts/trajan2'),
        url ('fonts/trajan3');
   }


 #customfont{

    color: white;
    list-style: none;
    font-size: 40px;
    font-family: trajan;

}

---

HTML

<div id="customfont">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>

---

The font size changes. It appears that I only have the custom font part messed up. I have stored the fonts in a folder called 'fonts'

Answer 1

I don`t know if it makes any difference, but you have a url without extension ( url ('fonts/trajan') )

Or you might have the path wrong (maybe your CSS is in a folder and you need to go up one folder?).

Anyway, here is a structure that I use for @font-face:

/* FONTS */
@font-face {
  font-family: 'trajan';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/trajan.eot');
  src: url('fonts/trajan.eot?#iefix') format('embedded-opentype');
  src: local('trajan'), url(fonts/trajan.woff) format('woff');
}