In deze tutorial laat ik u zien hoe u een Google Web lettertype uploadt naar uw Blogger blog. Er zijn een paar manieren om dit te doen, maar dit is hoe ik het doe.
deze handleiding is het meest geschikt voor diegenen die enige CSS-kennis hebben. Voor deze tutorial gebruik ik Blogger ‘ s “Simple” template.
hier is een voorbeeld van een aangepast Google web lettertype geïnstalleerd op onze Lemon Macaron sjabloon.
Stap 1
voordat we beginnen, adviseer ik altijd om een back-up te maken van uw huidige sjabloon voordat u wijzigingen aanbrengt (voor het geval er iets mis gaat).
u kunt dit doen in uw dashboard door naar sjabloon > Backup / Restore (bevindt zich in de rechterbovenhoek) > volledige sjabloon downloaden.
Stap 2
nadat u een back-up van uw sjabloon hebt gemaakt, klikt u op HTML bewerken (we zijn nog steeds in het tabblad “sjabloon”).
Stap 3
laat deze pagina open, open een nieuw tabblad of venster en ga naar de website van Google Web Fonts. Zoek naar het lettertype dat u wilt gebruiken en selecteer snel gebruiken.
ik heb ervoor gekozen om het lettertype ‘Lobster Two’ te gebruiken.
Stap 4
voor Sectie 1: Kies de stijlen die u wilt, kies de stijlen die beschikbaar zijn voor uw lettertype (u kunt meerdere stijlen selecteren). Houd er rekening mee dat het selecteren van te veel stijlen kan vertragen uw blog. Ik heb normale 400 geselecteerd zoals je hieronder kunt zien.
voor Sectie 3: Voeg deze code toe aan uw website, klik op het tabblad @Importeren.
Stap 5
kopieer de informatie in het vak @importeren.
als u deze pagina open laat, gaat u terug naar uw blog (waar u HTML hebt geselecteerd). We gaan het lettertype import code plakken in uw sjabloon.
zoek naar de volgende tekst aan het begin van de sjabloonbewerker (meestal op regels 13 of 14):
<b:skin>...</b:skin>
eenmaal uitgebreid, plak de informatie die u gekopieerd van de @import box op de Google Web Fonts website, de volgende tekst:
/* Variable definitions
het zou er zo moeten uitzien:
klik op sjabloon opslaan. Uw lettertype is nu geïmporteerd! Nu kunt u de lettertypefamilie plaatsen waar u het wilt weergeven in uw sjabloon.
Stap 6
snel zal ik u laten zien hoe u uw nieuw geïmporteerde lettertype gebruikt. In dit voorbeeld gebruik ik het lettertype voor mijn posttitel. In de HTML-editor zoeken naar:
h3.post-title, .comments h4
verwijder de volgende regel:
font: $(post.title.font);
en vervang het door de tekst vermeld op Sectie 4: Integreer de lettertypen in uw CSS op de Google Web Fonts website.
font-family: 'Lobster Two', cursive;
het zou er ongeveer zo uit moeten zien als je eenmaal het lettertype family info hebt geplakt:
toevoegen