next.js - How lead my NextJS app to accept otf and ttf fonts?
问题描述
I'm working with NextJS, when I build my app my console returns me:
ModuleParseError: Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type.
I'm wondering what going's wrong since I have build a custom webpack's configuration.
Here my next.config.js:
module.exports={
exportPathMap: () => ({
"/": {page: '/'}
})
}
const config = {
cssModules: true,
module:{
rules:[
{
test:/\.(png|jpg|woff|svg|eot|ttf|woff2|otf)$/,
loader:'url-loader?limit=8192&name=images/[name].[ext]'
}
]
}
}
// config.module.rules.push(
// );
const withCss = require('@zeit/next-css');
const withImages = require('next-images');
module.exports = withImages(withCss(config));
I have tried to launch my app with a css precising the nature of my font format vie format("opentype")
and without it, but both fail:
@font-face {
font-family: Moonlight;
src: url(../assets/choiceFonts/Moonlights_on_the_Beach.ttf);
}
@font-face {
font-family: Nenuphar;
src: url(../assets/choiceFonts/Nenuphar_of_Venus.otf) format("opentype");
}
@font-face {
font-family: Prida;
src: url(../assets/choiceFonts/Prida01.otf) format("opentype");
}
Any hint would be great, thanks
解决方案
对于仍在遭受此问题困扰的其他人
在最新版本的 next 中,您将所有静态资产存储在/public
项目根目录下的目录中。在该目录中,将所有字体文件存储在一个目录/fonts
中。
然后:
@font-face {
font-family: 'font-name';
src: url('/fonts/font-name.ttf'); // pattern: /directoryName/file.extension
}
/* In your css file where you want to use the font */
.element {
font-family: 'font-name';
}
推荐阅读
- mule - 如何定义 RAML 规范以接受遵循特定路径的所有 URI 参数
- css - Bootstrap 4 - 容器填充整个屏幕,滚动后显示页脚
- git - Invoke-Expression,并非所有输出都返回到变量
- amazon-web-services - 如何一起使用 Fn::Include 和 Fn::Sub?
- c - 将联合传递给函数无法识别参数名称
- java - 在控制器方法签名处处理异常
- javascript - 页面重新加载后如何使代码在已挂载的生命周期挂钩中运行
- java - Spring Boot 不需要 CSRF 令牌
- flutter - 将小部件的底部动态设置到另一个小部件的中间
- numpy - 如何使用与行相关的数组索引多维数组?