Seleccionar fuentes

El selector de fuentes de la herramienta de texto le ofrece una lista de fuentes comunes para que pueda seleccionar la que prefiera. También puede añadir fuentes web de Google Fonts.

1. Seleccione la herramienta de texto , situada en la barra de herramientas, o abra el panel Texto.
2. En la barra de opciones de la herramienta o en el panel Texto, haga clic en el nombre de la fuente. Se abrirá el menú de fuentes.

   

3. Elija una fuente.

Puede elegir la fuente primero y luego escribir el texto, o bien seleccionar el texto que ha escrito y, a continuación, cambiar la fuente.

Añadir fuentes de Google Fonts

Además de las fuentes comunes integradas en Google Web Designer, puede usar cientos de fuentes gratuitas de software libre que están disponibles en Google Fonts.

Para añadir fuentes del catálogo de Google Fonts:

1. Seleccione la herramienta de texto , situada en la barra de herramientas, o abra el panel Texto.
2. En la barra de opciones de la herramienta o en el panel Texto, haga clic en el nombre de la fuente. Se abrirá el menú de fuentes.
3. En la parte inferior del menú de fuentes, haga clic en Más fuentes…. Se empezará a cargar el catálogo de Google Fonts. Para cargar más fuentes, desplácese hasta el final de la lista.
4. Busque la fuente que quiera introduciendo su nombre en el campo de búsqueda  y pulsando Intro, o bien utilice los filtros para acotar las opciones.
5. Seleccione las fuentes que quiera usar. Se mostrarán en la lista Fuentes añadidas que aparece a la derecha.

   

6. A continuación, haga clic en Aceptar. Las fuentes que haya añadido estarán disponibles en el menú de fuentes del documento en cuestión.

Usar otras fuentes

Por ahora solo es posible añadir fuentes de Google Fonts al menú desplegable de fuentes, pero puede utilizar fuentes personalizadas si tiene los archivos de fuentes.

1. Añada el archivo de fuentes a la subcarpeta assets del proyecto en el sistema de archivos de su ordenador.
   • Si utiliza Studio, puede subir fuentes personalizadas a la biblioteca de recursos de esta herramienta.
   • Incluya distintos formatos de fuente para tener más opciones compatibles con el navegador.
2. Vaya a Vista de código y añada el código CSS siguiente (con los datos de su fuente) antes de la etiqueta de cierre :

   @font-face {
     font-family: "My Font Name";
     src: url("assets/myfontname.ttf") format("truetype");
   }

3. Para utilizar la fuente, introduzca su nombre (tal como lo ha escrito en la línea font-family) en el campo Nombre de la fuente al dar formato al texto.