astro-font otimizará automaticamente suas fontes personalizadas, fontes locais, fontes sobre qualquer CDN e fontes do Google para desempenho.
O projeto é inspirado na otimização da fonte Next.js.js.
npm install astro-font
# # or yarn
yarn add astro-font
# # or pnpm
pnpm add astro-font Otimize automaticamente qualquer fonte do Google. Para usar a fonte em todas as suas páginas, adicione -a ao arquivo <head> em um layout Astro:
---
import { AstroFont } from " astro-font " ;
---
< head >
< AstroFont
config = { [
{
src: [],
name: " Poppins " ,
// Google Fonts URL
googleFontsURL: ' https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400;1,700&display=swap ' ,
preload: true ,
display: " swap " ,
selector: " body " ,
fallback: " sans-serif " ,
},
] }
/>
</ head > ---
import { AstroFont } from " astro-font " ;
---
< head >
< AstroFont
config = { [
{
name: " Afacad " ,
src: [
{
style: ' bold ' ,
weight: ' 700 ' ,
// Picked up font URL by manually visiting Google Fonts URL
path: ' https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2 '
},
],
preload: true ,
display: " swap " ,
selector: " body " ,
fallback: " sans-serif " ,
},
] }
/>
</ head > ---
import { join } from " node:path " ;
import { AstroFont } from " astro-font " ;
---
< head >
< AstroFont
config = { [
{
name: " Afacad " ,
src: [
{
style: ' normal ' ,
weight: ' 400 ' ,
path: join ( process . cwd (), ' public ' , ' fonts ' , ' Afacad-Regular.ttf ' )
},
{
style: ' medium ' ,
weight: ' 500 ' ,
path: join ( process . cwd (), ' public ' , ' fonts ' , ' Afacad-Medium.ttf ' )
},
],
preload: false ,
display: " swap " ,
selector: " body " ,
fallback: " sans-serif " ,
},
] }
/>
</ head >Você pode importar e usar várias fontes em seu aplicativo. Existem duas abordagens que você pode adotar.
Basta estender a matriz da configuração para conter a nova coleção das fontes:
---
import { join } from " node:path " ;
import { AstroFont } from " astro-font " ;
---
< head >
< AstroFont
config = { [
{
name: " Afacad " ,
src: [
{
style: ' bold ' ,
weight: ' 700 ' ,
path: ' https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2 '
},
],
preload: true ,
display: " swap " ,
selector: " body " ,
fallback: " sans-serif " ,
},
{
name: " Inter " ,
src: [
{
weight: ' 400 ' ,
style: ' normal ' ,
path: join ( process . cwd (), ' public ' , ' fonts ' , ' Inter-Regular.ttf ' )
}
],
preload: true ,
display: " swap " ,
selector: " body > span " ,
fallback: " serif " ,
},
] }
/>
</ head > O atributo selector por objeto de configuração pode ser usado para configurar qual classe CSS refletirá o CSS inteiro (incluindo automaticamente as referências às fontes de fallback CSS).
---
import { join } from " node:path "
---
< AstroFont
config = { [
{
name: " Afacad " ,
src: [
{
style: ' bold ' ,
weight: ' 700 ' ,
path: ' https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2 '
},
],
preload: true ,
display: " swap " ,
fallback: " sans-serif " ,
// My Custom CSS Selector
// Type: ClassName
selector: " .custom_class " ,
},
{
name: " Inter " ,
src: [
{
weight: ' 400 ' ,
style: ' normal ' ,
path: join ( process . cwd (), ' public ' , ' fonts ' , ' Inter-Regular.ttf ' )
}
],
preload: true ,
display: " swap " ,
fallback: " serif " ,
// My Custom CSS Selector
// Type: CSS Selector
selector: " body > span " ,
},
] }
/> O atributo cssVariable por objeto de configuração pode ser usado para configurar qual variável CSS refletirá no seletor de seu documento :root css (incluindo automaticamente as referências às fontes de fallback CSS).
---
import { join } from " node:path "
---
< AstroFont
config = { [
{
name: " Afacad " ,
src: [
{
style: ' bold ' ,
weight: ' 700 ' ,
path: ' https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2 '
},
],
preload: true ,
display: " swap " ,
fallback: " sans-serif " ,
// My Custom CSS Selector
// Type: ClassName
selector: " .custom_class " ,
},
{
name: " Inter " ,
src: [
{
weight: ' 400 ' ,
style: ' normal ' ,
path: join ( process . cwd (), ' public ' , ' fonts ' , ' Inter-Regular.ttf ' )
}
],
preload: true ,
display: " swap " ,
fallback: " serif " ,
// My Custom CSS Variable
// Type: CSS Variable
cssVariable: " astro-font " ,
// and now use it as style="font-family: var(--astro-font)"
},
] }
/> O atributo fallbackName PER ENFIG pode ser usado para configurar o nome da família da fonte de fallback (no CSS).
---
import { join } from " node:path "
---
< AstroFont
config = { [
{
name: " Afacad " ,
src: [
{
style: ' bold ' ,
weight: ' 700 ' ,
path: ' https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2 '
},
],
preload: true ,
display: " swap " ,
fallback: " sans-serif " ,
selector: " .custom_class " ,
// My Custom Fallback Font Name
fallbackName: " Afacad Override " ,
},
{
name: " Inter " ,
src: [
{
weight: ' 400 ' ,
style: ' normal ' ,
path: join ( process . cwd (), ' public ' , ' fonts ' , ' Inter-Regular.ttf ' )
}
],
preload: true ,
display: " swap " ,
fallback: " serif " ,
cssVariable: " astro-font " ,
// My Custom Fallback Font Name
fallbackName: " Inter Custom Override " ,
},
] }
/> astro-font usa as seguintes importações de nós:
node:pathnode:buffer Para garantir que ele funcione nos trabalhadores do Cloudflare, ative a bandeira node_compatibiliy por The Guide https://developers.cloudflare.com/workers/runtime-apis/nodejs/#enable-nodejs-withworkers.
Se o guia acima não funcionar, vá para o seu projeto Cloudflare> Configurações> Funções> sinalizadores de compatibilidade e adicione o sinalizador (como segue).
De acordo com os documentos do Astro + CloudFlare, você precisará modificar a configuração do Vite para permitir o nó:* importar sintaxe:
// File: astro.config.mjs
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';
// https://astro.build/config
export default defineConfig({
output: 'server',
adapter: cloudflare(),
+ vite: {
+ ssr: {
+ external: ["buffer", "path", "fs", "os", "crypto", "async_hooks"].map((i) => `node:${i}`),
+ },
+ // make sure to use node:fs, node:path, or node:os if you are using it in your project instead of fs, path or os
+ },
}); Como não há acesso aos arquivos no diretório public no contexto das páginas Cloudflare (renderização do lado do servidor), você deseja usar fontes no CDN. Para tornar a experiência do desenvolvedor indolor, use o seguinte snippet de código enquanto configura fontes locais com Cloudflare em Astro:
---
import { join } from " node:path " ;
import { AstroFont } from " astro-font " ;
const fontPrefix = import . meta . env . PROD
? Astro . site . toString ()
: join ( process . cwd (), " public " );
---
< AstroFont
config = { [
{
name: " Editorial New " ,
src: [
{
style: " italic " ,
weight: " 500 " ,
path: join (
fontPrefix ,
" fonts " ,
" PPEditorialNew-MediumItalic.woff2 "
),
},
],
preload: true ,
display: " swap " ,
selector: " body " ,
fallback: " sans-serif " ,
}
] }
/>Adoramos nossos colaboradores! Veja como você pode contribuir:
