Hvor mange av dere har faktisk testet nettstedet ditt på forskjellige nettlesere og datamaskiner før du starter nettstedet? Jeg vedder på at få av dere gjør det. Vet du at det som ser bra ut på ett OS (for eksempel Mac), virkelig kan se dårlig ut på en annen, for eksempel Windows? Hovedårsaken er at skrifttypene som brukes i Mac-systemet, ikke er tilgjengelige i Windows OS. Substitute skrifttype brukes av datamaskinen (uten skrift), og dette kan virkelig skru opp webdesign. En god måte å overvinne dette på er å bruke en web skrifttype som støttes av de fleste nettlesere, slik at nettstedet ditt ser stort sett ut uansett hvilken nettleser eller datamaskin du bruker.

Under I / O-utviklerkonferansen i juni 2010 introduserte Google Google Font - en serie åpen font, som du kan legge inn og bruke på nettstedet ditt. Alle skrifter er vert på Google-serveren, slik at alle nettlesere kan bruke den uten mye innsats. For øyeblikket er det 18 forskjellige skrifttyper (fra dette innlegget) som du kan velge mellom, og jeg er sikker på at flere vil bli lagt til biblioteket i fremtiden.

Forhåndsvisning av skrifttypen

I tillegg til Google-skrifttypen ga Google ut Google forhåndsvisningsprogrammet som lar deg forhåndsvise fonten før du legger den inn på nettstedet ditt.

Bruken er enkel. Du må bare skrive inn noen egendefinert tekst, spille rundt med innstillingene (skriftfamilie, størrelse, varianter, avstand osv.) For å finne den beste passformen for nettstedet ditt.

Når du er fornøyd med resultatet, må du bare ta tak i koden og legge den inn i nettstedet ditt.

Embedding Google Font til WordPress-siden din

Hvis du bruker en WP-drevet blogg, kan du legge inn og bruke Google-skrift på nettstedet ditt.

Gå til Google Font, finn favorittfonten din og ta tak i "Embed" -koden. For eksempel:

Åpne filen "header.php" i den aktive temamappen. Sett inn koden før merket.
Hvis du vil bruke Google Font i hele nettstedet, åpner du filen style.css fra den aktive temamappen og limer inn den gjenværende koden du tok fra Google Font-siden.
 kropp {font-family: 'Cantarell', serif; skriftstørrelse: 28px; font-style: normal; font-weight: 400; tekstskygge: ingen; tekst-dekorasjon: ingen; tekst-transformasjon: ingen; brevavstand: 0em; ordavstand: 0em; linjehøyde: 1em; } 
Alternativt kan du endre css tilsvarende hvis du bare bruker den til en liten del av nettstedet ditt. For eksempel
 span.custom_font {font-family: 'Cantarell', serif; skriftstørrelse: 28px; font-style: normal; font-weight: 400; } 
Lagre header.php og style.css- filen og last dem opp på serveren din. Hvis du bruker et cache-plugin, ikke glem å fjerne cachen din.
Det er det. Prøv det og la oss få vite om det fungerer for deg.
Bilde kreditt: til01