El uso de diferentes Fuentes en un sitio web ayuda a crear un dise o nico y atractivo. Sin embargo, no siempre hay muchas Fuentes disponibles en la computadora del usuario, por lo que muchos desarrolladores web recurren al uso de Fuentes de Google Fonts. Es un Servicio gratuito que ofrece una amplia selecci n de Fuentes de calidad que se pueden conectar al sitio. En este art culo, veremos instrucciones paso a paso sobre c mo conectar Google Fonts a Tilda.
Paso 1. Vaya al sitio web oficial de Google Fonts y elija la fuente adecuada para su proyecto. Puede usar la barra de b squeda o navegar por varias colecciones de Fuentes. Despu s de seleccionar una fuente, haga clic en el bot n "Seleccionar esta fuente" situado en la esquina superior derecha. Despu s de eso, haga clic en el icono de la papelera para abrir una ventana con el c digo de conexi n.
Paso 2. En la ventana que se abre, ver dos pesta as: "P gina" e "Importaci n". Si desea descargar todos los estilos de fuente a la vez, seleccione la pesta a P gina. Si solo desea descargar algunos estilos de fuente, seleccione la pesta a Importar. Se le pedir que seleccione los estilos de fuente que desea descargar. Una vez seleccionado, haga clic en el bot n "Copiar" en la parte inferior de la ventana.
Paso 3. Vuelve a la plataforma Tilda y entra en el proyecto correcto. Abra el Editor de la p gina en la que desea usar la nueva fuente. Haga clic en el bloque deseado y seleccione la herramienta configuraci n de texto ubicada en la barra de herramientas superior. En la ventana que se abre, vaya a la pesta a "Dise o" y haga clic en el bot n "estilos CSS Avanzados".
Paso 4. En la ventana que se abre en
- Crear un proyecto en Tilda
- Selecci n de Fuentes en Google Fonts
- Obtener el c digo de fuente
- Insertar c digo en la configuraci n de Tilda
- Aplicar la fuente al texto en Tilda
- Comprobaci n de la visualizaci n de la fuente en el sitio
- Mejoras de dise o con Google Fonts
Crear un proyecto en Tilda
1. Vaya al sitio web de Tilda (https://tilda.cc/) y haga clic en el bot n "Comenzar".
2. Reg strese usando su cuenta de Google o correo electr nico.
3. Despu s de registrarse, inicie sesi n en su cuenta de Tilda.
4. Haga clic en el bot n "Crear proyecto" y seleccione la plantilla que m s se adapte a su proyecto.
5. Escriba un nombre para el proyecto y haga clic en el bot n Crear.
6. Ahora est s en el Editor de Tilda. Aqu puede crear y editar las p ginas de su proyecto.
7. Para crear una nueva p gina, haga clic en el bot n "Agregar p gina" en el men de la izquierda y seleccione el tipo de p gina (sitio de una p gina o sitio de varias p ginas).
8. Agregue contenido a su p gina utilizando las herramientas de Tilda. Puede agregar texto, fotos, videos, formularios y otros elementos.
9. Si es necesario, puede personalizar la configuraci n de la p gina, como el t tulo, las etiquetas meta, la imagen de fondo y m s.
10. Una vez finalizado, haga clic en el bot n Publicar en el men superior y seleccione un dominio para su proyecto (es posible que deba registrar su propio dominio).
11. Haga clic en el bot n Publicar y su proyecto estar disponible en l nea utilizando el dominio seleccionado.
Ahora tienes un proyecto listo en Tilda! Puede agregar Fuentes de Google Fonts siguiendo las instrucciones en la secci n correspondiente.
Selecci n de Fuentes en Google Fonts
Google Fonts ofrece una amplia selecci n de Fuentes para usar en sitios web. Para encontrar la fuente adecuada para su proyecto, deber seguir estos pasos::
1. Visite el sitio web de Google Fonts, abra la biblioteca de Fuentes en https://fonts.google.com/. |
2. Recorra las Fuentes en la colecci n y elija la que se adapte a su proyecto. Puede navegar a trav s de diferentes estilos y opciones de fuente, abrir la p gina de fuente para obtener m s informaci n o agregarla a su colecci n. |
3. Si ha encontrado una fuente adecuada, haga clic en el bot n "Seleccionar esta fuente". |
4. En la p gina de fuente seleccionada, seleccione estilos y configuraciones, como el peso de la fuente y subconjuntos de caracteres. |
5. Una vez que haya configurado la fuente, haga clic en el bot n "Descargar" o "Insertar c digo web" para obtener el c digo necesario para conectar la fuente seleccionada a su sitio web. |
Despu s de seguir estos pasos, estar listo para conectar la fuente seleccionada a su sitio web en la plataforma Tilda.
Obtener el c digo de fuente
Antes de conectar Google Fonts a Tilda, debe obtener el c digo de fuente correspondiente. Para ello, siga estos pasos::
1. Vaya al sitio web de Google Fonts en https://fonts.google.com/.
2. En la p gina de Inicio, ver muchas Fuentes disponibles. Seleccione la fuente que desee haciendo clic en ella.
3. Despu s de seleccionar una fuente, ver varias opciones para esta fuente: normal( Regular), cursiva (Italic), negrita (Bold), etc. Seleccione la opci n que desee haciendo clic en el icono correspondiente. Tambi n puede elegir varias opciones de fuente para diferentes estilos de texto en su sitio.
4. Despu s de seleccionar las opciones de fuente que desea, haga clic en el icono "+ Select this style".
5. La fuente que elija se agregar a la" Papelera " (bot n en la esquina inferior derecha del sitio). Haga clic en este bot n para abrir la papelera de Reciclaje.
6. En la Papelera de reciclaje, ver todas las Fuentes que haya seleccionado y podr configurar opciones adicionales para cada una, como el Tama o de fuente, el color y la presencia de caracteres especiales.
7. Despu s de configurar todas las opciones, haga clic en el bot n "Incrustar" en la esquina superior derecha del acceso directo de la papelera de reciclaje.
8. En la ventana que se abre, seleccione la pesta a "est ndar" para obtener el c digo est ndar para conectar la fuente.
9. Copie el c digo proporcionado, se ver algo como esto:
Ahora tiene un c digo de fuente que puede usar para conectarlo a Tilda.
Insertar c digo en la configuraci n de Tilda
Para conectar Google Fonts a Tilda, debe insertar un c digo especial en la configuraci n de su proyecto en la plataforma.
- Oficio:
- Vaya a la configuraci n de su proyecto en Tilda.
- Haga clic en la pesta a Dise o.
- Busque la secci n Etiquetas Y Scripts y seleccione la pesta a etiquetas meta Generales.
Haga clic en el bot n "Agregar c digo" y pegue el siguiente c digo:
En lugar de "NOMBRE+FUENTE", inserte el nombre de la fuente que desea usar, y en lugar de "peso de la FUENTE", seleccione el peso de la fuente (100, 200, 300, etc.).
Ejemplo:
Despu s de pegar el c digo, haga clic en el bot n Guardar o Publicar cambios para aplicar los cambios.
Ahora Google Fonts debe conectarse con xito a su proyecto en Tilda.
Aplicar la fuente al texto en Tilda
Una vez que haya conectado la fuente seleccionada de Google Fonts a su sitio en Tilda, puede aplicar f cilmente esa fuente al texto de la p gina.
Aqu es c mo hacerlo:
1. Abra el elemento en el que desea cambiar la fuente (puede ser un t tulo, texto sin formato, p rrafo o cualquier otro elemento).
2. Seleccione el texto que desea cambiar en la fuente.
3. En la barra de herramientas superior de Tilda, seleccione la opci n "Fuentes "(icono en forma de letra"A").
4. En la ventana que se abre, seleccione la fuente deseada de la lista de Fuentes disponibles. Si ha conectado una fuente de Google Fonts, deber a aparecer en esta lista.
5. Despu s de seleccionar una fuente, tambi n puede ajustar su Tama o, color, negrita y otros par metros en las secciones correspondientes de la ventana.
6. Haga clic en el bot n Aplicar para guardar los cambios.
Ahora la fuente seleccionada se aplicar al texto seleccionado en su p gina en Tilda. Puede repetir esta operaci n para otros elementos y textos de la p gina para crear un estilo y una apariencia uniformes.
Comprobaci n de la visualizaci n de la fuente en el sitio
Despu s de conectar la fuente de Google Fonts a su sitio en Tilda, debe verificar que la fuente se muestre correctamente.
- Para hacerlo, siga estos pasos::
- Abra la p gina de su sitio web en la que aplic la nueva fuente.
- Aseg rese de que la p gina est completamente cargada y visible.
- Despl cese por la p gina y verifique todos los elementos de texto para la nueva fuente.
- Aseg rese de que la nueva fuente se aplique a los encabezados, p rrafos y otros elementos de texto.
- Tenga en cuenta las dimensiones, la altura y la distancia entre los s mbolos. Deben ser como se especifica en la fuente.
Compruebe si hay distorsiones u otros problemas con la visualizaci n de la fuente.
Nota: Si la fuente no se muestra correctamente o no se aplica al texto, vuelva a las instrucciones para conectar la fuente de Google Fonts y verifique todos los pasos.
Si todos los pasos anteriores se realizan correctamente y los problemas de visualizaci n de la fuente persisten, es posible que el problema est relacionado con su navegador o dispositivo. Intente comprobar si la fuente se muestra en otro dispositivo o en otro navegador.
Despu s de asegurarse de que la fuente se muestra correctamente, puede estar seguro de que se ha conectado correctamente a su sitio en Tilda.
Mejoras de dise o con Google Fonts
Google Fonts ofrece una gran selecci n de Fuentes que se pueden utilizar para mejorar el dise o de su sitio web. Google Fonts le permite agregar singularidad y personalidad a su contenido, crear hermosos t tulos, banners y bloques de texto.
- Para aprovechar las Fuentes de Google Fonts en su sitio web, es importante seguir unos sencillos pasos:
- Vaya al sitio web oficial de Google Fonts en https://fonts.google.com/.
- Elija la fuente que le interesa, rev sela en varias opciones.
- Haga clic en el bot n "seleccionar esta fuente" junto a la fuente seleccionada.
- En la ventana que se abre, copie el c digo que desea pegar en su sitio.
- Regrese al Editor de Tilda y abra la p gina en la que desea usar la fuente seleccionada.
- Vaya a la configuraci n de esta p gina y busque la secci n Configuraci n de estilo CSS.
- Pegue el c digo copiado en el campo CSS Personalizado y guarde los cambios.
Ahora, la fuente seleccionada se aplicar a todos los elementos con la clase CSS dada en su p gina.
Es importante tener en cuenta que para cambiar el estilo del texto y aplicar la fuente seleccionada a un elemento espec fico de la p gina, es necesario el conocimiento de CSS. Si no est familiarizado con CSS, es una buena idea consultar a un especialista o usar las opciones de fuente prefabricadas que ofrece Tilda.