16 de julio de 2017

Tutorial: Instalar fuentes de Adobe Edge Web

Hace tiempo compartí un post en donde les enseñe como instalar las fuentes de Google Font, ese es el paso #1 que realizo cuando estoy creando una plantilla nueva, pero en la tarde de hoy descubrí otra web muy parecida a la de google, pero en donde ofrecen nuevos estilos... Se trata de Adobe Edge Web.

   Adobe Edge Web te  da acceso a una extensa biblioteca de fuentes web posible gracias a las contribuciones de Adobe y diseñadores de todo el mundo.
   Simplemente elijes las fuentes que desea utilizar en su sitio web, pegas la línea de JavaScript en tu blog y estará listo para comenzar a usar las fuentes. Eso es todo. Sin inscripción, sin suscripción, sin costo alguno.
   Edge Web Fonts es alimentado por Typekit, un servicio de fuentes comerciales de Adobe, por lo que puedes estar seguro del alto rendimiento y estabilidad de las más de 500 fuentes.

Si les interesa esta opción entonces atentos a los siguientes pasos:

Elige tus fuentes


Edge Web Fonts tiene un sistema de búsqueda muy avanzado, te facilitara encontrar las fuentes que necesitas.
Clasificación:
  1. Sans-serif
  2. Serif
  3. Slab-serif
  4. Script
  5. Blackletter
  6. Monospaced
  7. Handmade
  8. Decorative
Recomendada para:
  • Encabezados: recomendados para textos cortos de tamaños medios a grandes, estas fuentes suelen ser más decorativas para una mejor  representación. 
  • Párrafo: recomendado para texto continuo en tamaños pequeños, estas fuentes poseen una generosa altura  y funcionan bien en los sistemas operativos. 
Propiedades:
  • Peso: espesor de los trazos
  • Ancho: anchura de las letras
  • X-height: relación entre la altura minúscula y la altura de las mayúsculas
  • Contraste: relación de trazos finos a trazos gruesos
  • Estándar: letras mayúsculas y minúsculas, ejemplo "Tipo"
  • Mayúsculas: todas mayúsculas, ejemplo "TIPO"
  • Menor: números minúsculos con una línea de base variable
  • Superior: números en mayúscula con una línea de base variable.
Lenguaje soportado: La opción de lenguaje soportadoes mi favorita. Así sabremos si nuestra fuente es totalmente compatible con nuestro idioma. En mi caso, si podrá soportar acentos gráficos y la ñ.
  • Inglés
  • Español
  • Francés
  • +

Selecciona

Una vez que encuentres las fuentes que deseas, pasa el cursor sobre ella. Inmediatamente se abrirá una especie de cajita negra. Da click a + select this font.


Selecciona todas las fuentes que desees, y como podrás notar se irán "acumulando" en el pie de página junto al script y las font-family
  • Para este ejemplo, he seleccionado cuatro fuentes. Todas de distintas características.

Añadir al blog

  • Ingresa en tu blog: → Tema → Editar HTML y encima de <head> pega el código JavaScript que te da Edge Web Fonts una vez que finalices la selección.
Listo, ya puedes utilizar las nuevas fuentes.

Fuentes a tus post

Para cambiar los tipos de letras, se utiliza: la etiqueta  font-family, font o en otro caso el título de la fuente. De igual manera Edge Web Fonts te las ofrece
  • Ve a Plantilla ▸Personalizar ▸Avanzado ▸CSS

Títulos de los post

Para cambiar la fuente de los títulos de los post utilizaras este simple código.
.post h3 {
FUENTE
}

Para cambiar el títulos de los gadgets

.sidebar h2{
FUENTE
}
Si tienes problemas cambiando la fuente de los gadget, dirígete a ESTA PÁGINA, en donde hablo del tema.  

 Texto del blog

body{
FUENTE
}

 Título (header) del blog

.header h1 {
FUENTE
}
Entendiendo el código:
  • font-family: Nombre de la fuente.
Si quieres darle más estilo al título, añade antes del cierre ( } ):
✔ Para centrar el titulo: text-align: center;
✔ Para que todo el texto este en mayúscula: text-transform: uppercase;
✔ Para separar más las letras: letter-spacing: 3px;
✔  Para modificar el tamaño: font-size: 25px;

Y eso es todo.  Espero les guste este tutorial y que por supuesto les ayude mucho.
Hasta la próxima...

Les envió muchos besos. Si quieren un tutorial en especifico solo pídanlo en los comentarios o llenen ESTE FORMULARIO...

1 comentario:

  1. Hola!
    Siempre me fue un dolor de cabeza cambiar la fuente del blog, así que solo uno el predestinado que tiene :p Pero ya me marqué esta entrada para cuando cambie el diseño :D Gracias!!!
    Saludos!

    ResponderEliminar