@font-face font displaying

Hello! I was practicing CSS for improving web design and stumbled across a great fot so I downloaded it and converted the files to eot, woff2, woff, ttf and svg to use them with font-face. The thing is, nothing appears on the page when I run it. The Bakersvillem though, worked perfectly. Can somebody please help?
Here’s the code, it’s pretty simple:

<style>

      @font-face {
          font-family: 'Champagne & Limousines';
          src: url('/fonts/Champagne & Limousines.eot');
          src: url('/fonts/Champagne & Limousines.woff2') format('woff2'),
               url('/fonts/Champagne & Limousines.woff') format('woff'),
               url('/fonts/Champagne & Limousines.ttf') format('truetype'),
               url('/fonts/Champagne & Limousines.svg#Champagne & Limousines') format('svg'),
               url('/fonts/Champagne & Limousines.eot?#iefix') format('embedded-opentype');

    font-weight: normal;
    font-style: normal;
  }

      .title {
          font-size: 28px;
          font-family: 'Champagne & Limousines';
          color: black;
      }

      .normaltext {
          font-family: Baskerville,Baskerville Old Face,Hoefler Text,Garamond,Times New Roman,serif; 
      }

  </style>

</head>

<body>

    <div class="normaltext">
        TEST
    </div>

    <div class="title">
        TEST2
    </div>

</body>

I think the paths could be the problem. Starting with “/” returns to the root directory and looks for the fonts folder there, so try deleting the first forward slash in them so the look like:

src: url('fonts/Champagne & Limousines.eot');

(this works if the ‘fonts’ folder is in the same folder as your css file.)