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

8 komentarzy:

  1. Przydatne, w projektancie szablonów naprawdę jest ubogo z tymi fontami. :)

    OdpowiedzUsuń
  2. Bardzo ciekawy blog. I przydatna notka, szkoda tylko, że nie ogarniam HTMLa xD
    Lecę rozejrzeć się po stronie!
    Pozdrawiam,
    Lina

    OdpowiedzUsuń
    Odpowiedzi
    1. Podstawy HTML'a nie są trudne. Nawet bez jego znajomości możesz dużo rzeczy pozmieniać na blogu :)
      A.

      Usuń
  3. Skąd wiedziałaś, co aktualnie rozkminiam?:D

    OdpowiedzUsuń
    Odpowiedzi
    1. Mam taki radar wykrywający potrzeby czytelników :D
      A.

      Usuń
  4. Bardzo przydatny post. Muszę przeanalizować to na spokojnie.

    OdpowiedzUsuń

Dziękuję za każdy komentarz :) Postaram się na wszystkie odpowiedzieć.
A.