29 czerwca 2015

Jak dodać niestandardową czcionkę?

Hej i czołem kluski pod stołem, dzisiaj coś dla bardziej zaawansowanych blogerów, którym nie wystarczą już podstawowe kody CSS. A więc dziś chciałabym wytłumaczyć wam najprościej jak to możliwe, jak zmienić czcionkę na niestandardową, czyli taką której nie ma w wyborze na blogspocie.
A więc na początku, wchodzimy na Google Fonts i suwakiem szukamy sobie taką czcionkę, jaka nam się najbardziej podoba. Kiedy już znajdziecie odpowiednią dla siebie czcionkę klikacie na znaczek:


Następnie zjeżdżajcie na dół i macie dwa kody, które ponumerowałam, żeby było wam łatwiej:
Kopiujecie swój pierwszy kod, i wchodzicie w EDYTUJ KOD HTML. I teraz w kodzie wyszukujecie fragmentu: <head> , chociaż u większości jest on zaraz na samym początku. Nasz kod wklejacie nad fragmentem <head> . Teraz najważniejsze, bo kiedy będziecie chcieli zapisać szablon, będzie wam wyskakiwał komunikat z błędem dlatego musimy trochę zmodyfikować nasz kod. Nie jest to bardzo trudne wystarczy po prostu wkleić ukośnik:

Tak wygląda tekst przed modyfikacjami:
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
A tak po:
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'/>
Teraz wszystko powinno się ładnie zapisać. Ale to oczywiście nie koniec, kolejną rzeczą jaką wyszukujemy w naszym kodzie jest (np. h3.post-title - czyli tytuł posta) klikamy na klawiaturze CTRL + F i wyskakuje nam okienko, w którym wpisujemy h3.post-title h4, zazwyczaj za pierwszym razem nie wyszuka nam odpowiedniego fragmentu dlatego musimy kliknąć enter dwa lub trzy razy. Kiedy znajdziecie taki fragment:


To znaczy, że jesteście mistrzami i nikt się z wami nie równa. A tak an poważnie, to znaczy, że prawie skończyłaś zabawę z niestandardową czcionką.
Teraz należy trochę pousuwać i trochę powklejać, a mianowicie zamiast tekstu : font:$(post.title.font); wklejacie swój drugi kod. Oczywiście robicie to w dwóch miejscach, a w trzecim kodzie, po prostu wklejacie go zaraz na początku po nawiasie klamrowym. Czyli wygląda to mniej więcej tak:

Widzicie różnice? Dobrze, i teraz ostatni bardzo łatwy krok, żeby dopełnić tej wspaniałości, wchodzimy na PROJEKT→DOSTOSUJ→ZAAWANSOWANE→DODAJ ARKUSZ CSS.
I wklejamy taki kod:
h3.post-title {font-family: 'Dancing Script', cursive;}
Oczywiście w nawiasie wklejacie swój drugi kod. Zapisujemy i włala!  

Brak komentarzy:

Prześlij komentarz