v tomto tutoriálu vám ukážu, jak nahrát jakékoli webové písmo Google do svého blogu Blogger. Existuje několik způsobů, jak to udělat, ale takhle to dělám.
tento tutoriál je nejvhodnější pro ty, kteří mají nějaké znalosti CSS. Pro tento tutoriál používám Bloggerovu „jednoduchou“ šablonu.
zde je příklad vlastního webového písma Google nainstalovaného v naší šabloně Lemon Macaron.
Krok 1
než začneme, vždy doporučuji zálohovat aktuální šablonu před provedením jakýchkoli změn(pro případ, že se něco pokazí).
můžete to udělat v řídicím panelu tím, že půjdete do šablony > zálohování/obnovení (Nachází se v pravém horním rohu) > stáhnout celou šablonu.
Krok 2
po zálohování šablony klikněte na Upravit HTML (stále jsme na kartě „šablona“).
Krok 3
ponechte tuto stránku otevřenou, otevřete novou kartu nebo okno a přejděte na web Google Web Fonts. Vyhledejte písmo, které chcete použít, a vyberte rychlé použití.
rozhodl jsem se použít písmo „Lobster Two“.
Krok 4
pro sekci 1: Vyberte požadované styly, Vyberte požadované styly dostupné pro vaše písmo(můžete vybrat více stylů). Mějte na paměti, že výběr příliš mnoha stylů může zpomalit váš blog. Vybral jsem normální 400, jak vidíte níže.
pro Část 3: Přidejte tento kód na své webové stránky, klikněte na kartu @import.
Krok 5
zkopírujte informace do pole @import.
nyní ponechte tuto stránku otevřenou a vraťte se zpět na svůj blog(kde jste vybrali Upravit HTML). Vložíme kód importu písma do vaší šablony.
vyhledejte následující text umístěný na začátku editoru šablon (obvykle umístěný na řádcích 13 nebo 14):
<b:skin>...</b:skin>
Po rozbalení vložte informace, které jste zkopírovali z pole @import na web Google Web Fonts, následující text:
/* Variable definitions
mělo by to vypadat takto:
klikněte na Uložit šablonu. Vaše písmo bylo nyní importováno! Nyní můžete umístit rodinu písem, kam chcete, aby se zobrazila ve vaší šabloně.
Krok 6
rychle vám ukážu, jak používat nově importované písmo. V tomto příkladu budu používat písmo pro název příspěvku. V editoru HTML vyhledejte:
h3.post-title, .comments h4
odstraňte následující řádek:
font: $(post.title.font);
a nahraďte jej textem uvedeným v části 4: Integrujte písma do CSS na webu Google Web Fonts.
font-family: 'Lobster Two', cursive;
jakmile vložíte informace o rodině písem, mělo by to vypadat takto:
