{"section":"tutorials","requestedLocale":"pt","requestedSlug":"personalizando-a-tipografia-da-sua-loja","locale":"pt","slug":"personalizando-a-tipografia-da-sua-loja","path":"docs/pt/tutorials/storefront/estilos/personalizando-a-tipografia-da-sua-loja.md","branch":"main","content":"A tipografia da sua loja online é uma ferramenta para mostrar a identidade de sua marca para os seus clientes. \n\nNo Admin, você tem flexibilidade para personalizar a tipografia da sua loja de acordo com as necessidades de seu negócio.\n\n> ⚠️ Lembre-se de que as mudanças realizadas na tipografia da sua loja no **Storefront** substituem as mudanças de tipografia feitas no código da loja. Por favor, entre em contato com sua equipe de desenvolvimento e certifique-se de que essas mudanças serão definidas no Storefront ou pelo código da sua loja.\n\n## Adicionar famílias de fontes personalizadas\n\n1. No Admin VTEX, acesse **Storefront > Estilos**.\n\n2. Selecione o ícone kebab (três pontos).\n\n3. Clique em **Editar > Tipografia > Família de fontes**.\n\n4. Clique em **Adicionar fonte personalizada**.\n\n5. No campo **Família de fontes**, crie um nome para a fonte.\n\n    ![familia-de-fontes-giff-pt](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/estilos/personalizando-a-tipografia-da-sua-loja_1.gif)\n\n6. Clique em **Enviar** para fazer o upload do arquivo da fonte desejada.\n\n> ⚠️ O arquivo da família de fontes deve ter uma das seguintes extensões: *.ttf* ou *.woff*.\n\n7. Após finalizar o upload dos arquivos, escolha um estilo para as fontes. Os valores aceitos são: `Thin`, `Extra Light`, `Light`, `Regular`, `Medium`, `Bold`, `Extra Bold`, `Black`, `Thin Italic`, `Extra Light Italic`, `Light Italic`, `Regular Italic`, `Medium Italic`, `Bold Italic`, `Extra Bold Italic` e `Black Italic`.\n\n8. Clique em `Salvar`.\n\n## Configurando os tokens de tipo\n\nApós adicionar novas famílias de fontes, você pode aplicá-las ao conteúdo de texto da sua loja utilizando **Tokens de tipo**.\n\nA opção **Tokens de tipo** exibe todo o conteúdo de texto da sua loja que pode ser personalizado. Veja o que você pode personalizar usando os tokens de tipo:\n\n- **Headings (Cabeçalhos):** são os primeiros elementos que os usuários leem e dão informações da maneira mais eficiente, não usando mais do que a quantidade necessária de palavras. Há seis cabeçalhos. O 'Heading 1' (Cabeçalho 1) é o estilo de cabeçalho mais comum, e 'Heading 6' (Cabeçalho 6) é o menos comum.\n\n- **Body (Corpo):** é o estilo de texto definido para alcançar a legibilidade do parágrafo, acrescentando o espaçamento entre as linhas. Existe um tipo de corpo.\n\n- **Auxiliary small/mini (Auxiliar pequeno/mini):** são elementos secundários de uma interface, como legendas e texto em badges. Existem dois tipos de auxiliares: pequeno e mini.\n\n- **Action (Ação):** é o estilo de texto usado na ação principal da página e elementos interativos, tais como call to action (CTA), botões e abas. Existem três tipos: `Action` (Ação), `Action Small` (Ação Pequena) e `Action Large` (Ação Grande).\n\n- **Code (Código):** é o estilo de texto usado para indicar termos técnicos, tais como linguagem de programação, estimativa de envio e regras de parcelamento. \n\nSiga as instruções a seguir para configurar tokens de tipo:\n\n1. No Admin VTEX, acesse **Storefront > Estilos**.\n\n2. Selecione o ícone kebab (três pontos).\n\n3. Clique em **Editar > Tipografia > Tokens de tipo**.\n\n    ![tokens-tipo-giff-pt](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/estilos/personalizando-a-tipografia-da-sua-loja_2.gif)\n\n4. Escolha o token que você deseja personalizar como, por exemplo, **Heading 1** (Cabeçalho 1), e clique nele.\n\n5. Em seguida, personalize cada propriedade conforme a tabela abaixo:\n\n    | Propriedade | Descrição | Valores disponíveís |\n    | ----------- | --------------- | ----------------- |\n    | __Font Family__ | Define o tipo de fonte de um token de tipo. | `JosefinSans`, `Bold`, `Default` |\n    | __Font Weight__ | Define o quão grosso ou fino os caracteres do tipo token devem ser exibidos. | `Thin`, `Extra Light`, `Light`, `Normal`, `Medium`, `Semi Bold`, `Bold`, `Extra Bold`, `Black`.   |\n    | __Tamanho da fonte__ | Define o tamanho da fonte de um token de tipo. | `48px`, `36px`, `24px`, `20px`, `16px`, `14px`, `12px`, |\n    | __Transformação do texto__ | Define o uso de letras maiúsculas do token de tipo. | `Initial`, `None`, `Capitalizar`, `Caixa maiúscula`, `Caixa minúscula`, |\n    | __Espaçamento das letras__ | Define o espaço entre os caracteres em um token de tipo. | `Normal`, `Tracked`, `Tracked Tight`, `Tracked Mega`, `Zero` |\n\n6. Clique em `Salvar`."}