i den här handledningen visar jag dig hur du laddar upp alla Google Web Font till din Blogger-blogg. Det finns några sätt att göra detta, men det är så jag gör det.
denna handledning passar bäst för dem som har viss CSS-kunskap. För denna handledning använder jag bloggers” enkla ” Mall.
här är ett exempel på en anpassad Google web font installerat på vår Lemon Macaron Mall.
Steg 1
innan vi börjar rekommenderar jag alltid att säkerhetskopiera din nuvarande Mall innan du gör några ändringar (bara om något går fel).
du kan göra detta i instrumentpanelen genom att gå till Mall > Backup/Restore (finns i det övre högra hörnet) > ladda ner hela mallen.
steg 2
när du har säkerhetskopierat din mall klickar du på Redigera HTML (vi finns fortfarande på fliken ”Mall”).
steg 3
lämna den här sidan öppen, öppna en ny flik eller ett nytt fönster och gå över till webbplatsen Google Web Fonts. Sök efter teckensnittet du vill använda och välj snabb användning.
jag har valt att använda ’hummer två’ teckensnitt.
steg 4
för avsnitt 1: Välj de stilar du vill ha, Välj de stilar du vill ha tillgängliga för ditt teckensnitt (du kan välja flera stilar). Tänk på att välja för många stilar kan sakta ner din blogg. Jag har valt Normal 400 som du kan se nedan.
för Avsnitt 3: Lägg till den här koden på din webbplats, klicka på fliken @import.
Steg 5
kopiera informationen i rutan @import.
nu, lämna den här sidan öppen, gå tillbaka till din blogg (där du valde redigera HTML). Vi kommer att klistra in teckensnittsimportkoden i din mall.
leta efter följande text som ligger mot början av mallredigeraren (vanligtvis placerad på raderna 13 eller 14):
<b:skin>...</b:skin>
när du har expanderat klistrar du in informationen som du kopierade från rutan @ import på webbplatsen Google Web Fonts, följande text:
/* Variable definitions
det ska se ut så här:
klicka på Spara mall. Ditt teckensnitt har nu importerats! Nu kan du placera typsnittsfamiljen där du vill att den ska visas i din mall.
steg 6
snabbt visar jag dig hur du använder ditt nyligen importerade teckensnitt. I det här exemplet använder jag teckensnittet för min posttitel. I HTML-redigeraren söker du efter:
h3.post-title, .comments h4
ta bort följande rad:
font: $(post.title.font);
och ersätt den med texten som anges i Avsnitt 4: integrera teckensnitten i din CSS på webbplatsen Google Web Fonts.
font-family: 'Lobster Two', cursive;
det ska se ut så här när du har klistrat in teckensnittsfamiljen:
