CodePen Challenge # 3 Favoritt Google Font Par

En annen måned, en annen CodePen Challenge! Siste gang vi bedt om å stilte et påmeldingsskjema og en stor 68 av dere deltok. Denne gangen vil vi se hvilke Google-skrifttypekombinasjoner du anbefaler - de beste eksemplene vises i en uke eller så!

Utfordringen

Vi vil at du skal bøye dine typografiske muskler og vise oss hvilke Google-fontpar du synes fungerer best! Har du lyst på litt Lato med litt Merriweather? Gjør Unica One med Vollkorn deg kule? 

Ta pennen vi har forberedt og behandle den med to Google-skrifter. Bruk skriftene på noen måte du liker; Du må kanskje tilpasse andre typografiske stiler, for eksempel linjehøyde, skriftstørrelse og avstand mellom bokstavene, pluss du kan endre fargene hvis du føler det forbedrer personligheten til den typen du har brukt. 

Bare rør ikke merkingen!

Over til deg

Her er hva du trenger å gjøre, i noen døde enkle trinn.

Trinn 1

For det første, gå videre til demoen på CodePen. Du kan gjenkjenne det som den første siden som skal publiseres på verdensomspennende webside av CERN. Slik ser det ut:

Steg 2

Slå den Gaffel knappen for å lage din egen kopi av det, så gjør så mange endringer som du vil ha CSS.

Den raskeste måten å gjøre bruk av Google-skrifter på, er å importere dem direkte. Ta tak i det aktuelle @importere kutt fra Google:

Lim deretter den inn i CSS-panelet på CodePen for å bruke det i stilene dine:

@import url (http://fonts.googleapis.com/css?family=Lato); p font-family: 'Lato', sans-serif; 

Trinn 3 (Valgfritt)

Hvis du er logget på CodePen, kan du redigere beskrivelsen ved å trykke på info knapp. Bruk dette til å gi folk en ide om hva du har gjort.

Trinn 4

Truffet Lagre, du er ferdig. Sørg for å gi oss beskjed i kommentarene når du er ferdig, og gjerne gi oss beskjed ved å tweet oss også @ wdtuts.

Det er det! Alle oppføringer blir lagt til i denne samlingen på CodePen og de beste eksemplene vil bli vist på Tuts + i en uke eller så!

Lykke til og ikke glem å følge Tuts + på Codepen!

Tips

  • En nybegynners veiledning for å parre fonter på Tuts+
  • http://fontpair.co (hjelper designere sammen Google Fonts sammen)
  • Fire teknikker for å kombinere fonter av Hoefler & Co.
  • 100 dager med skrifter 100 dager, hver viser et par Google-skrifter
  • Font Library-åpen kildekode-prosjekt for å merke og organisere Google-skrifter