8 czerwca 2012

Jak zmienić czcionki w blogu na inne niż w projektancie szablonów + polskie znaki w bloggerze

 Projektant szablonów oferuje różnego rodzaju czcionki. Niektóre z nich nie mają wcale polskich znaków. W rezultacie są czcionki, które nie wyświetlają polskich liter:
(Czcionka lobster)

Photobucket


Pokażę Wam nie tylko jak sprawić żeby niektóre czcionki z projektanta szablonów miały polskie znaki, ale także jak zastosować inne fajne czcionki z Web Google fonts :)


Dla porównania:

Photobucket
Photobucket


Korzystanie z tej funkcji jest proste:
1. wchodzimy na stronę : http://www.google.com/webfonts#
2.  w okienku obok: Preview Text: wpisujemy ciągiem wszystkie zmiękczenia polskie:


Photobucket

Klikamy zakładkę "Paragraph"

Photobucket


Zmiękczenia nasze pojawią się na samej górze przykładowego tekstu - jeżeli zmiękczenie jest inną czcionką w podglądzie niż reszta tekstu oznacza to że czcionka ta NIE MA polskich znaków.



Photobucket


Szukamy odpowiadającej nam czcionki :)

Znaleźliśmy naszą czcionkę - u mnie:  LOBSTER
Klikamy strzałkę w kwadraciku

Photobucket

Otwiera się nam strona fonta. Zjeżdżamy lekko w dół aż znajdziemy się w tym miejscu:


Photobucket

