[英]Self-hosted fonts in Next.js with next-less
我想在Next.js應用程序中自托管字體（即 Noto），該應用程序已經使用了@zeit/next-less插件。
我是否需要使用 npm-package next-fonts來自托管 fonts？ 如果是這樣，我是否需要使用 npm-package next-compose-plugins來使 next-fonts 和 next-less 一起工作？
我是否需要將 fonts（作為 WOFF(2)）下載到我的應用程序存儲庫中的/public目錄中？ 還是直接使用像fontsource-noto-sans這樣的 npm 包來運送 fonts？
我嘗試使用 next-compose-plugins 一起使用 next-fonts 和 next-less。 我創建了這個/next.config.js ：
const WithPlugins = require('next-compose-plugins');
const WithFonts = require('next-fonts');
const WithLess = require('@zeit/next-less');
module.exports = WithPlugins(
[
[ WithFonts, {} ],
[ WithLess, {} ]
],
{});
在我的單個全局少文件中，我放了這個：
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Noto Serif'), local('NotoSerif'), url('/public/fonts/noto-serif.woff2') format('woff2');
}
body {
font-family:
'Noto Serif',
// and for debugging:
monospace;
}
我下載了 Noto 的字體文件並將它們放在 Next.js-application 文件夾中的…/public/fonts文件夾中。
Noto 字體未加載，等寬字體繼續使用。 任何想法為什么？ 以及如何使用 Next.js + next-less 輕松自托管字體的任何想法？
為什么不直接在文檔頭中做一個字體的鏈接 rel
我看不到你的項目，但如果你有public字體，那么你應該能夠引用外部加載的文件
<HEAD>
<link rel="preload" href="/public/fonts/noto-serif.woff2" as="font" type="font/woff2">
</HEAD>
別處
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
}
body {
font-family:
'Noto Serif',
// and for debugging:
monospace;
}
在 next.config.js 中同時添加對 next-css 和 next-less 的支持
[英]Add support for next-css and next-less simultaneously in next.config.js
AuthRetryableFetchError：Supabase 和 Next.js 證書鏈中的自簽名證書
[英]AuthRetryableFetchError: self signed certificate in certificate chain with Supabase and Next.js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.