Marketing de contenido

Cómo cargar Adobe Fonts (Typekit) más rápido con JavaScript

Como he estado buscando mejorar el rendimiento de mi sitio, un área de preocupación es cargar las fuentes personalizadas que estoy usando a través de Adobe Fonts desde Adobe Creative Cloud (también conocido como TypeKit). Si desea cargar fuentes, hay bastantes maneras:

  • Fuentes seguras para el navegador: Al evitar el uso de fuentes personalizadas y, en su lugar, usar las fuentes predeterminadas compatibles con el navegador, puede aumentar drásticamente la velocidad de un sitio. Si bien esto puede parecer una opción, la estética general sería horrible. No es una opción realista para la mayoría de las empresas, ya que está limitado a Arial, Helvetica, Times New Roman, Georgia y Courier New.
  • Fuentes de alojamiento propio: Puede comprar una licencia para las fuentes y cargarlas en su servidor. También se puede realizar un desarrollo adicional para que se carguen más rápido... pero parece bastante trabajo.
  • Fuentes alojadas: La mayoría de los diseñadores web utilizan bibliotecas alojadas en las que puede crear un paquete de fuentes e implementar código para hacer referencia a ellas y mostrarlas en su sitio con un fragmento de código rápido. Los dos jugadores clave en este mercado son Adobe y Google Fonts. Muchos CMS Las plataformas incorporan la funcionalidad para incluir estos.

Fuentes de Adobe

Con Adobe Fonts, selecciona las fuentes que desea mostrar en su sitio y luego crea un proyecto con ellas. Un aspecto crítico aquí es cargar solo las fuentes que desea usar en su sitio y no más... cuantas más fuentes y estilos seleccione, más lento será su sitio.

proyecto de fuentes de adobe martech zone

Observe cómo el ID del proyecto (xxxxxx) se utiliza en cada uno de los ejemplos de código. Si desea utilizar este código, solo asegúrese de reemplazar el ID del proyecto con su ID del proyecto o, de lo contrario, no funcionará. Como puede ver, el script predeterminado proporcionado para cargar las fuentes es:

<link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">

Desafortunadamente, Adobe Fonts no ofrece una mejor opción para cargar sus fuentes... aunque existe. El siguiente código JavaScript heredado proporcionado por Adobe es más rápido que cargar fuentes a través de CO por algunas razones:

  1. El código JavaScript utiliza asincrónico loading, lo que significa que el navegador puede continuar cargando la página mientras se recupera el script. Por el contrario, cuando carga fuentes a través de CSS, el navegador debe esperar a que se descargue y analice el archivo CSS antes de que pueda comenzar a cargar las fuentes. Esto puede provocar un retraso en la carga de fuentes y tiempos de carga de página más lentos.
  2. El código JavaScript utiliza el Cargador de fuentes web Typekit, que proporciona funcionalidad adicional para cargar fuentes. Por ejemplo, el cargador de fuentes web puede detectar si el navegador admite la @font-face regla y puede evitar cargar fuentes innecesariamente en navegadores que no soportan
    @font-face. También puede proporcionar un mejor rendimiento de carga de fuentes y una mejor representación de fuentes.
  3. El método CSS requiere un adicional HTTP solicitud para obtener el archivo CSS, mientras que el código JavaScript es autónomo y no requiere ningún archivo adicional para ser buscado Esto puede resultar en tiempos de carga ligeramente más rápidos para el código JavaScript.

En general, usar este método de JavaScript heredado para cargar fuentes Typekit puede resultar en una carga de fuentes más rápida y confiable que usar el método CSS.

<script src="//use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

Si está ejecutando un sitio de WordPress, también puede actualizar su archivo functions.php para cargar su proyecto:

add_action( 'wp_head', 'theme_typekit_inline' );
function theme_typekit() {
	wp_enqueue_script( 'theme_typekit', '//use.typekit.net/xxxxxx.js', '', false);
}
add_action( 'wp_enqueue_scripts', 'theme_typekit' );

function theme_typekit_inline() {
  if ( wp_script_is( 'theme_typekit', 'done' ) ) { ?>
	<script>try{Typekit.load({ async: true });}catch(e){}</script>
  <?php }
}

Cada poquito cuenta cuando intentas mejorar la velocidad de tu sitio. Adobe Fonts no es un servicio muy rápido, por lo que ayudar a ahorrar algo de tiempo con cada carga de página puede marcar la diferencia.

Douglas Karr

Douglas Karr es CMO de AbrirINSIGHTS y el fundador de la Martech Zone. Douglas ha ayudado a docenas de nuevas empresas exitosas de MarTech, ha colaborado en la diligencia debida de más de $5 mil millones en adquisiciones e inversiones de Martech y continúa ayudando a las empresas a implementar y automatizar sus estrategias de ventas y marketing. Douglas es un orador y experto en transformación digital y MarTech reconocido internacionalmente. Douglas también es autor de una guía para principiantes y de un libro sobre liderazgo empresarial.

Artículos Relacionados

Volver al botón superior
Cerrar

Adblock detectado

Martech Zone puede proporcionarle este contenido sin costo porque monetizamos nuestro sitio a través de ingresos publicitarios, enlaces de afiliados y patrocinios. Le agradeceríamos que elimine su bloqueador de anuncios mientras visita nuestro sitio.