i denne opplæringen viser jeg deg hvordan du laster opp Google Webfont til Blogger-bloggen din. Det er noen måter å gjøre dette på, men det er slik jeg gjør det.
denne opplæringen er best egnet for de som har NOEN CSS kunnskap. For denne opplæringen bruker Jeg Bloggerens» Enkle » mal.
her er et eksempel På en tilpasset Google web font installert på Vår Lemon Macaron mal.
Trinn 1
før vi begynner, anbefaler jeg alltid å sikkerhetskopiere din nåværende mal før du gjør noen endringer(bare hvis noe går galt).
Du kan gjøre dette i dashbordet ved Å gå Til Mal > Backup / Restore (plassert i øvre høyre hjørne) > Last ned full mal.
Trinn 2
når du sikkerhetskopierer malen, klikker Du På Rediger HTML (vi er fortsatt i kategorien «Mal»).
Trinn 3
La denne siden være åpen, åpne en ny fane eller et vindu og gå over Til Google Web Fonts-nettstedet. Søk etter skriften du vil bruke, og velg Hurtig Bruk.
jeg har valgt Å bruke ‘Hummer To’ skrift.
Trinn 4
For Seksjon 1: Velg stilene du vil ha, velg stilene du vil ha tilgjengelig for fonten din(du kan velge flere stiler). Husk at å velge for mange stiler kan bremse bloggen din. Jeg har valgt Normal 400 som du kan se nedenfor.
For Seksjon 3: Legg til denne koden på nettstedet ditt, klikk på @import-fanen.
Trinn 5
Kopier informasjonen i @import-boksen.
nå, la denne siden være åpen, gå tilbake til bloggen din(Der du valgte Rediger HTML). Vi skal lime inn fontimportkoden i malen din.
Se etter følgeteksten som ligger mot begynnelsen av malredigereren (vanligvis plassert på linje 13 eller 14):
<b:skin>...</b:skin>
når du har utvidet, limer du inn informasjonen du kopierte fra @ import-boksen På Google Web Fonts-nettstedet, følgende tekst:
/* Variable definitions
Det skal se slik ut:
Klikk på lagre mal. Skriften din er nå importert! Nå kan du plassere skriftfamilien der du vil at den skal vises i malen.
Trinn 6
Raskt viser Jeg Deg Hvordan du bruker din nylig importerte skrift. I dette eksemplet bruker jeg skrifttypen for innleggstittelen min. I HTML-editoren søk etter:
h3.post-title, .comments h4
Fjern følgende linje:
font: $(post.title.font);
og erstatte den med teksten oppført På Seksjon 4: Integrere skrifter I CSS På Google Web Fonts nettsted.
font-family: 'Lobster Two', cursive;
Det skal se omtrent slik ut når du har limt inn font family info:
