在带有sass，css和语义ui的nextjs中使用Google字体

我有一个具有以下配置的next.config.js文件：

const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');

module.exports = withSass(withCss({
  webpack (config) {
    config.module.rules.push({
      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          publicPath: './',
          outputPath: 'static/',
          name: '[name].[ext]'
        }
      }
    })

    return config
  }
}));

这很棒，因为它运行我的语义ui css文件。

现在我有一个问题。我似乎无法成功导入任何Google字体网址。我尝试将ttf文件下载到我的文件路径中，并尝试使用@import scss函数引用它。但是我得到一个GET http：// localhost：3000 / fonts / Cabin / Cabin- Regular.ttf net :: ERR_ABORTED 404（Not Found）错误

这是我正在尝试使用Google字体的方法：

@font-face {
  font-family: 'Cabin';
  src: url('/fonts/Cabin/Cabin-Regular.ttf')  format('truetype');
}

$font-size: 100px;
.example {
  font-size: $font-size;
  font-family: 'Cabin', sans-serif;
}

我还下载了相关的npm依赖项：

"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"file-loader": "^2.0.0",
"next": "^7.0.2",
"node-sass": "^4.9.4",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.83.0",
"url-loader": "^1.1.2"