Fonts fail to load

[rctneil]

My code is below but the fonts never load. I just get "Bitter failed to load" showing in the console. Is there any reasons that could make this happen. Any suggestions with how to resolve it?

import FontFaceObserver from 'fontfaceobserver'

document.addEventListener("turbolinks:load", function() {
    let font = new FontFaceObserver('Bitter', {
        weight: 400
    })

    font.load().then(function () {
        console.log('Bitter has loaded.')
    }).catch(function () {
        console.log('Bitter failed to load.')
    })
})

[rctneil]

I am using this inside Webpacker. Would this make a difference?

[bramstein]

Do you have the @font-face rules in your CSS?

[Lion-El]

Hi bramstien,

[Lion-El]

I am getting the error: Failed to load resource: the server responded with a status of 404 () with the deployed version on github but works fine locally. error points to fontfaceobserver.js:1