Cómo utilizar un tipo de letra diferente en las versiones traducidas
En este artículo, aprenderá a cambiar el tipo de letra que aparece en sus versiones traducidas.
Introducción: Cuando presente su sitio web en varios idiomas, puede resultar esencial asegurarse de que la tipografía se ajusta a las normas estéticas y de legibilidad de cada idioma. El uso de fuentes diferentes para las versiones traducidas puede mejorar significativamente la experiencia del usuario y la accesibilidad. Este artículo le guiará a través del sencillo proceso de personalización de fuentes para su contenido traducido utilizando Google Fonts y Weglot.
1. Seleccione su fuente y estilo en Google Fonts
Pongamos un ejemplo con el tipo de letra "Roboto".
Al llegar a Google Fonts, puede utilizar la función de búsqueda para buscar "Roboto":
A continuación, puede seleccionar la fuente que desee pulsando sobre ella.
En la nueva pestaña, podrá ver los diferentes estilos aplicados a la fuente seleccionada:
Para tener esta fuente en su página web traducida, primero tiene que hacer clic en el botón "Obtener fuente" de la parte superior derecha:
Después, puede utilizar la opción "Obtener código de incrustación":
En esta nueva página, puede seleccionar varios estilos a través del panel de la izquierda.
En el panel de la derecha, seleccione "Web" y "@importar" en lugar de "enlace".
Copie el contenido dentro de las etiquetas "style" (sin las etiquetas en sí):
@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');
Y péguelo en su Weglot Dashboard > Ajustes > Conmutador de idioma > "Custom CSS":
Una vez hecho, puede pasar a la segunda parte.
2. Añada Custom CSS para mostrar la fuente
Vuelva al panel lateral derecho de Google Fonts y copie la regla CSS. En nuestro ejemplo, es:
font-family: 'Roboto', sans-serif;
Sólo tiene que añadir el siguiente código en su Weglot Dashboard > Configuración > Conmutador de idiomas > "Custom CSS":
html[lang="shortcode"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {font-family: "YOUR_FONT" !important;}
Sustituya "YOUR_FONT" por el tipo de letra que desee utilizar para el idioma traducido. Por ejemplo, para Roboto, sería:
html[lang="shortcode"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {font-family: 'Roboto', sans-serif !important;}
Sustituya el shortcode de idioma según su idioma traducido (consulte los shortcodes aquí: Idiomas disponibles). Por ejemplo, para cambiar la fuente para el español, utilice:
html[lang="es"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {font-family: 'Roboto', sans-serif !important;}
Por último, haga clic en "Guardar cambios" y ¡listo!
Conclusión: Personalizar los tipos de letra para las diferentes versiones lingüísticas de su sitio web es sencillo y puede repercutir sustancialmente en la experiencia del usuario. Siguiendo estos pasos, puede asegurarse de que su sitio web no sólo hable el idioma de su público, sino que también lo presente de una forma visualmente atractiva y culturalmente apropiada. Recuerde guardar sus cambios en Weglot Dashboard para ver el impacto inmediato en su sitio.