Slik bruker du Google-skrifter i ditt neste webprosjekt og hvorfor du bør

Annonse

Valg av skrift er en integrert designbeslutning på ethvert nettsted, men mesteparten av tiden nøyer vi oss med den samme gamle serif- og sans-serif-familien. Mens hoveddelen av tekst alltid skal være noe som er optimalisert for lesbarhet, med mindre du vil ha lesere for å få hodepine, kan titler og fremtredende tekst være din plass til å legge til et unikt design med litt skrift teft.

Les videre for å finne ut hvordan du bruker noe av Google Nettfonter på siden din.

Bakgrunn

Med CSS kan du spesifisere en kjede med skrifter som skal brukes hvis den foretrukne ikke er tilgjengelig. Dette lar deg ha et førstevalg - kanskje en mindre vanlig, men gratis font; deretter ha sikkerhetskopier på plass som alltid vil være der med Windows eller Mac. Generelt sett vil webdesignere holde seg med prøvde og testede fontfamiljekjeder, som skissert av w3 skoler.

I det siste, hvis en annen font var ønsket, ble designere tvunget til å lage bilder for teksten i stedet - logo, overskrifter etc. Ulempene er:

• Bilder skaleres ikke bra.
• Bilder kan ikke leses av skjermlesere.
• Du kan ikke fremheve teksten på bilder.
• Søkemotorer kan ikke "lese" bilder.
• Innlasting av bilder bremser nettsiden.

Så er det en bedre løsning? En som lar oss bruke et universelt tilgjengelig sett med gratis skrifter, uten å ty til bilder?

Google Nettfonter

Svaret kommer fra Google. Google Web Fonts er egentlig en samling av (i det nåværende antall, 489) optimaliserte skrifter som er lagret i skyen, som kan legges inn i nettprosjektene dine (eller til og med bare lastes ned for bruk på datamaskinen din).

Google Web Fonts-nettstedet gjør det dessuten enkelt å sammenligne og velge, og gir deg all koden du trenger for å legge inn skriften via Javascript eller CSS - mer om det senere.

Starter

Gå over til Nettfontside, og klikk begynn å velge skrifter å begynne.

Grensesnittet er ganske selvforklarende - til venstre kan du søke etter spesifikke nøkkelord; og filtrer etter grunnleggende skrifttype; eller filter for bestemte faktorer som brevtykkelse. Linjen øverst justerer bare forhåndsvisningsteksten. Hvis du har et bestemt avsnitt av tekst du vil teste det på, bytter du for eksempel til avsnittfanen og limer inn teksten.

Som jeg nevnte, har du det bedre å ikke velge noe for lyst på hovedinnholdsteksten, så hold deg til enten serif eller sans-serif-familier hvis du virkelig vil gå etter noe unikt der.

Når du ser en du liker, bare legg den til i samlingen din.

Klikk på anmeldelse -knappen for å gå inn i vurderingsmodus og sammenligne alle valgene dine.

I vurderingsmodus har du vist en rekke skriftstørrelser og enten et avsnitt eller en overskriftstekst. Systemet vil også ta et intelligent valg om å vise deg, avhengig av den typiske brukssaken til den skriften. men du kan endre forhåndsvisningsmodus hvis du vil.

Bla til høyre for å se andre skrifter i din nåværende samling; Klikk på X øverst til høyre for å avvise dem.

Prøvekjøring er en spesielt interessant modus som vil kombinere alle skriftene i samlingen din for å vise hvordan det kan se ut når de kombineres i en grunnleggende sideoppsett.

OK, valgt. Hvordan bruker jeg dem?

Når samlingen din er smalere, klikker du på anmeldelse knappen på den store blå stolpen. Hvis du har gått over bord og inkludert for mange (virkelig hold den til maksimalt 2), vil innvirkningsindikatoren for sidebelastning advare deg.

Bla nedover for å hente den aktuelle koden. Det er tre valg her:

• Standard (link rel = metode): Dette må limes inn i HEAD-delen av nettstedet, så du må være komfortabel med HTML for å gjøre dette. For WordPress legger du det til header.php hvis du velger denne måten. Jeg anbefaler det ikke.
• @importere: denne metoden går direkte inn i stilarkfilen din, og det er her vi vil spesifisere skriftene for forskjellige sideelementer uansett, så personlig anbefaler jeg dette. Plasser den for WordPress-temaer style.css like etter temainformasjonen
• Javascript: selvforklarende - plasser koden hvor som helst i temaet ditt. Fordelen med å bruke denne metoden er at skrifttypen blir lastet asynkront - nettstedet vil først vises i fallback-skriften, og deretter bytte når skriften er fullastet. Selv om den innledende siden lastetiden vil være raskere, vil det skape en skurrende plutselig endring for brukeren som du kanskje ikke vil ha.

Det er trinn 1. Trinn 2 er å spesifisere skriften der du vil bruke den. Vi har ikke plass til en fullstendig CSS-opplæring her (jeg foreslår disse 5 CSS-læringssider Topp 5 nettsteder for å lære CSS online Les mer ; og min egen 5 babytrinn i CSS-opplæringen 5 Babytrinn for å lære CSS og bli en Kick-Ass CSS trollmannCSS er de viktigste endringssidene som har sett det siste tiåret, og det banet vei for atskillelse av stil og innhold. På den moderne måten definerer XHTML den semantiske strukturen ... Les mer ), men det er nok å si at du vil justere noe i stilarket ditt som sier font-family, og sørg for å ta med sikkerhetskopi-stilen som foreslått av Google.

optimalisert

Å bruke en ikke-standard skrifttype som brukeren trenger å laste ned, vil legge til en liten tid på sidelastningen - det er uunngåelig. En typisk nettfont fra Google er imidlertid omtrent 100 KB - til sammenligning handler dette om størrelsen på et mellomstort jpeg-bilde av god kvalitet. I likhet med bilder vil nettfonten bli bufret i brukerens nettleser, så bare den innledende sidelastningen blir forsinket.

Sammendrag

Jeg innrømmer det - jeg elsker fonter. Jeg forventer at som mange av dere, jeg pleier å horde dem på harddisken min - bare i tilfelle, vet du ?! Nå kan jeg faktisk bruke noen unike skrifter i nettprosjektene mine - jeg er spent. Vær så snill, ikke overse skriftene på nettstedet ditt!

Hvis du har spørsmål om implementering av webfonter på nettstedet ditt, kan du gjerne spørre i kommentarene, så ser jeg om jeg kan hjelpe.