Custom Locally Stored Fonts (dev machine and server side): 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.

I know it's something that you have done for sure, but if the fonts are not loading, normally it's because the font-face declaration has a wrong path to them. If you are sure that this is not the case, we would need a live link to a demo site, to check if it's something different, but I'm pretty sure that the problem it's the path to the fonts... — Miguel Morera, Aug 23 '17 at 09:40
Why are you declaring `src` twice? Use this syntax and see if it works for you https://jsfiddle.net/m6v7xrw3/ — I haz kode, Aug 23 '17 at 09:43
@Ihazkode It's an old practice, a [bulletproof method for font-face](https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)... Normally I use something similar, but I don't like the `local` rule, it's something I stopped using many years ago... — Miguel Morera, Aug 23 '17 at 09:51
Just looked at it. Chrome 60 and the font is loaded and rendered. — I haz kode, Aug 23 '17 at 10:29
really? the home bar looks like this? https://drive.google.com/open?id=0ByloKBtIdQCJNS04SnQ2UDRFeFE — Lucas Crostarosa, Aug 23 '17 at 10:32
Like [so](https://i.stack.imgur.com/X7Pzk.jpg) and [so](https://i.stack.imgur.com/FYWMp.jpg) — I haz kode, Aug 23 '17 at 10:36
ya @Ihazkode, thats not the proper version, the one on my gdrive link is proper — Lucas Crostarosa, Aug 23 '17 at 12:03

score 0 · Answer 1 · answered Aug 27 '17 at 20:41

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
}

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

1 Answers1