Can't seem to get fonts to load

[mcarreon]

I'm trying to load in some Google Fonts in ttf format and they don't seem to want to load. I'm using next-fonts as well as SCSS for styling. The fonts are under in /static/fonts/ but I can't figure out what I'm doing wrong. Any help would be appreciated!

I'm loading the plugins like this:

const withSass = require('@zeit/next-sass');
const withFonts = require('next-fonts');
const compose = require('next-compose');

module.exports = compose([[withFonts],[withSass]]);

And my SCSS imports are as such:

@font-face {
  font-family: 'Ovo';
  font-weight: 400;
  src: url('/static/fonts/Ovo-Regular.ttf') format('ttf');
}

@font-face {
  font-family: 'Muli';
  font-weight: 400;
  src: url('/static/fonts/Muli.ttf') format('ttf');
}

@font-face {
  font-family: 'Muli';
  font-weight: 600;
  src: url('/static/fonts/Muli-SemiBold.ttf') format('ttf');
}

[mcarreon]

Switched next.config.js to this, still does not work:

const withSass = require('@zeit/next-sass');
const withFonts = require('next-fonts');
const withPlugins = require('next-compose-plugins');

const nextConfig = {
  test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 100000
    },
    publicPath: "./",
    outputPath: "static/",
    name: "[name].[ext]"
  }
};

module.exports = withPlugins([withFonts, withSass, {
  exportPathMap: function() {
    return {
      '/': { page: '/' },
      '/resume': { page: '/resume' },
      '/blog': { page: '/blog' },
    };
  }
}], nextConfig);

[rohanray]

Hi @mcarreon : Please refer to https://github.com/rohanray/font-error and see if it helps. Also, please try to share a repro minimal project. Thanks -RR

[rohanray]

Closing the ticket for now. @mcarreon Please reopen if shared link did not help. Thanks -RR