LogoLogo
Documentação de Temas
Documentação de Temas
  • 🚀COMECE POR AQUI
    • Temas Tray
    • Entenda o Tema
    • Meu primeiro tema
  • 💻Tray CLI
    • Instalação
    • Comandos
      • Erros Retornados
    • API para integrações Tray CLI
  • 🧱Construindo seu Template
    • Twig
      • O que é o Twig
      • Como ele é utilizado nos temas
      • Possibilidades de uso
      • Documentação para consulta
    • Visão Geral
      • Estrutura do Tema
      • Arquivo de configuração
      • Extensões de arquivos
      • Codificação de Arquivos
      • Avisos e Recomendações
      • Flags
    • Editor do Tema
      • Antigo
        • Como criar um Editor
        • Settings.html
      • Novo
        • Estrutura
          • Seções
          • Ícones
          • Componentes
            • Text
            • Textarea
            • Email
            • Number
            • Color
            • Checkbox
            • Radio
            • Select
            • Toggle
            • Upload
            • Tab
            • Alert
          • Exemplo de utilização
        • Thumb preview do tema
        • Imagens padrões
        • Como desabilitar e reabilitar?
      • Settings.json
    • Desenvolver
      • Atributo Google Analytics 4
      • Como adicionar o botão comprar na listagem dos produtos
      • Como criar um carrossel de produtos
      • Como inserir um vídeo na home da loja
      • Como manipular as variações de produtos
      • Como saber se o usuário está logado
      • Descontinuação do carrinho.php
      • Exibindo as formas de pagamento de um produto
      • Informação de preço com tempo de cache menor
      • Order Bump - Produtos Relacionados
      • Páginas Institucionais
      • Página de recuperação de senha
      • Página Live Shop
      • Recursos extras
      • Personalização das paginas de carrinho e checkout
    • Core Web Vitals
      • Desempenho
        • Lazyload
        • Primeira dobra
        • Fontes
        • Definição largura e altura
        • Sprite formas de pagamentos
      • Boas Práticas
        • Origem cruzada
      • Acessibilidade
        • Atributo Lang
        • Nome discernível
        • Atributo ALT
        • Contraste
        • IDs únicos
        • ARIA Labelled By
        • Tabindex
    • Otimizar e Medir
      • Carregamento na home
      • Layout AMP
      • Utilizando PWA na loja
    • Referências
      • Objetos
        • banner
        • breadcrumb
        • category
        • categories
        • filters
        • filter_options
        • links
        • pages
        • paginate
        • paymentMethods
        • product
        • productTabs
        • products
        • productFeatured
        • seals
        • search
        • settings
        • store
        • tags
        • tray
        • themePath
        • utils
      • Funções
        • asset()
        • Brands()
        • Categories()
        • Image()
        • Products()
        • Translation()
      • Data Attributes
        • Banners
        • Cart
        • Compare
        • Filter
        • Logged User
        • Search (Suggestion)
      • Componentes
        • Adicionar ao carrinho sem sair da página
        • Banner Desconto Progressivo
        • Banner extra com contagem de cliques
        • Banner Régua
        • Banner Rotativo
        • Botão "Voltar para o topo"
        • Botões Quantidade
        • Carrinho Lateral
        • Exibir a segunda imagem ao passar o mouse
        • Filtro Inteligente
        • Link flutuante para Whatsapp
        • Menu de Categorias
        • Menu de Categorias em 3 Níveis
        • Menu de Categorias com ver mais categorias
        • Menu de Categorias com Imagens
        • Menu de Categorias com Imagens - Hover
        • Menu de Categorias com produto
        • Menu de Marcas
        • Modal de Ofertas
        • Notícias com imagem na home
        • Novo Filtro Inteligente
        • Paginação
        • Porcentagem Desconto
        • Popup de Newsletter
        • Star Ranking
        • Selos da Loja
        • Selos do produto
        • Showcase ( List / Grid )
        • Topo Flutuante
        • Tray Login
        • Whatsapp flutuante
    • APIs Disponíveis
      • Busca
      • Carrinho de Compra
      • Categorias
      • Produtos
      • Variações de Produto
  • ✔️Homologação
    • Loja de Temas Tray
    • Requerimentos
      • Exclusividade
      • Identidade única
      • Estrutura necessária
      • Funcionalidades
      • Nova Busca e Filtro inteligente
      • Selos de produtos
      • Google Lighthouse
      • Consistência e funcionalidade
      • Compatibilidade com navegadores
      • Assets
      • Otimização para buscadores (SEO)
      • Acessibilidade
      • Configurações
      • Sistema de cores
      • Imagens responsivas
      • Nomes dos temas
      • Versionamento e notas de lançamento
      • Lojas demonstrativas
      • Documentação e suporte
    • Checklist obrigatório
    • Templates
    • Homologando o tema
    • Atualizando o tema
    • FAQ
  • 📣NOVIDADES
    • Tray CLI
    • Checklist
    • Tema Draft
    • Novo Editor
