Hvor mange af jer har faktisk testet dit website design på forskellige browsere og computere, før du starter webstedet? Jeg vedder, at få af jer gør det. Ved du, at det, der ser godt ud på et OS (for eksempel Mac), virkelig kan se dårligt ud på en anden, som f.eks. Windows? Hovedårsagen er, at skrifttyperne, der bruges i Mac-systemet, ikke er tilgængelige i Windows OS. Substitutions skrifttype bruges af computeren (uden skrifttype), og dette kan virkelig skrue op på dit webdesign. En god måde at overvinde dette på er at bruge en web skrifttype, der understøttes af de fleste browsere, så dit websted vil se stort set ens ud, uanset hvilken browser eller computer du bruger.

Under I / O-udviklerkonferencen i juni 2010 introducerede Google Google Font - en række open source-skrifttyper, som du kan integrere og bruge på dit websted. Alle skrifttyper er hostet på Google-serveren, så alle browsere kan udnytte den uden stor indsats. I øjeblikket er der 18 forskellige skrifttyper (fra dette indlæg), som du kan vælge imellem, og jeg er sikker på, at flere vil blive tilføjet til biblioteket i fremtiden.

Forhåndsvisning af skrifttypen

Foruden Google-skrifttype udgav Google også forhåndsvisningsprogrammet for Google Font, som giver dig mulighed for at forhåndsvise skrifttypen, inden du integrerer det med dit websted.

Brugen er enkel. Du skal bare skrive nogle brugerdefinerede tekst, spille rundt med indstillingerne (skrifttypefamilie, størrelse, varianter, mellemrum osv.) For at finde den bedste pasform til dit websted.

Når du er tilfreds med resultatet, skal du blot tage fat i koden og indlejre den i dit website design.

Indlejring af Google-skrifttype til dit WordPress-websted

Hvis du bruger en WP-powered blog, kan du her integrere og bruge Google-skrifttype på dit websted.

Gå til Google Skrifttype, find din foretrukne skrifttype og tag tag i "Embed" -koden. For eksempel:

Åbn "header.php" filen i din aktive tema mappe. Indsæt koden før mærket.
Hvis du vil bruge Google-skrifttypen i hele webstedet, skal du åbne din "style.css" -fil fra den aktive temamappe og indsætte den resterende kode, som du greb fra Google Font-webstedet.
 krop {font-family: 'Cantarell', serif; skrifttypestørrelse: 28px; skrifttypestil: normal; skrifttype-vægt: 400; tekstskygge: ingen; tekst dekoration: ingen; tekst-transform: ingen; bogstavafstand: 0em; Ord-afstand: 0em; linjehøjde: 1em; } 
Alternativt kan du ændre css i overensstemmelse hermed, hvis du kun bruger det til en lille del af dit websted. For eksempel
 span.custom_font {font-family: 'Cantarell', serif; skrifttypestørrelse: 28px; skrifttypestil: normal; skrifttype-vægt: 400; } 
Gem filen header.php og style.css og upload dem tilbage til din server. Hvis du bruger et cache-plugin, skal du ikke glemme at rydde cachen.
Det er det. Prøv det og lad os vide, om det virker for dig.
Billedkredit: til01