7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Community Projects

Reto CodePen #3: Pares favoritos de fuentes de Google

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

¡Otro mes, otro Reto de CodePen! La última vez te pedimos que aplicases estilo a un formulario de inscripción y unos 68 de vosotros participasteis. Esta vez queremos ver qué combinaciones de fuentes de Google recomiendas, ¡los mejores ejemplos se mostrarán dentro de una semana más o menos!

El desafío

¡Queremos que flexiones tus músculos tipográficos y nos muestres qué pares de fuentes de Google crees que funcionan mejor! ¿Qué te parece un poco de Lato con un poco de Merriweather? ¿Se te hace babear la combinación de Unica One con Vollkorn?

Toma el pen que hemos preparado y trátalo con dos fuentes de Google. Aplica las fuentes de la manera que desees; es posible que debas ajustar otros estilos tipográficos como line-height, font-size y letter-spacing, además puedes cambiar los colores si sientes que mejora la personalidad del tipo que hayas utilizado.

¡No toques el marcado!

Ahora te toca a ti

Esto es lo que tienes que hacer, en unos pocos sencillos pasos.

Paso 1

En primer lugar, dirígete a la demostración en CodePen. Es posible que lo reconozcas como la primera página que el CERN publicó en la web mundial. Así es como se ve:

Paso 2

Pulsa el botón Fork para crear tu propia copia del mismo y, a continuación, realiza tantos cambios como desees en el CSS.

La forma más rápida de hacer uso de las fuentes de Google es importarlas directamente. Toma el fragmento @import relevante de Google:

A continuación, pégualo en el panel CSS de CodePen para usarlo en tus estilos:

Paso 3 (opcional)

Si has iniciado sesión en CodePen, puedes editar la descripción pulsando el botón Info. Usa esto para darle a la gente una idea sobre qué has hecho.

Paso 4

Pulsa Save (guardar), ya terminaste. Asegúrate de informarnos a través de la sección de comentarios cuando hayas terminado y no dudes en informarnos tuiteándonos también a @wdtuts.

¡Eso es todo! ¡Todas las entradas se añadirán a esta colección en CodePen y los mejores ejemplos se mostrarán en Tuts + dentro de una semana más o menos!

¡Buena suerte y no olvides seguir a Tuts + en Codepen!

Consejos

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.