Lea este artículo para saber cómo usar las fuentes web de Adobe Typekit, Edge Web Fonts y las fuentes web locales en sus páginas web.

Nota:

Adobe Muse ya no añadirá nuevas funciones y dejará de ofrecer asistencia técnica el 26 de marzo de 2020. Para obtener información detallada y asistencia, consulte Página de fin de servicio de Adobe Muse.

Nota:

  Typekit se llama ahora Adobe Fonts y viene incluido con Creative Cloud y otras suscripciones. Más información.

Cómo utilizar fuentes de Typekit en Adobe Muse

Las fuentes web de Adobe Typekit están ahora disponibles en el menú para añadir o quitar fuentes de Adobe Muse.

Puede probar una selección limitada de fuentes de la biblioteca de Typekit con cualquier nivel del plan de Creative Cloud y, si se ha suscrito a un plan de pago, tendrá acceso a la biblioteca completa con miles de fuentes. Para obtener más información sobre los planes de suscripción de Typekit, consulte Planes locales de fuentes web de Typekit.

A diferencia de las fuentes web locales, Typekit aloja las fuentes que decide utilizar en su sitio web. Esto significa que si selecciona las fuentes de la biblioteca de Typekit y después publica su sitio en Adobe Muse, Typekit alojará automáticamente las fuentes y conectará su cuenta de Typekit con su sitio web.

Adición de fuentes de Typekit a su sitio

  1. En Adobe Muse, seleccione Archivo > Agregar/Eliminar fuentes web.

    FileAddRemoveWebFonts
  2. En el cuadro de diálogo de Agregar fuentes web, la pestaña de Typekit enumera todas las fuentes web de Typekit disponibles para su tipo de cuenta de Creative Cloud.

    AddWebFonts
  3. Busque la fuente que mejor se adapte a las necesidades de su diseño. Puede utilizar las siguientes opciones de ordenación y de filtro para seleccionar la fuente que necesite.

    • Haga clic en el botón para ordenar por fuentes destacadas, por las fuentes más recientes y por nombre .
    SortTypekitFonts
    • Haga clic en Filtro para aprovechar cualquiera de los siguientes filtros:
      • Clasificación: puede filtrar las fuentes de Typekit según sus clasificaciones, como Serif, Sans Serif, Script y así sucesivamente.
      • Recomendado para: filtrar las fuentes según las recomendaciones de Typekit para el párrafo o los encabezados.
      • Propiedades: filtrar por propiedades como grosor, anchura, altura y así sucesivamente.
    AddWebFontsFilters
  4. Una vez que encuentre la fuente que desea utilizar, simplemente haga clic en ella. Aparecerá una marca que indica que la fuente está seleccionada. Si lo desea, puede elegir varias fuentes para añadirlas a la vez. La ficha de fuentes seleccionadas muestra todas las fuentes que ha seleccionado.

    SelectedTypekitWebFonts
  5. Haga clic en OK. Aparece el cuadro de diálogo de notificación de fuentes web para confirmar que se han añadido las nuevas fuentes web. Seleccione la opción de No volver a mostrar si lo desea.

    fig_07_type
    Haga clic en OK para cerrar el mensaje de confirmación.

    Ahora, al utilizar el menú Fuentes para seleccionar la opción Fuentes web de nuevo, aparece la lista de fuentes añadidas.

    FileAddRemoveWebFonts

Aplicación de fuentes de Typekit al texto

  1. En Adobe Muse, seleccione el texto que desea aplicar a la fuente de Typekit.

    TextForEdgeWebFont
  2. Con el texto seleccionado, elija las fuentes de Typekit que desea aplicar en el menú Fuente.

    ApplyTypekitFont

Uso de Edge Web Fonts en Adobe Muse

Las fuentes web le permiten elegir entre cientos de fuentes en una gran biblioteca en línea alojada por Typekit.com. La biblioteca de fuentes web de Adobe Muse se incluye con la suscripción a Adobe Muse. No es necesario registrarse o adquirir una cuenta de Typekit para tener acceso a las fuentes y comenzar a usarlas en los diseños web.

Nota: si tiene una cuenta Typekit, verá que el conjunto de las fuentes web actualmente disponible en Adobe Muse es diferente al conjunto al que puede acceder cuando visita typekit.com. Las fuentes web que ofrece Adobe Muse son gratuitas, sin limitación, y no requieren una cuenta de Typekit. Las fuentes web que se ofrecen con una cuenta de Typekit están dosificadas y su acceso está controlado. En versiones futuras de Adobe Muse, se permitirá el acceso a la biblioteca de fuentes de Typekit desde el espacio de trabajo de Adobe Muse, pero esta función aún no está disponible.

