How to add a custom font (not google font) to Upfront

I want to add a custom web font to my new site that isnt featured on Google Fonts.

I am using Montserrat which I have added via the Theme Font Manager but the problem is Google Fonts only features 3 weights for this font, however there are 5 weights available on Squirrel Fonts including light and ultra-light (which are the ones I want to add).

Squirrel Fonts have a webfont generator which generates the fonts for you and gives you all of the font files and the @font face css. But I am just not 100% sure how to implement this.

I uploaded the font files to the wp-content/fonts folder via FTP and then added the @font face CSS to the Custom CSS section of Upfront but it didnt seem to work. I am wondering if I am doing this correctly or if there is some special method to get this happening.

Any advice/directions you might be able to provide would be great.

Cheers... brett