Custom Locally Stored Fonts (dev machine and server side): CSS? - css

Question

Problem:
I'm attempting to use Abadi MT Condensed Extra Bold font. Unfortunately, I can't find any CDN's that provide this over an API. Is there something wrong with the css code that I'm using to pull in the fonts? I know for sure the stylesheet is being loaded.
Context
The font works when I have it turned on in my system's font book 100%, but not when disabled/removed -- but I understand that it's not practical to expect that every user is going to have that font. So given this, it does not work on an iPhone or Android device.
Am I better off finding a font in a CDN or, is it possible to make this work? Thanks!
Code:
****** fonts.css ********
#font-face {
font-family: 'serif';
src: url('../fonts/Abadi MT Condensed Extra Bold.eot');
src: local('☺'), url('../fonts/Abadi MT Condensed Extra Bold.woff') format('woff'), url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype'), url('../fonts/Abadi MT Condensed Extra Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
***** layout.pug *******
doctype html
html(lang='en')
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
meta(name='description', content='')
meta(name='author', content='')
title #{title}
//jquery
script(src='https://code.jquery.com/jquery-2.2.4.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js')
//shopify
script(src='http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js')
//custom cart
script(src="scripts/cart.js")
//popper
script(src='./vendor/popper/popper.min.js')
//bootstrap
script(src='./vendor/bootstrap/js/bootstrap.min.js')
//Favicons
link(rel='apple-touch-icon', sizes='57x57', href='/favicon/apple-icon-57x57.png')
......
......
// Bootstrap core CSS
link(href='vendor/bootstrap/css/bootstrap.min.css', rel='stylesheet')
//Gliphicons had to be pulled in separately
link(href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css', rel='stylesheet')
// Custom fonts for this template
link(href='./stylesheets/fonts.css', rel='stylesheet')
// Custom styles for this template
link(href='./stylesheets/template.css', rel='stylesheet')
Attempted Solutions
I've already attempted solutions like this. Also my CSS code used to not have the entire fonts.css file.

Answer 1

I was able to figure this out, posting for anyone else that has the same issue.
I found this blob to help
So now my final code is
#font-face {
font-family: AbadiBold;
src: url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype');
src:
url("../fonts/Abadi MT Condensed Extra Bold.woff") format("woff"),
url("../fonts/Abadi MT Condensed Extra Bold.otf") format("opentype"),
url("../fonts/Abadi MT Condensed Extra Bold.svg#filename") format("svg");
font-weight: 400;
font-style: normal;
}
* {
font-family: AbadiBold
}
h1, h2, h3, h4, h5, h6, .text-heading {
font-family: AbadiBold
}