Q:

Issue using @font-face css referencing the downloaded font to display on html page

This is work in progress, but I've uploaded the code here 
http://crea8tion.com/ChristmasMessage/index.html
I've downloaded and placed the font MerryXmas.ttf into the root directory where my index html document is held.
In css I've added 
@font-face{
    font-family: "MerryXmas";
    src: url('MerryXmas.ttf');
}

h4 {
font-family: MerryXmas;
}

But the font should look like this http://www.dafont.com/merry-xmas.font but you will see it doesn't. The site is built using a foundation 5 framework, but I've removed the style link at the moment to make sure that wasn't impacting the font.
From using Google console as far as I can see the font is being referenced correctly, just not sure what I'm over looking?

A:

Change src: url('MerryXmas.ttf'); to src: url('../MerryXmas.ttf'); and try again
the font path must be relative to the CSS file