Robimy kopię zapasową naszego szablonu! (tu: http://hafija-background.blogspot.com/2012/08/jak-pobrac-peny-szablon-do-edycji.html)

Kopiujemy zawartość okienka numer  1.
otwieramy szablon bloga, szukamy w kodzie: </head>
(TU: http://hafija-background.blogspot.com/2013/08/jak-wyszukac-kod-w-szablonie.html)

NAD tą linijką wklejamy kod z okienka numer jeden. Następnie modyfikujemy go w następujący sposób:
przed:

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

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

po nazwie czcionki wklejamy:  
&amp;subset=latin,latin-ext
a na końcu kodu dodajemy
</link>
(tak postępujemy z każdą inną czcionką:

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

I. zmiana czcionki tytułu posta:

Photobucket



Kopiujemy kod z okienka numer dwa:

W kodzie html bloga szukamy:
h3.post-title
i zmieniamy:
 font: $(post.title.font);
na:
font-family: 'Lobster', cursive;
zapisujemy szablon.

II. zmiana innych czcionek bloga:
W ten sposób możemy zmienić wszystkie czcionki w blogu zamieniając poniższe elementy na kod wybranej czcionki:  (przykładowo:  font-family: 'Lobster', cursive;)
nagłówka:
  font: $(header.font);
czcionek w body bloga:
  font: $(body.font);
widgetu stron:
font: $(tabs.font);
widgetów i dat:
 font: $(widget.title.font);
posta:
font: $(post.body.font);

Możemy używać wielu czcionek do różnych elementów. Aby czcionka była aktywna na blogu zawsze należy wkleić powyżej </head> zmieniony kod z pierwszego okienka czcionki, a następnie wkleić kod z okienka numer dwa w miejsce w którym ma być zmieniona czcionka.



Photobucket

oto przykład:

Photobucket

100 komentarzy:

  1. Uwielbiam Twoje info na temat blogów! Jesteś prawdziwą skarbnicą blogowej wiedzy :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Czy może mi ktoś pomóc ? Odkąd wprowadziliśmy na naszym blogu nową czcionkę zgodnie z instrukcją powyżej w walidatorze css: http://jigsaw.w3.org/css-validator/, mamy aż 38 błędów. Nie znam się na htmlu mogłabyś mi powiedzieć jak chociaż wrócić do ustawień domyślnych ? Boję się, że taka ilość błędów może mieć wpływ na pozycjonowanie strony.

      Usuń
    2. Trzeba przywrócić kopię zapasową szablonu

      Usuń
    3. Niestety nie mam takiej możliwości. Co gorsza liczba błędów w przeciągu jednego dnia znacznie się zwiększyła i teraz jest ich aż 183 ( dodałam jedną czcionkę więcej plus zmieniłam kolor tytułu postów). Czy dałoby się przywrócić bloga do pierwotnej postaci tak aby wgrać jeszcze raz wszystko po kolei ?

      Usuń
    4. Czcionka "Great Vibes" http://rekodzielozosi.blogspot.com Wesołych Świąt :)

      Usuń
  2. zrobiłam literowkę i jest "ukąsic" zamiast "ukąsić" to nie wina czcionki a mojego pośpiechu

    OdpowiedzUsuń
  3. A ja mam pytanie z innej beczki: jak to zrobić, aby tekst posta był wyśrodkowany lub wyjustowany?

    OdpowiedzUsuń
    Odpowiedzi
    1. Możesz ręcznie przy pisaniu każdego posta albo domyślnie:

      Znajdujesz w kodzie:

      .post-body {

      i po nim wklejasz:

      text-align: center; <-tekst wyśrodkowany

      lub:

      text-align: justify; <- tekst wyjustowany

      Usuń
    2. Mam taki problem, nie ma u mnie w szablonie .post-body, samo body i gdy tam justuje nagłówki też to obejmuje. Mogę dopisać .post-body? jeśli tak, to gdzie?

      Usuń
    3. Dopisałam już, działa :)

      Usuń
  4. Nie wiem co robię nie tak, ale u mnie to nie działa:(

    OdpowiedzUsuń
    Odpowiedzi
    1. U mnie też. Na html troszkę się znam i jakoś nie widzę bym zrobiła błąd :|
      Ale kto wie? :D

      Usuń
    2. Udało się. Błąd polegał na tym, że kodzie html mojego szablonu jets kilka h3.post-title i ciężko było wybrać pod którym dokonać zmian. Dokonałam pod 2 i dopiero przy tym drugim pojawiła się zmiana czcionki :)

      Usuń
  5. wyslij mi cały szablon na mail: hafija.baby@gmail.com

    OdpowiedzUsuń
  6. Dobrze, że jest taki blog jak twój!

    mam mały problem. Umieszczając zdjęcia na jednym blogów wklejają mi się z białym obramowaniem, a czasami wolałabym żeby przylegały do siebie. Byc może jest to banalna sprawa, ale moje dotychczasowe kombinacje są daremne. Mogłabyc pomóc?, z góry dziękuje:)
    Magda z kolorami.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Pobierz pełny szablon i wyślij do mnie na maila:
      hafija.baby@gmail.com, postaram się coś poradzić wieczorem - ma nie być obramowań tak?

      Usuń
  7. hmm, a jak się pobiera pełny szblon (uzywam dostepnych w blogu)

    OdpowiedzUsuń
  8. Dzięki za ten blog i za cenne wskazówki, które już powoli zaczynam wykorzystywać na swoim blogu. Twoje posty są dla mnie, kompletnego technofoba, bardzo pomocne :)

    OdpowiedzUsuń
  9. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  10. Prosto, jasno a całość bardzo przydatna. Pozdrawiam www.smartxtech.pl

    OdpowiedzUsuń
  11. Nie wychodzi mi :(
    Pomożesz mi?

    OdpowiedzUsuń
    Odpowiedzi
    1. Wyślij mi swój pełen szablon na hafija.baby@gmail.com

      Usuń
  12. Hafija Mi też nie wychodzi, a bardzo chciałbym na swoim blogu mieć czcionkę Comic Sans MS. Pomożesz?

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie ma czcionki Comic Sans w google fonts

      Usuń
    2. Och, jak ja się cieszę, że nie ma Comic Sans!

      Usuń
  13. a podobna jest? chciałbym czcionkę tego typu.

    OdpowiedzUsuń
  14. Chciałbym ogólnie czcionkę na blogu righteous. Na swojego bloga.

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeżeli chcesz żebym Ci pomogła postępuj zgodnie z instrukcjami w ogłoszeniu znajdującym się pod nagłówkiem

      Usuń
  15. Robię wszystko zgodnie z instrukcją i nic :(

    OdpowiedzUsuń
  16. A czy da się tą czcionkę powiększyć? Bo wybrałam Lobster, i jest mega mała, tytuł posta w ogóle się nie wyróżnia vide: laframbuesa.blogspot.com .

    OdpowiedzUsuń
    Odpowiedzi
    1. Da się, :
      h3.post-title {font-weight: normal;
      font-size: 24px;} i zmieniasz 24px zgodnie z upodobaniem

      Usuń
    2. Gracias! Szukałam, ale nie znalazłam, gapa ze mnie ;)

      Usuń
  17. Joanno - w takim razie musisz zacząć od czystego szablonu - następnym razem zrób kopię zapasową.

    OdpowiedzUsuń
  18. Można w jakiś sposób użyć tak czcionek z dafont.com? Nie zależy mi na polskich znakach

    OdpowiedzUsuń
  19. Postępuję według wskazówek, ale niestety wybrana przeze mnie czcionka nie pokazuje się w bloggerze. Gdy umieszczam skopiowany kod do czcionki, na której jest pokazany przykład, tj. Lobster, pokazują się polskie znaki, a gdy wklejam wybraną Parisienne niestety nie widzę jej.
    Wklejam dokładnie taki sam kod, tylko podmieniam nazwę czcionki. Co w takim razie robię źle? Mogłabym liczyć na pomoc?

    OdpowiedzUsuń
  20. Witaj, już sobie poradziłam i wszystko działa. Poczekam na zmiany po Nowym Roku. Dziękuję za wszystkie cenne wskazówki, jakie znalazłam na Twoim bolgu :o))

    OdpowiedzUsuń
  21. zmieniłam czcionki swoih tytułów postów, ale teraz nie potrafię ich powiększyć :( da się to zrobić w htmlu bo tak ręcznie w "dostosuj" nie wychodzi...

    OdpowiedzUsuń
  22. ojej przepraszam za spam, widzę, że powyżej komuś to tłumaczyłaś!

    OdpowiedzUsuń
  23. faktycznie jesteś skarbnicą wiedzy! Szkoda, że ja takiej nie posiadam, to na pewno już dawno zrobiła bym sobie szablon bloga, który siedzi w mojej głowie, a nijak nie umiem go zrobić :(

    Pozdrawiam :)

    OdpowiedzUsuń
  24. Gdy dopisuję do kodu &subset=latin,latin-ext' pojawia się komunikat o błędzie:
    Błąd podczas analizowania pliku XML, wiersz 7, kolumna 81: The reference to entity "subset" must end with the ';' delimiter.

    Rozumiem, że to rozszerzenie kodu (&subset=latin,latin-ext') daje polskie znaki?


    OdpowiedzUsuń
  25. Wyszukałam h3.post-title w kodzie, ale tam nie ma czegoś takiego jak font: $(post.title.font); Jest :



    Jedna, wielka bezradność ...

    OdpowiedzUsuń
  26. Mam takie samo pytanie co Frambuesa tylko tyczaca sie czcionki w body bloga,ja ja powiekszyc?

    OdpowiedzUsuń
  27. hey, szukałem tego fontu, który używany jest w postach i nie znalazłem - jest szansa, że nazywa się inaczej niż podałaś?

    OdpowiedzUsuń
  28. Uff... poradziłam sobie. nie miałam w kodzie frazy: font: $(post.title.font); więc jej nie użyłam. Za to wpadłam na pomysł hahah :) W kodzie miałam takie coś: "normal normal 24px Dancing Script"/> - Dancing Scrip nazwa mojej czcionki posta, zmieniłam ten fragment na: "normal normal 24px La Belle Aurore"/> i mi wyszło!
    Polecam!

    OdpowiedzUsuń
  29. Dziękuję za umieszczenie tego tutoriala, prawie wszystko mi się udało, ale nie mogę znaleźć font: $(post.body.font); w wyszukiwarce zaznacza mi jako czerwony kolor i że tego nie ma w moim szablonie. Proszę o pomoc

    OdpowiedzUsuń
  30. Witaj! Chyba coś mi się stało z bloggerem, bo w ogóle nie mogę zmienić już na żadną inną czcionkę, nie mam pojęcia dlaczego :( Spotkałaś się już z czymś takim?

    OdpowiedzUsuń
  31. Próbuję to zmienić, jednak w moim kodzie html w ogóle nie mam takiego fragmentu jak wskazany do zamiany: font: $(post.title.font); i w tym miejscu utknęłam :(

    OdpowiedzUsuń
  32. Wszystko działa okej, gdyby nie to, że nazwy widgetów i dat, są po prostu ogromne. Nie wiem jak mam to zmniejszyć, ;c. Jest na to jakaś rada?

    OdpowiedzUsuń
  33. Robię wszystko po kolei i nie działa ;(

    OdpowiedzUsuń
  34. Mam takie pytanie: jak zmienić czcionkę na stronach? Ale tylko tekstu. Próbowałam zmienić w edytorze


    span style="font-family: Times, "Times New Roman", serif;">Prolog

    Times na to: font-family: 'Great Vibes', cursive;

    Ale wtedy zmienia mi się cała strona łącznie z datą, komentarzami... I jeszcze, jak mogę zmienić rozmiar czcionki? Bo po zmianie ta czcionka jest malutka, a ja nie umiem znaleźć w kodzie odpowiedniego fragmentu.

    Będę wdzięczna za pomoc.

    OdpowiedzUsuń
    Odpowiedzi
    1. No nie, wycofuję to. Pogrzebałam trochę i się okazało, że zmieniając czcionkę tytułu posta, zmieniam także czcionkę przy komentarzach. Cóż trudno, chociaż nie odpowiada mi, że to potem takie wielkie zostaje. ;/

      Ale pytanie o zmianę rozmiaru czcionki w postach i na stronach zostaje, bo dalej nie wiem.

      Usuń
  35. U mnie także przy zastosowaniu kodu wyświetla się czcionka Comic Sans MS, a wszystko robiłam wg instrukcji .___.

    OdpowiedzUsuń
  36. Nie potrafię tego zrobić.. mogę prosić o pomoc ?
    http://wesoleszydelko.blogspot.com/

    OdpowiedzUsuń
  37. Zrobiłam to... I co? I nic! Tylko nad paskiem nawigacyjnym pokazuje ten kod! Zobacz se : pomyslklaudii.blogspot.com
    I nie mogę tego naprawić!

    OdpowiedzUsuń
  38. U mnie nie działa ;C Błąd " NULL "

    OdpowiedzUsuń
  39. Proszę, powiedz mi, czy istnieje możliwość wgrania czcionek z dysku komputera?:)

    OdpowiedzUsuń
  40. Bawiłam się czcionką w kodzie HTML. Zrobiłam kopię zapasową bloga (bloga mam na bloggerze), lecz gdy potem weszłam w kody CSS, wszystkie które miałam zniknęły. Przywróciłam kopię zapasową, lecz w dalszym ciągu ich nie widać. Oczywiście formatowanie CSS pozostało, jednak wolałabym widzieć te kody.. POMOCY. Jak sprawić, żebym znów mogła je zobaczyć?

    OdpowiedzUsuń
  41. A jak zmienić czcionkę samych komentarzy? Da się w ogóle?

    OdpowiedzUsuń
  42. Walczę z tym od ponad 5h:( nie chce działać ;(

    OdpowiedzUsuń
  43. Mam ten sam problem co ktoś wyżej, zamiast mojej czcionki mam Comic Sans :(

    OdpowiedzUsuń
  44. Bardzo mi pomogłaś! Dziękuje;)

    OdpowiedzUsuń
  45. a można te zasdy zastosować do TYTUŁU BLOGA? Jestem w tych sprawach zielonach... próbuję, ale mi nie wychodzi...

    OdpowiedzUsuń
  46. W ogóle to nie chce działać :< Próbowałam tysiące razy i w ogóle nie chce wyjść, pomocy!

    OdpowiedzUsuń
  47. Świetny blog! Konkrety, to się ceni. Ale problem mam.

    Najpierw, kiedy wklejam (1), jak chce zapisać, nie mogę, bo mam komunikat, że:
    Błąd podczas analizowania pliku XML, wiersz 561, kolumna 61: Element type "link" must be followed by either attribute specifications, ">" or "/>".

    dodałam więc ">"

    Zapisałam i teraz kiedy wyświetlam stronę mam:
    href='http://fonts.googleapis.com/css?family=Alegreya'&subset=latin,latin-ext rel='stylesheet' type='text/css'>

    Jak to usunąć? Gdzie popełniłam błąd? Oto jest pytanie!

    OdpowiedzUsuń
  48. Wszystko super. Działa, ale po tych zmianach nie mogę zmienić wielkości czcionki... Nie wiem dlaczego. Usunęłam więc zmiany i mam brzydkie polskie znaki. :(

    OdpowiedzUsuń
  49. Mogłabyś mi pomóc? http://aleeex-aleex-alex.blogspot.com/ Jak widać na pierwszym poście jest inna czcionka niż na pozostałych i nie da się tego nigdzie zmienić. Chodzi jeszcze o to, że nie działają polskie znaki :) Z góry dziękuję i życzę wesołych świąt :*

    OdpowiedzUsuń
  50. Hafija! HELP!
    Wszędzie szukam i albo szukać nie umiem, albo nie ma- jak zmienić wielkość czcionki w linkach?
    Zerknij, proszę, na http://zwitkiemwplecaku.blogspot.com i sama zobaczysz, że wygląda to komicznie. Pomóż proszę :)

    OdpowiedzUsuń
  51. Dzięki. Na prawde przydatny post!

    OdpowiedzUsuń
  52. a wie ktoś może jak zmienić czcionkę w tytule bloga jak ustawiamy ?? :))
    ewentualnie jak zrobić jakiś fajny emblemat :))

    OdpowiedzUsuń
  53. dżizas, próbowałam to zmienić, z opisu wydaje się banalne. ale pomimo zastosowaniu wszystkiego jak należy, nie dzała, wyskaiwał błąd:
    Błąd podczas analizowania pliku XML, wiersz 634, kolumna 61: Element type "link" must be followed by either attribute specifications, ">" or "/>".

    anybody help me? Please!

    OdpowiedzUsuń
  54. a dodałaś po wklejeniu linijki pierwszego kodu? :)? Tylko to co w nawiasie pisze sie łącznie, bo inaczej komentarza mi nie zaakceptuje ;/

    OdpowiedzUsuń
  55. A powiedz mi jak zmieniać rozmiary ten nowej czcionki? Czcionka działa, jest super, ale jest za duża w niektórych miejscach a w kreatorze już nie da się tego zrobić...

    OdpowiedzUsuń
    Odpowiedzi
    1. spróbuj po kodzie z okienka nr 2 wpisać:
      font-size: 20px;

      na przykładzie z tutorialu:

      font-family: 'Lobster', cursive;
      font-size: 20px;

      wartościami możesz oczywiście manewrować według potrzeb :) też długo szukałam, ale znalazłam :D

      Usuń
  56. Bardzo Ci dziękuję, w końcu mam polskie znaki w tytule postów:)

    OdpowiedzUsuń
  57. Jakoś u mnie to nie działa, tylko nie wiem czemu. http://polskie-skoki.blogspot.com/

    OdpowiedzUsuń
  58. Chciałabym się zapytać ~ czy da się zrobić tak, aby w każdym poście pierwsza litera owego postu była większa i z inną czcionką? :) Z góry dziękuje za odpowiedź ;D

    OdpowiedzUsuń
  59. Taaaaaaaak! :-) I jest ładnie!

    OdpowiedzUsuń
  60. Czemu każesz zamykać tag < link >, skoro można go potraktować jako tag samozamykający?

    http://www.w3.org/QA/Tips/use-links

    OdpowiedzUsuń
  61. Czemu każesz zamykać tag < link >, skoro można go potraktować jako samozamykający?

    http://www.w3.org/QA/Tips/use-links

    OdpowiedzUsuń
  62. Przy zapisywaniu szablonu każe mi zamykać < link > . Ja zamykam, ale potem nie dość, że czcionka nie działa, to jeszcze ta linijka z kodu wyświetla mi się na pasku nawigacyjnym! Tylko nagłówki postów mi się udały...

    OdpowiedzUsuń
  63. Witam! Dzięki Twoim tutorialom udało mi się stworzyć wiele rzeczy na moim blogu.
    Jednak mam problem i nigdzie nie mogę znaleźć sensownego rozwiązania, albo po prostu nie umiem szukać :D
    Otóż mam czcionkę, która niestety nie występuje Google fonts, ściągnęłam ją i mam ją na swoim komputerze. Bardzo chciałabym zastosować ją na moim blogu, jako czcionkę tytułów postów, linków ( w zasadzie wszystkiego prócz tekstu notki). Byłabym bardzo wdzięczna za pomoc :) Czekam na odpowiedź!

    OdpowiedzUsuń
    Odpowiedzi
    1. Hej, niestety nie można zastosować czcionki zainstalowanej na komputerze, ponieważ osoby nie posiadające tej czcionki u siebie nie będą mogły wyświetlić Twojego bloga.

      Usuń
  64. Mogłabyś mi pomóc? nie zaznacza się mi nic na żółto ;//

    OdpowiedzUsuń
  65. Nic mi nie wychodzi ;/ pomożesz?

    OdpowiedzUsuń
  66. A ja mam inne pytanie... Zmieniłam czcionkę, ale jak ją powiększyć, bo w tytule posta ledwo ją widać. Jest malutka.

    OdpowiedzUsuń
  67. A ja masz jeszcze inną zagwozdkę. Otóż dodaję fonty do bloga, wszystko pięknie działa póki nie przyjdzie otworzyć bloga z komputera który nie ma zainstalowanych tychże fontów na dysku. Wtedy używa zastępczych ale nawet nie koniecznie tych z listy. To normalne czy jednak coś nie działa?

    OdpowiedzUsuń
  68. Wiesz może jak zienić rozmiar czcionki tego typu?

    OdpowiedzUsuń
  69. działa! działa! działa juppi teraz troche pokombinowac i bedzie zajebiście

    OdpowiedzUsuń
  70. Zrobiłam wszystko jak trzeba, ale niestety nie wychodzi - na blogu wciąż jest problem z polskimi znakami, każda polska literka wyświetla się jako większa lub mniejsza od rozmiaru czcionki. Mogłabym prosić o pomoc?

    OdpowiedzUsuń
  71. Jednak mnie olśniło, okazało się że wersję bold również trzeba wgrać, bo inaczej wszędzie tam gdzie pogrubię tekst, polskie znaki będą mniejsze.

    OdpowiedzUsuń