Cómo incrustar fuentes web en su sitio con Typekit

Autor: Peter Berry
Fecha De Creación: 14 Mes De Julio 2021
Fecha De Actualización: 6 Mayo 2024
Anonim
Cómo incrustar fuentes web en su sitio con Typekit - Creativo
Cómo incrustar fuentes web en su sitio con Typekit - Creativo

Contenido

Para un diseñador profesional, no hay comparación con el uso de los tipos de letra diseñados por expertos que se encuentran en Typekit. Tiene acceso al más alto calibre de fuentes web de fundiciones como Adobe, FontFont, P22, Typodermic y Veer y, por supuesto, está estrechamente integrado en su flujo de trabajo de Creative Cloud. A continuación, le indicamos cómo comenzar en nueve sencillos pasos.

01. Iniciar sesión

Si está suscrito a Creative Cloud, ya tiene una suscripción a Typekit en el nivel del plan Portfolio. Simplemente visite www.typekit.com e inicie sesión con el ID de Adobe que utiliza para iniciar sesión en Creative Cloud. Luego, puede comenzar a acceder al servicio y usar fuentes web.

02. Navegar por la biblioteca


La biblioteca de Typekit incluye casi mil fuentes diferentes, cada una categorizada según sus características, uso y peso. Eche un vistazo rápido para ver la selección completa de fuentes disponibles. Una vez que esté listo para comenzar a seleccionar fuentes para su sitio, continúe con el siguiente paso.

03. Crea un nuevo kit

Haga clic en el menú desplegable en la parte superior derecha de la página y elija el botón Agregar nuevo kit para crear un kit que funcionará en el nombre de dominio elegido. A continuación, ingrese los detalles del dominio que va a utilizar y haga clic en el botón Continuar para generar el kit.

04. Instale JavaScript

Typekit proporciona dos líneas de JavaScript que deben instalarse en cada página de su sitio web que utilizará fuentes web. Agregue estos en la sección head> de su página, en lugar de dentro del área body> - el JavaScript debe cargarse lo antes posible en la carga de la página.


05. Seleccione una fuente

Una vez que haya elegido una fuente que le gustaría usar en su sitio web, coloque el cursor sobre la vista previa para ver las diferentes formas en que puede usar su selección. Algunas fuentes también están disponibles para uso de escritorio una vez que se haya registrado en la versión beta. Haga clic en el enlace Usar fuentes para continuar.

06. Añade a tu kit

En el cuadro de diálogo modal emergente, elija el kit al que le gustaría agregar la fuente. También puede marcar la casilla de verificación para enviar fuentes compatibles a su escritorio para usarlas en InDesign, Photoshop e Illustrator, así como en otras aplicaciones de escritorio. La elección de un kit existente abrirá una nueva ventana.

07. Elija un subconjunto


Cuando usa una fuente en la web, está enviando el contenido de esa fuente a cada visitante del sitio web. Esto puede volverse bastante pesado si tienes el conjunto completo de pesos y personajes. Typekit le permite elegir un subconjunto de pesos y caracteres, reduciendo la descarga para cada usuario.

08. Agregue clases y pilas de fuentes

De forma predeterminada, Typekit lo configurará con un nombre de clase CSS que puede aplicar a los elementos para que representen el tipo en la fuente elegida. Puede agregar sus propias clases usando el campo en la esquina superior izquierda del editor del kit. También puede especificar fuentes de respaldo en la pila de fuentes CSS completando el formulario en la parte inferior izquierda.

09. Publicar y listo

Una vez que esté satisfecho y haya agregado cualquier tipo de letra adicional que le gustaría usar en su sitio web, haga clic en el botón Publicar para enviar su kit a la web para su uso. Su kit puede tardar un par de minutos en estar disponible, después de lo cual verá su sitio mostrando un texto atractivo con tecnología Typekit.

Este artículo se publicó originalmente en The Ultimate Guide To Adobe Creative Cloud.

Ahora lee estos:

  • Los diseñadores hablan sobre Creative Cloud de Adobe
  • Nuevas herramientas en Adobe Creative Cloud: 12 videos reveladores
  • Acciones gratuitas de Photoshop para crear efectos sorprendentes
Popular En El Portal
Cómo desbloquear Surface Pro 4 sin contraseña
Lee Mas

Cómo desbloquear Surface Pro 4 sin contraseña

Microoft urface Pro 4 ofrece mucha funcione y e ha convertido en el verdadero reemplazo para lo uuario de portátile tradicionale. in embargo, problema como olvidar la contraeña para el acceo...
Cómo abrir la política de grupo de Windows 10 paso a paso
Lee Mas

Cómo abrir la política de grupo de Windows 10 paso a paso

La política de grupo e una caracterítica muy útil del itema operativo Window que permite a lo uuario cambiar la configuración avanzada de u equipo. Lo utilizan principalmente lo ad...
¿Cómo usar notas adhesivas en Windows 10?
Lee Mas

¿Cómo usar notas adhesivas en Windows 10?

¿abe qué e exactamente una nota adheiva? Nota adheiva e una aplicación principalmente para fine de utilidad diponible con Microoft Window 7 y verione anteriore. e utiliza para crear una...