Cel bloga

Instrukcje dotyczące języka HTML czy kodów CSS, artykuły na temat ciekawych funkcji czy poradniki pomagające początkujących - to wszystko i jeszcze więcej tylko u nas!

Zadaj pytanie!

Wskazówka

Chcąc znaleźć pożądaną instrukcję skieruj się do zakładki spis instrukcji, gdzie znajdziesz wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie.

Archiwum

Statystyka

Niestandardowe czcionki z polskimi znakami w bloggerze

||
Dzień dobry!

Dzisiejsza instrukcja nie należy zdecydowanie do grona tych, które możnaby określić mianem trudnych, ale zdecydowanie może zmienić wygląd naszego bloga. A tyczyć będzie się ona... czcionek! A precyzyjniej - czcionek niestandardowych, których nie znajdziemy w panelu bloggera. Pokażę Wam dzisiaj, jak szybko znaleźć czcionkę dla naszego bloga i jak dodać do niej polskie znaki.

To co, zaczynamy?

NIESTANDARDOWE CZCIONKI Z POLSKIMI ZNAKAMI


Wchodzimy na stronę google.com/fonts. Musimy pamiętać, że nie każda zamieszczona tam czcionka posiada polskie znaki. Jak przekonać się, która je ma? W okienku Preview Text dopisujemy przed podaną sentencją ciąg polskich znaków, które nas interesują [ąćęłńóśźż] lub zamieniamy ją na najkrótsze w polskim języku znane zdanie, które zawiera wszystkie te litesy - "zażółć gęślą jaźń".


Od razu rzuca się w oczy, że pierwsza i druga czcionka na tym screenie nie posiadają polskich znaków, trzecia natomiast - posiada. Kiedy znajdziemy już odpowiadającą nam czcionkę, musimy wgrać ją na bloga. Jak to zrobić? Wybieramy ikonę quick-use, zaznaczoną na poniższym screenie:


Po przekierowaniu na stronę czcionki, zjeźdzamy na dół strony, szukając poniższych informacji:


Zacznę od końca, a więc od punktu "4. Integrate the fonts into your CSS". Podany tam kod, to gotowa formuła na czcionkę do naszego szablonu - wystarczy dopasować odpowiedni selektor. Dla przykładu, zdefiniowanie tytuł postu z naszą czcionką wyglądałby tak:

h3.post-title {font-family: 'Audiowide', cursive;}

Nic trudnego, prawda? Teraz przechodzimy do zakotwiczenia naszej czcionki w naszym blogu. Posłuży nam w tym kod z punktu "3. Add this code to your website". Jak widać, mamy tam trzy sposoby, ja przedstawię ten podstawowy.

Wchodzimy w edycję HTML naszego kodu [zaplecze > szablon > edytuj kod HTML] i odszukujemy naszą sekcję head. Najprościej będzie wcisnąć klawisze ctrl + f i wpisać w oknie wyszukiwania </head> - w ten sposób znajdziemy znacznik, nad którym będziemy umieszczać nasz kod.

Wracamy na Google Fonts, kopiujemy kod z punktu trzeciego i umieszkamy go przed zamknięciem sekcji nagłówkowej. Niestety w takiej formie blogger go nie przyjmie - potrzebujemy jeszcze kilku modyfikacji.

Podstawowy kod wygląda następująco:

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

Przy próbie jego zapisania, pojawi nam się komunikat "Błąd podczas analizowania pliku XML, wiersz (...), kolumna (...): The element type "link" must be terminated by the matching end-tag "</link>""

A więc nie zastanawiając się długo, zamykamy nasz tag. Kod będzie wyglądał więc następujco:

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

Zmartwię Was - ale to jeszcze nie koniec. Tak zainstalowana czcionka, choć poprawnie, nie posiada poslkich znaków. Co zrobić, aby je dodać? Znów musimy lekko przekształcić nasz kod. Tuż po nazwie czcionki, musimy dodać "&amp;subset=latin,latin-ext". Nasz kod będzie więc wyglądał następująco:

<link href='http://fonts.googleapis.com/css?family=Audiowide&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'></link>

Zapisujemy szablon i... gotowe! Możemy cieszyć się nową czcionką z polskimi znakami na naszym blogu!

