I love gooseberry: STEP BY STEP: JAK DODAĆ FONT Z GOOGLE FONTS?

2014/09/17

STEP BY STEP: JAK DODAĆ FONT Z GOOGLE FONTS?

Słyszeliście kiedyś o Google Fonts? Jest to zbiór fontów, które możecie wykorzystać na swoim blogu/stronie. Nie musicie się dzięki temu ograniczać do tych, które znajdziecie w Projektancie Szablonów (a wybór jest tam bardzo ograniczony). Dlaczego warto stosować kroje z Google Fonts? Po pierwsze blog będzie jeszcze lepiej wyglądał. Po drugie jest to bardzo łatwe (o czym sami się przekonacie po przeczytaniu tego wpisu).

1. Otwórzcie stronę www.google.com/fonts . Możecie na niej wybrać font pasujący do waszego bloga.

.
2. Po znalezieniu rodziny krojów (np. Open Sans), klikamy na ikonkę "Quick-use" (środkowa ikonka w prawym dolnym rogu).

.
3. W "Choose the styles you want" zaznaczcie krój, który Was konkretnie interesuje.

4. Z "Add this code to your website" kopiujecie fragment kodu.

5. Na Bloggerze otwieracie "Szablon", następnie "Edytuj kod HTML". Skopiowany fragment kodu wklejacie od razu pod <head>. Pamiętacie aby po nim wpisać </link>. Przykład:

.
6. Na Google Fonts kopiujecie kolejny fragment z "Integrate the fonts into your CSS".

.
7. Wyszukujecie w kodzie HTML ".post-body". Wklejacie skopiowany fragment. Pod nim dopiszcie "font-size: 14px" (część odpowiedzialną za wielkość fontu, wartość wybierzcie sami). Przykład:

.post-body {

font-family: 'Open Sans', sans-serif;

font-size: 14px;

line-height: 1.4;

position: relative;

}