Add Custom (non-Google) Fonts

Hello. I know this has been asked, but I cannot get this to work. Here is what I’ve tried.

1. Copy the font files to a folder named “fonts” and placed that folder under themes > enfold-child **I’ve also tried themes > enfold
2. Here is my Quick CSS

@font-face {
font-family: ‘caviar_dreamsregular’;
src: url(‘fonts/CaviarDreams-webfont.eot’);
src: url(‘fonts/CaviarDreams-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/CaviarDreams-webfont.woff’) format(‘woff’),
url(‘fonts/CaviarDreams-webfont.ttf’) format(‘truetype’),
url(‘fonts/CaviarDreams-webfont.svg#caviar_dreamsregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

.font-caviar-dreams {font-family: ‘CaviarDreams’; }

3. I then activated the Custom CSS class option within Enfold
4. I then added font-caviar-dreams to the Custom CSS field of a Special Heading item on the Home Page (“— Enter Title Here — ex. Start Saving Today!”)

Thank you,
Ryan