Powered by GitBook
On this page
  • Introdução
  • Tipos de fontes
  • Carregamento de fontes
  • Melhores práticas

Was this helpful?

  1. Construindo seu Template
  2. Core Web Vitals
  3. Desempenho

Fontes

Introdução

Fontes são largamente utilizadas em páginas web para transmitir informações e impacto sobre o tema abordado. Uma boa fonte pode fazer a diferença entre uma página de sucesso ou fracasso.

Do mesmo como que são muito importantes para o contexto da aplicação, elas precisam de cuidados para proverem o melhor do seu potencial.

Tipos de fontes

Existe dois modos de usar fontes em páginas web: usando fontes de sistemas ou carregando fontes externas com o site.

Fontes do sistema, como o próprio nome sugere, diz respeito as fontes que já vem instaladas por padrão no sistema operacional do usuário. Essas fontes não rapidamente utilizadas pelo site, pois estão armazenadas localmente no dispositivo e não precisam ser baixadas.

Fontes externas são fornecidas pelo próprio site ou aplicação e cada vez que o usuário precisa acessar o site ele deverá realizar o download da fonte para poder ver corretamente o conteúdo.

Carregamento de fontes

O carregamento das fontes pelos navegadores não é uniforme, ou seja, cada navegador adota uma técnica padrão para fazer o carregamento das fontes. Veja a tabela abaixo:

Navegador
Comportamento padrão

Chrome

Esconde o texto por até 3 segundos. Se o texto ainda não estiver pronto, usa uma fonte do sistema até que a fonte esteja pronta e então faz a troca.

Firefox

Esconde o texto por até 3 segundos. Se o texto ainda não estiver pronto, usa uma fonte do sistema até que a fonte esteja pronta e então faz a troca.

Edge

Usa uma fonte do sistema até que a fonte esteja pronta e então faz a troca.

Safari

Oculta o texto até que a fonte esteja pronta.

Entretanto esse comportamento pode ser alterando utilizando a propriedade css font-display. Vale a pena prestar atenção nele pois ele pode impactar o LCP, FCP e a estabilidade do layout.

Uma fonte deve ser carregada usando utilizando a propriedade css @font-face, mas ela por si só não aciona o download da fonte. Para isso acontecer é necessário que que algum elemento do CSS que use ela esteja presente na página.

Melhores práticas

Entrega da fonte

Ela pode então ser carregada usado uma tag HTML link ou através da declaração @import . De preferência por usar a tag HTML link pois poderá realizar o pré carregamento dela e ter portanto uma entrega mais rápida.

Formato da fonte

Sempre que possível use o formato .woff2 para suas fontes. O formato é amplamente suportado atualmente nos navegadores modernos e por usar um algoritmo de compressão mais eficiente, é 30% menor do que o formato .woff.

Pré-carregamento da fonte

Utilizando o atributo rel="preload" é possível indicar para o navegador que ele deve pré conectar os servidor indicado e pré carregar o recurso pois ele será usado em algum momento pela página. Isso agiliza a comunicação inicial desses servidores, permitindo que a entrega do recurso seja mais rápida.

Exemplo
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" as="style" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" />

Comportamento de carregamento

Como dito acima os navegadores não carregam as fontes de maneira uniforme. Por isso devemos utilizar a propriedade font-display para normalizar esse comportamento e melhorar a experiência.

A melhor prática, e amplamente recomendada pelo Google é usar o font-display: swap, indicando que a renderização será bloqueada por um período de tempo extremamente curto e depois irá utilizar uma fonte similar até que a fonte solicitada tenha sido carregada.

Isso garante que mesmo que o usuários esteja em uma conexão lenta, o texto se mantenha visível mesmo que a fonte não tenha sido carregada, permitindo a visualização das informações.

Exemplo
<style>
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 100;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
</style>

Verificar disponibilidade local

Ao utilizar a função local() do css é possível especificar que o navegador deve verificar primeiramente verificar se o usuário já possui a fonte baixada e então usá-la, ou então baixá-la do servidor. Isso garante otimiza o carregamento dos recursos, pois uma requisição desnecessária não será disparada.

Exemplo
<style>
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 100;
      font-display: swap;
      src: local('Roboto'),
           url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
</style>

Carregamento inline

Não carregue fontes embutindo o código fonte delas diretamente na página HTML. Isso poderá gerar erros de renderização das fontes, atrasar o carregamento das páginas e inviabilizar o uso do cache do navegador para a fonte.

PreviousPrimeira dobraNextDefinição largura e altura

Last updated 3 years ago

Was this helpful?

Se estiver utilizando uma fonte externa, o melhor é usar uma CDN (Content Delivery Network) para otimizar a entrega da fonte e o carregamento pelo site. O Google disponibiliza o , acervo com dezenas de fontes gratuitas que podem ser utilizadas por qualquer aplicação.

🧱
Google Fontes