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:

<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</link>



.
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;
}



.
8. Sprawdzamy czy font dobrze wygląda "Podgląd szablonu".
9. Zapisujemy szablon "Zapisz szablon".


Follow on Bloglovin