Las ventajas de usar fuentes web son:

  • Puede elegir fuentes estilizadas y muy exclusivas para aplicar estilo al contenido de texto, aunque no tenga las fuentes instaladas en el equipo
  • Las fuentes web que se aplican al texto están vinculadas a las páginas automáticamente al publicar, exportar o previsualizar el sitio.
  • Las fuentes están alojadas por Typekit.com. Cuando los visitantes ven el sitio activo en un navegador, la fuente se descarga en segundo plano para mostrar el texto.

En el poco probable caso de que los servidores de Typekit no puedan cargar la fuente que ha aplicado dinámicamente al cargar las páginas, el contenido de texto se seguirá mostrando, usando una fuente de copia de seguridad predeterminada. Este escenario es muy poco probable, pero es bueno tener en cuenta que el contenido de texto lo podrán seguir leyendo los visitantes en cualquier caso y el sitio no mostrará un mensaje de error.

Preste atención al añadir fuentes web a su diseño. Si agrega demasiadas fuentes web, los visitantes experimentarán mayores tiempos de descarga, por lo que los sitios serían mucho más lentos, afectando en general a la experiencia del usuario. Con esto en mente, limite sus diseños y aplique 1-2 familias de fuentes con 4 estilos por familia. Dado que las fuentes web son recursos remotos (igual que las imágenes y el vídeo), se deben descargar en la caché del navegador del visitante a medida que ve las páginas de un sitio.

Otra característica es que Adobe Muse realiza un seguimiento de todas las fuentes web que se utilizan en un sitio. Si quita una fuente web que está siendo utilizada por un archivo .muse, la fuente web permanecerá en la lista del menú Fuente la próxima vez que abra el archivo .muse. Así no podrá eliminar una fuente que el sitio web necesite accidentalmente, y no será necesario realizar un seguimiento manual de las fuentes que utiliza al diseñar páginas.

Adición de fuentes Edge Web Fonts a un proyecto de Adobe Muse

Siga estos pasos para añadir una nueva fuente web:

Aparecerá una nueva ventana que muestra la biblioteca de fuentes web.

  1. Utilice la herramienta Texto para seleccionar texto en un marco de texto.

  2. Utilice el menú Fuentes (en el panel de control o en el panel Texto) para elegir Fuentes web > Añadir fuentes web...

    EdgeWebFontsLibrary
    La biblioteca de fuentes web le permite tener acceso a cientos de fuentes que se pueden aplicar a sus páginas.

    Puede hacer clic en los filtros en la parte superior de la página para seleccionar el estilo de fuente que está interesado en añadir. O utilizar el campo de búsqueda para buscar una fuente por su nombre.

  3. Una vez que encuentre la fuente que desea utilizar, simplemente haga clic en ella. Aparecerá una marca que indica que la fuente está seleccionada. Si lo desea, puede elegir varias fuentes para añadirlas a la vez.

    SelectedEdgeWebFonts
    Haga clic en las fuentes que desea añadir; una marca de verificación indica que están seleccionadas.

    Puede hacer clic en la misma línea o en el botón multi-línea cerca de la parte superior derecha para ver las fuentes que son más adecuadas para los encabezados o párrafos.

    EdgeWebFontsFilters
    Vea la lista de fuentes que funcionan bien para aplicar estilo al texto del encabezado.

    Si hace clic en el botón de casilla de verificación situado en el extremo derecho, la ventana muestra la lista de fuentes que ha seleccionado. Si cambia de idea y decide no agregar una fuente, simplemente haga clic en el nombre de la fuente nuevamente para anular la selección.

    Aparece el cuadro de diálogo de notificación de fuentes web para confirmar que se han añadido las nuevas fuentes web.

  4. Cuando termine de seleccionar las fuentes que desea añadir, haga clic en OK.

  5. Haga clic en OK.

    Si lo desea, marque la casilla No volver a mostrar.

    fig_07_type
    Haga clic en OK para cerrar el mensaje de confirmación.

    Ahora, al utilizar el menú Fuentes para seleccionar la opción Fuentes web de nuevo, aparece la lista de fuentes añadidas.

    EdgeWebFonts
    Elija Añadir fuentes web en la sección Fuentes web del menú Fuentes.

Adición y aplicación de fuentes Edge Web Fonts

  1. En Adobe Muse, seleccione el texto al que desea aplicar la fuente web de Edge.

    TextForEdgeWebFont
  2. Con el texto seleccionado, seleccione la fuente web de Edge que desea aplicar (del menú Fuente).

    ApplyEdgeWebFonts

Uso de fuentes web locales en Adobe Muse

La función de fuentes web locales permite utilizar y acceder a fuentes web que haya adquirido de proveedores de terceros. Algunas fuentes web pueden no estar disponibles en el equipo o el dispositivo de todos los visitantes. En tal caso, en función del motor de texto del navegador, se utiliza en su lugar una fuente segura para web, que afecta de manera considerable al aspecto del sitio web.

