How to change font using @font-face on ffonts.net

I'm working on a tribute page dedicated to Playstation, and want to use a webfont I found. I've been trying to implement it using the @font-face attribute but I seem to be doing something wrong

https://css-tricks.com/snippets/css/using-font-face/ This is the guide I been trying to follow. https://webfonts.ffonts.net/Slim-Play.font This is what I assumed to be the webfont sever link but at this point I'm unsure.

@font-face {
  font-family: 'slimplay';
  src:  url('https://webfonts.ffonts.net/Slim-Play.woff2') format('woff2'),
        url('https://webfonts.ffonts.net/Slim-Play.woff') format('woff'),
        url('https://webfonts.ffonts.net/Slim-Play.tts') format('truetype');
}
h1 {
  color: blue;
  font-family: "slimplay";
}

I expected the font-family: "slimplay" to make it the specified font, but after testing with a generic h1 tag the only thing that took was the color blue.

Solution

The formatting of your @font-face is fine; I had a look at your font links and they appear to invalid. My suggestion is to download them locally, then upload to a file-hosting site (like Dropbox) and replace your current font links with those. Here is a tutorial.

If you decide to go with Dropbox, here is an example of what it would look like:

@font-face {
  font-family: 'slimplay';
  src:  url('https://dl.dropbox.com/s/asdfghjkl/Slim-Play.woff2') format('woff2'),
        url('https://dl.dropbox.com/s/asdfghjkl/Slim-Play.woff') format('woff'),
        url('https://dl.dropbox.com/s/asdfghjkl/Slim-Play.ttf') format('truetype');
}

(And your CSS styling can remain unchanged)

Hope this helps