@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:


      @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; 




    <div class="normaltext">

    <div class="title">


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.)