Las fuentes web se deben descargar de un servidor, como el que aloja Adobe Edge web Fonts (con tecnología de Typekit). También se puede conservar en el mismo servidor web que aloja el contenido del sitio. El enfoque de alojar y representar las fuentes web en tiempo real durante una visita al sitio se denomina alojamiento automático, y las fuentes que se obtienen de esta manera se denominan fuentes web locales.

Requisitos previos

Los siguientes tipos de fuentes son necesarios cuando se trabaja con fuentes web locales:

Fuentes del sistema

Son necesarias para diseñar la página web en Adobe Muse. Al comprar una fuente web, asegúrese de que descarga e instala las fuentes de equipo con licencia correctamente. Adobe Muse admite los siguientes formatos de fuente:

  • True Type Font (.ttf)
  • Open Type Font (.otf)
  • True Type Collections (.ttc)
  • Mac Data Fork Fonts (.dfont)
  • Mac Resource Fork TrueType Suitcases

Fuentes web

Se utilizan al representar el sitio en el navegador. Adobe Muse le exige obtener los siguientes formatos de fuentes web para representar la fuente en todos los navegadores:

  • Web Open Font Format (.woff)
  • Embedded OpenType (.eot)
  • Scalable Vector Graphics (.svg). Este formato es necesario para los dispositivos Android más antiguos.

 

Adición de fuentes web locales

  1. Seleccione Archivo > Añadir/Quitar fuentes web para que aparezca el cuadro de diálogo Añadir fuentes web.

  2. En el cuadro de diálogo Añadir fuentes web, seleccione la ficha Fuentes web locales.

    SelfHostedWebFontsDialog
  3. Busque y seleccione la carpeta que contiene la fuente o arrástrela fuente al cuadro de diálogo Añadir fuentes web. Al ubicar fuentes web, Adobe Muse mostrará el mensaje correspondiente. Si ha añadido fuentes web anteriormente, haga clic en el botón + Añadir fuentes para continuar.

    SelfHostedWebFontsFound
  4. Adobe Muse busca los archivos de fuentes web dentro de la carpeta especificada y los empareja automáticamente con su fuente de sistema correspondiente. Confirme que cuenta con las licencias pertinentes de la fuente web y haga clic en Continuar.

  5. El modo de gestión se activa automáticamente y se enumeran las fuentes web que se han añadido.

    ManageModeSelfHostedWebFonts

Gestión de fuentes web locales

El modo de gestión muestra una lista de todas las fuentes web locales recibidas con sus fuentes de equipo correspondientes. Las fuentes recién añadidas ascienden a la parte superior de la lista, así como las fuentes que tengan archivos de fuentes no disponibles o que no coincidan con fuentes de equipo.

El modo de gestión de las fuentes web locales le permite realizar las siguientes acciones:

Especificar una fuente de equipo coincidente

En ocasiones, es posible que Adobe Muse no pueda hacer coincidir una fuente web con su fuente de equipo correspondiente de manera automática. En este caso, será necesario especificar explícitamente una coincidencia para la fuente web. Para especificar una coincidencia para una fuente web, haga lo siguiente:

  1. Haga clic en el botón  para abrir un cuadro de diálogo para la fuente.

  2. Haga clic en el botón Coincidir para ver una lista de las fuentes instaladas en el sistema.

  3. Para seleccionar una fuente del sistema coincidente, desplácese por la lista o filtre por nombre. Haga clic en OK para confirmar la coincidencia.

Especificar archivos de fuentes no disponibles

Si Adobe Muse no encuentra los archivos .eot o .svg correspondientes al archivo .woff automáticamente, puede buscarlo manualmente. Para buscar un archivo de fuente no disponible, haga clic en el botón situado junto a la fuente. Haga clic en Examinar y vaya a la ubicación del archivo no disponible. Haga clic en OK para añadir el archivo no disponible.

Tareas diversas

  • Proporcionar información de licencia: haga clic en el botón  junto a la fuente que desea editar, y proporcione la información de licencia. Para terminar, haga clic en OK.
  • Eliminar fuentes: seleccione la fuente que desea eliminar y haga clic en OK.
  • Filtrar la lista de fuentes: para filtrar la lista de fuentes, escriba alguna letra de la etiqueta de la fuente o el nombre completo en el cuadro de texto del filtro.

Examinar fuentes web locales

Si ya ha añadido fuentes web locales, el modo Examinar se activa automáticamente al iniciar el cuadro de diálogo Añadir fuentes web. Este modo ofrece previsualizaciones de las miniaturas de las fuentes (agrupadas por familia) y le permite seleccionar fuentes y añadirlas a la lista desplegable Fuentes. (De forma predeterminada, todas las fuentes locales recién añadidas se añaden a la lista desplegable Fuentes, en caso de que no haya problemas, como archivos de fuentes no disponibles o fuentes sin coincidencias en el equipo). También puede filtrar las familias de fuentes por nombre o mostrar solo los elementos seleccionados. 

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea