Como utilizar um tipo de letra diferente nas versões traduzidas

Neste artigo, aprenderá a alterar o tipo de letra apresentado nas suas versões traduzidas.

Introdução: Ao apresentar o seu sítio Web em várias línguas, pode ser essencial garantir que a tipografia está em conformidade com as normas estéticas e de legibilidade de cada língua. A utilização de tipos de letra diferentes para as versões traduzidas pode melhorar significativamente a experiência do utilizador e a acessibilidade. Este artigo irá guiá-lo através do processo simples de personalização de tipos de letra para o seu conteúdo traduzido utilizando o Google Fonts e o Weglot.

1. Selecione o tipo de letra e o estilo no Google Fonts

Vejamos um exemplo com o tipo de letra "Roboto".

Ao aceder ao Google Fonts, pode utilizar a funcionalidade de pesquisa para procurar "Roboto":

Em seguida, pode selecionar o tipo de letra que pretende clicando nele.

No novo separador, pode ver os diferentes estilos aplicados ao tipo de letra selecionado:

Para ter este tipo de letra no seu sítio Web traduzido, tem primeiro de clicar no botão "Obter tipo de letra" no canto superior direito:

Depois disso, pode utilizar a opção "Obter código de incorporação":

Nesta nova página, pode selecionar vários estilos através do painel à esquerda.

No painel da direita, selecione "Web" e "@import" em vez de "link".

Copie o conteúdo dentro das etiquetas "style" (sem as etiquetas propriamente ditas):

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

E cole-o no seu Weglot Dashboard > Settings > Language Switcher > "Custom CSS":

Uma vez terminado, pode passar para a segunda parte.

2. Adicionar CSS personalizado para exibir a fonte

Regresse ao painel do lado direito do Google Fonts e copie a regra CSS. No nosso exemplo, ela é:

família de caracteres: "Roboto", sans-serif;

Só precisa de adicionar o seguinte código no seu Weglot Dashboard > Settings > Language Switcher > "Custom CSS":

html[lang="shortcode"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {font-family: "YOUR_FONT" !important;}

Substitua "YOUR_FONT" pelo tipo de letra que pretende utilizar para a língua traduzida. Por exemplo, para Roboto, seria:

html[lang="shortcode"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {font-family: 'Roboto', sans-serif !important;}

Substitua o shortcode de idioma de acordo com o idioma traduzido (veja os shortcodes aqui: Idiomas disponíveis). Por exemplo, para alterar o tipo de letra para espanhol, utilize:

html[lang="es"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {font-family: 'Roboto', sans-serif !important;}

Por fim, clique em "Guardar alterações" e está tudo pronto!

Conclusão: A personalização de tipos de letra para versões linguísticas diferentes do seu sítio Web é simples e pode ter um impacto substancial na experiência do utilizador. Seguindo estes passos, pode garantir que o seu sítio Web não só fala a língua do seu público, mas também a apresenta de uma forma visualmente apelativa e culturalmente adequada. Lembre-se de guardar as suas alterações no Painel de Controlo Weglot para ver o impacto imediato no seu sítio.