23 komentarze

  1. Jestem pod wrażeniem, świetna instrukcja!

    OdpowiedzUsuń
    Odpowiedzi
    1. Starałam się, żeby była jak najbardziej przejrzysta. (:

      Usuń
  2. Bardzo dziękuję, autorze poradnika, jesteś genialny!

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie ma za co i polecam się na przyszłość!

      Usuń
  3. Kurczę a mnie to w ogóle nie działa :( Pomocy. Kiedy wklejam wszystko jak należy to "zamknięty link" wraz z " zamkniętym head" świecą na czerwono a jak próbuję zapisać to wyskakuje komunikat :
    Błąd podczas analizowania pliku XML, wiersz 771, kolumna 69: The reference to entity "subset" must end with the ';' delimiter.
    I co teraz ? Wszystko mam wpisane jak powinno być :(

    OdpowiedzUsuń
    Odpowiedzi
    1. Kruca walczę z tym samym, i z lekka mam już szalej. Ałtorze pomusz!

      Usuń
    2. Ten komentarz został usunięty przez autora.

      Usuń
    3. Dodajcie "amp;" między "&" a "subset". :)

      Usuń
  4. Tyle czasu szukałam takiej instrukcji i męczyłam się z tymi czcionkami! Oh, dziękuję :D Znalazłam bloga przypadkiem, ale coś czuję, że będę częstym gościem :D

    OdpowiedzUsuń
  5. :) dzięki za pomocną instrukcję!

    OdpowiedzUsuń
  6. NIE UDAŁO MI SIE..POMOŻE KTOŚ??? bo nwm czy w dobre miejsce dodałam link i-.-

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeśli dobrze i ze zrozumieniem przeczytałaś powyższe instrukcje - nie powinno być żadnego problemu. Zamiast panikować, proszę prześledzić wszystkie kroki raz jeszcze i upewnić się czy wklejałaś nad czy pod itp. Google wszystko podaje jak na tacy. Daj znać jak poszło! :)

      Usuń
  7. czemu te obrazki się nie wyświetlają?

    OdpowiedzUsuń
    Odpowiedzi
    1. Bo nie są potrzebne nikomu do szczęścia. :) A tak na serio: poprzednie wygasły, a nie zaszła jeszcze potrzeba, ażeby ktoś kompletnie nie rozumiał treści i trzeba mu było to rysować. Jak będzie czas, to poprzeglądam starsze instrukcje i zaktualizuję co trzeba. Na razie nie jest źle. :)

      Usuń
  8. A co zrobić jak chcemy dodać czcionkę, która nie jest na google fonts?

    OdpowiedzUsuń
    Odpowiedzi
    1. To znaczy, gdzie jest? :) Można poszukać w internetach instrukcji typu 'how to add any font to website' itp. Ja się jednak w takie zabawy nie angażuję, bo jeszcze w GoogleFonts nie przekopałam wszystkich jaskiń. ;)

      Usuń
  9. Dziękuję! Jasno i przejrzyście, tego mi było trzeba. Zainstalowałam wcześniej czcionki, ale nie było polskich znaków, a tu wszytko wyjaśnione. Jeszcze raz dziękuję! :)

    OdpowiedzUsuń
  10. Świetna instrukcja! Skorzystałam i wszystko działa.Dziękuje!

    OdpowiedzUsuń
  11. Świetna instrukcja. Mam jednak problem. Czcionka, którą dodałam nie wyświetla się w kilku miejscach: archiwum bloga, lista obserwowanych blogów, strony. Czy mogę prosić o podpowiedź? Dodam,że pierwszy raz grzebię w szablonie, więc nawet oczywistości mogą być dla mnie czarną magią - pewnie dlatego coś mi nie gra :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie wiem gdzie już ją ustawiłaś.
      Spróbuj wymusić jej użycie w lewej/prawej kolumnie (zależnie gdzie znajdują się wymienione przez Ciebie gadżety):
      .column-left-inner/.column-right-inner {font-family: 'nazwa czcionki'!important;}

      Usuń
    2. Dziękuję za odpowiedź :* Niestety nie zadziałało :/ Coś musiałam wcześniej namieszać :(

      Usuń