Las fuentes web son tipos de letra que no están instalados en el sistema operativo del usuario, sino que están alojados en la web y son descargados por el navegador para su uso. Estos le ofrecen la flexibilidad de usar cualquier fuente que elija, siempre que las proporcione como archivos de fuente (ya sea una URL o una ruta de archivo). Estas fuentes suelen tener licencia, lo que significa que un cliente tendrá que comprar el derecho a utilizar las fuentes en su sitio.

Hay dos tipos de fuentes que puede agregar a Search:

1. Fuentes alojadas por un proveedor de servicios de fuentes, como Google Fonts y Adobe Fonts, que son gratuitas y no requieren una licencia.
   1. Recibirá un fragmento de código de su proveedor de alojamiento que incluirá tanto los recursos de fuente como las declaraciones de tipo de fuente. Esto tendrá la forma de una hoja de estilo, referenciada como se muestra a continuación, con el href siendo el componente que hace referencia a las fuentes externas.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&display=swap">

2. Fuentes autoalojadas : normalmente, sus fuentes propietarias, si procede.
   1. Estos son archivos de fuentes que sube a Search.
   2. Los tipos de formato aceptados son:
      • WOFF (Formato Abierto de Fuentes Web)
        • Se recomienda su uso porque están comprimidos para una mejor entrega en conexiones a Internet deficientes y, en general, son compatibles con la mayoría de los tipos de navegadores.
      • WOFF2
      • TTF (TrueType)
      • OTF (OpenType)
      • EOT (OpenType incrustado)
      • SVG (Gráficos vectoriales escalables)

Para agregar fuentes web a su sitio:

1. Haga clic en Pages en la barra de navegación y luego en el sitio deseado.
2. Haga clic en el botón Ver editor de código.
3. Sitúe el cursor sobre la rama principal y haga clic en el icono del lápiz () que aparece.
4. Añada las fuentes a su editor de código. Este proceso varía dependiendo de cómo se alojen las fuentes. Siga los pasos según corresponda:
   • Fuentes alojadas por un proveedor de servicios tipográficos
     1. Haga clic en la carpeta layouts.
     2. Haga clic en el archivo headincludes.hbs.
     3. Añada al archivo los scripts de fuente que desee.
   • Fuentes alojadas en servidores propios
     1. Haga clic en la carpeta static.
     2. Haga clic en la carpeta assets.
     3. Pase el ratón por encima de la carpeta fonts, haga clic en los tres puntos (...) que aparecen y haga clic en Añadir archivo en el menú desplegable. Aparecerá un cuadro de diálogo.
     4. Seleccione Subir archivo existente en el menú desplegable.
     5. Haga clic en Elegir archivo y seleccione el archivo de su ordenador. A continuación, haga clic en Añadir archivo.
        • Si tiene más de un archivo que desea agregar, repita los pasos c a e. Tenga en cuenta que necesitará subir un archivo para cada variación de fuente (p. ej., regular, negrita y cursiva).
     6. Haga clic en la carpeta scss bajo la carpeta static.
     7. Haga clic en el archivo fonts.scss.
     8. Añada las declaraciones de font-face deseadas en la parte superior del archivo.
        • Tendrá que añadir una declaración de tipo de letra para cada variación o archivo que suba; en este caso, normal, negrita y cursiva.
        • El src se refiere a la ruta de acceso al archivo o archivos que acaba de subir a su carpeta fonts.

@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-regular-webfont.woff') format("woff");
  font-weight: $font-weight-normal;
  font-style: normal;
}
@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-bold-webfont.woff') format("woff");
  font-weight: $font-weight-bold;
  font-style: normal;
}
@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-italic-webfont.woff') format("woff");
  font-weight: $font-weight-normal;
  font-style: italic;
}

5. Aplique su nueva fuente a su experiencia de Search. Consulte el artículo de ayuda Cambiar fuentes en el tema de front-end de Search para obtener más información.