nextjs tailwind googlefonts selfhost starter
1.0.0
Tipografia pode fazer seus aplicativos Zing !!!
A adição de fontes do Google permite que você use fontes personalizadas em seus aplicativos. Eles são anunciados como gratuitos e há mais de 900 famílias de fontes para escolher. Desde 2018, o Google recomendou a auto-hospedagem como uma maneira de adicionar suas fontes.
Há um número de fontes seguras da Web , que são gratuitas e incorporadas em várias plataformas. No entanto, às vezes precisamos de algo mais personalizado, para servir nossos fins de design.
Então "sem muito mais um" ...
Este repo tem como alvo especificamente a auto-hospedagem das fontes do Google, em vez de usar um link para o seu CDN e como integrá-las em um aplicativo Next.js que usa CSS do Tailwind.
Há um número de prós e contras para a auto-hospedagem, que foram discutidos em muitos artigos e blogs, não vou detalhá-los aqui. Eu forneci alguns links no final deste arquivo ReadMe, para leitura adicional.
As fontes do Google são anunciadas como código aberto e gratuitas para usar ...
Mas não aceite minha palavra para isso, (eu não sou leigo e isso não é um conselho legal)
Todas as fontes usadas neste exemplo são provenientes do Google Fonts sob a licença de fonte Sil Open (OFL) v1.1. Tomei cuidado para incorporar as licenças nas pastas de auto-hospedagem dentro do repositório, que é solicitado na OFL.
Nota: você deve sempre ler as informações da licença da fonte, pois é responsável por segui -las. Neste momento, o Google Fontes Uso OFL v1.1, alguns usam a licença Apache 2. As fontes do Ubuntu usam a licença de fonte do Ubuntu v1.0
Você deve procurar aconselhamento jurídico antes de auto-hospedar ou usar quaisquer fontes personalizadas.
Veja a demonstração do código aqui
Você pode se apossar das fontes do Google de várias maneiras (esta não é uma lista de exaustivo), usando as seguintes ferramentas:
As fontes também podem ser encontradas no Googles Github Repo.
Uma vez, você os baixou, pode adicioná-los ao seu projeto ao auto-hospedeiro.
A maneira mais fácil de hospedá -los está sob uma pasta public , em uma sub -pasta chamada fonts .
Eu estruturei os locais dos recursos da fonte da seguinte forma, você não precisa seguir isso, demonstra flexibilidade e que todas as fontes podem ser organizadas em vez de apenas ser colocadas sob a sub -pasta
fonts.
├── public
| └── fonts
| └── google
│ ├── font(s) by name
│ │ │ ├── .woff / .ttf (etc)
│ │ │ ├── .css
│ │ │ ├── licence.txt
├── styles
| └── global.css (app-base.css)
├── .gitignore
├── jsconfig.json
├── postcss.config.js
├── tailwind.config.js
As fontes serão servidores deste local para o nosso aplicativo Next.js.
Depois que baixamos os arquivos de fontes, licenças, folhas de estilo etc. e estruturamos as pastas, precisamos executar o carregamento da fonte.
Podemos usar @font-face para carregar as fontes. Consulte os arquivos CSS colocados ao lado dos recursos da fonte na pasta de font acima.
Podemos eventualmente importá -los para o arquivo CSS Styles CSS. Normalmente, isso é chamado global.css , estou usando 3 arquivos importados para o arquivo next.js _app.js.
Por exemplo:
@font-face {
font-family : 'Oswald Variable' ; /*Ive added a prefix to let me know its a variable font*/
font-style : normal;
font-weight : 200 700 ;
src : local ( 'Oswald' ) ,
url (/fonts/google/oswald/Oswald-VariableFont_wght.ttf) format ( 'truetype' );
font-display : swap;
} Em seguida, realizamos algumas pequenas otimizações para o carregamento (s) de fontes usando o atributo font-display .
Ao usar @font-face em combinação com atributos font-display podemos evitar o FOUT e o FOIT.
Existem várias estratégias disponíveis para implementar isso:
| Estratégia | Descrição |
|---|---|
1. block | Não renderize nada ao usuário até que as fontes sejam carregadas. |
2. swap | Recomendado para fontes do Google. Ele trocará quando a fonte for carregada. |
3. fallback | não recomendado. Ele ainda mostra texto invisível como o bloco por um curto período de tempo, mas acabará por falar em uma fonte segura. |
4. optional | Uma boa escolha quando a fonte não é importante, mais foco na marca e no conteúdo. É como fallback lento conectado que pode nem carregar uma fonte. |
Esta é uma nova regra que você pode adicionar à sua declaração de face da fonte que diz ao navegador para usar as fontes seguras do sistema de fallback que você listou (por exemplo, sem serif) e depois troque a fonte desejada quando for baixada.
É uma boa melhoria de desempenho, pois exibe conteúdo sem esperar que o downloads termine.
font-display: swap; tem a desvantagem de piscar este texto sem seleção se a fonte ainda não tiver carregada. Mas podemos remediar isso com a pré -carga.
Podemos pré -carregar nossas fontes no <head> do nosso aplicativo de página. Isso é especialmente útil para aqueles bits críticos de tipografia que queremos exibir sem piscar.
TODO, podemos adicionar <preload> à cabeça de nossas páginas.
Em Next.js, adicionamos -o ao _document.js personalizado da seguinte forma:
< Head >
< link
rel =" preload "
href =" /fonts/google/grandstander/Grandstander-VariableFont_wght.ttf "
as =" font "
type =" font/ttf "
crossOrigin =" anonymous "
/>
</ Head > NOTA: Tenha cuidado ao usar a pré -carga, pois pode ter um efeito negativo, se usado demais. Então, nós o usamos com sabedoria. É uma maneira de definir a importância de um recurso, também podemos fazer o mesmo com nossos recursos script , se necessário.
Em seguida, criamos um arquivo Fonts.css sob a pasta publicfonts . É aqui que importamos os vários arquivos do CCS para os recursos do Google Font carregados usando @font-face acima, ou seja,
@import './google/oswald/Oswald-Variable.css' ;Isso é então importado para o arquivo de estilo de vento de cauda abaixo.
Em seguida, adicionamos o seguinte ao arquivo app-base.css na pasta ./styles .
Utilizamos a diretiva @layer para dizer ao Tailwind qual "balde" estamos adicionando os estilos de fonte também.
Diretivas de camada válidas são uma base, componentes e utilitários.
Por exemplo:
@layer base {
@import "../public/fonts/fonts.css";
}
Em seguida, importamos os estilos para o arquivo _app.js :
import '@/styles/app-base.css';
import '@/styles/app-components.css';
import '@/styles/app-utilities.css';
Por fim, configuramos o arquivo tailwind.config.js para adicionar as famílias de fontes ao nosso aplicativo. Nós os adicionamos aos temas da fonte base ou estendemos os temas (ou ambos).
Por exemplo:
const { fontFamily } = require('tailwindcss/defaultTheme');
module.exports = {
fontFamily: {
sans: ['Oswald Variable, Arial', fontFamily.serif],
serif: ['Merriweather Sans, Georgia', fontFamily.serif],
},
extend: {
fontFamily: {
'Grandstander-VariableFont': ['Grandstander Variable'],
},
},
},
;
É isso. Terminamos, consulte o código para obter mais detalhes.
Obrigado pela leitura. ? ?
Por favor, me estrela, se você achou isso útil.
Aqui segue -se, mais informações para aqueles que podem achar úteis. ?
Lembre -se de que você pode usar o Lighthouse para testar o desempenho da sua página, isso também procurará otimações de fontes e scripts e incluir recomendações, incluindo problemas de FOUT e FOIT.
Uma vez construído, tenho o prazer de dizer que essa demonstração fica o seguinte ao executar localmente.
Os principais motivos pelos quais escolho auto -host são os seguintes:
| 1. O Google recomenda | Agora é recomendado pelo próprio Google. Desde 2018, o Google recomendou a auto -hospedagem, para o desempenho ideal por meio da pré -carga. A auto-hospedagem é gratuita e é incentivada, consulte este vídeo: desenvolvedores do Google Chrome: o desempenho da web facilitado. |
| 2. Melhor para privacidade | CDNs de terceiros podem usar cookies e algoritmos de rastreamento que você não conhece necessariamente. Isso pode ser um problema nos países onde você precisa de consentimento do usuário (ou seja, privacidade de dados e GDPR, consulte: Compliance GDPR do Google Fontes. |
| 3. Melhor para segurança | mais controle em seu próprio servidor). Na verdade, você chama pelo menos 2 domínios ao usar o CDN. |
| 4 . | O Google Fontes adiciona recursos que você pode não precisar. Você pode escolher estilos de fontes, etc., e um pacote e minimizar suas próprias regras/arquivos CSS relacionados a fontes, fornecendo menos solicitações HTTP. Você pode fazer isso atendendo a fontes e unicodos específicos necessários para a tipografia de seus sites. Partes específicas das famílias de fontes, em vez de famílias inteiras. Você pode escolher estilos de fontes, etc., e um pacote e minimizar suas próprias regras/arquivos CSS relacionados a fontes, fornecendo menos solicitações HTTP. |
| 5. Disponibilidade offline | Para aplicativos móveis e de desktop que são acessados offline. |
Experimente isso por si mesmo.
Eu encorajo você a testar com seu site/aplicativo específico e usar as ferramentas de desenvolvimento combinadas com "desativar o cache" e a capacidade interna de alterar as velocidades de conexão.
Não cobri o uso de npm packages para adicionar fontes. Existem vários sabores disponíveis on -line, se essa for sua preferência.
Algumas alternativas são tentar usar o FontSource ou o próximo Google-fontes .
