astro font picker

Picker de fonte Astro

O Astro Font Picker é uma integração da barra de ferramentas de desenvolvimento que permite experimentar fontes diferentes no seu site. Ele usa fontes do Google para carregar mais de 1000 fontes de código aberto. Use as teclas para cima/para baixo para percorrer rapidamente as fontes diferentes ou escolha uma na lista.

Instalação

Instalação automática:

 npx astro add astro-font-picker

Instalação manual:

 npm install astro-font-picker

Adicione o seguinte ao seu arquivo astro.config.mjs :

 import astroFontPicker from 'astro-font-picker' ;

export default {
  integrations : [
    astroFontPicker ( ) ,
    // other integrations
  ] ,
} ; 

Uso

O Astro Font Picker será exibido como um novo ícone na barra de ferramentas do Dev, que é ativado por padrão no Astro 4.0 e acima.

Filtre as fontes por tipo (opcional) e escolha uma família de fontes. A fonte será aplicada ao elemento corporal do seu site.

Se você tiver famílias de fontes aplicadas a elementos inferiores ao elemento corporal, ela não substituirá essas fontes, a menos que você habilite a Override All Styles .

Dica: você pode usar as teclas de seta para cima/para baixo para percorrer rapidamente as fontes.

Habilitado

Essa alternância controla se a fonte selecionada é aplicada à página. Está ativado por padrão.

Substituir todos os estilos

Essa alternância substituirá todos os estilos font-family no seu site com a fonte selecionada. Sem isso ativado, quaisquer famílias de fontes aplicadas a elementos inferiores ao elemento corporal não serão substituídas.

A principal razão para que a Override All Styles alternem é manter o estilo de fonte de elementos ou seções específicas do seu site. Dessa forma, quando você usa o seletor de fontes para selecionar uma fonte para outras áreas, ela não substituirá as fontes que você já decidiu.

Fonte CSS Saída

Este é o link da folha de estilo e o CSS que você pode copiar e colar no seu site para instalar permanentemente a fonte. Por exemplo:

No seu elemento head :

 < link rel =" stylesheet " href =" https://fonts.googleapis.com/css2?family=Itim " />

Em seu CSS:

 h1 {
    font-family : Itim , cursive;
}

Ver no Google Fontes

Este link abrirá a fonte selecionada no Google Fontes.

As configurações são armazenadas no armazenamento de sessão

Todas as configurações (ativadas, substituídas, tipo de fonte e família de fontes) são salvas no armazenamento da sessão, para que não sejam perdidas quando a página atualiza durante o desenvolvimento.

Outro

Este projeto é baseado na Biblioteca Fontable, que é um seletor de fonte independente que pode ser usado em qualquer site.