Czego szukasz?

Jeżeli szukasz odpowiedzi na pytania związane z SEO lub Wordpressem wpisz frazę i czekaj na podpowiedzi lub kliknij enter! Wyniki pokazują także linki do zewnętrznych źródeł.

161 artykułów w bazie

Jak korzystać z fontów Google na stronie www?

1

Jeśli prowadzicie Państwo blog, to na pewno używacie różnych trików do formatowania wpisów, aby one w najlepszy sposób dotarły do czytelników. Jednak, wybór kolorów, pogrubienie i podkreślenie oraz dodanie odstępów mogą nie mieć żadnego efektu, jeśli wybraliście zły font dla zawartości tekstowych.

Dziś pokażemy prosty sposób, który bez pomocy wtyczek pozwoli podłączyć stylowe fonty Google, które będą działać dla wszystkich użytkowników bez względu na wybraną przeglądarkę internetową.
Na pewno już słyszeliście Państwo o fontach Google. Informacja o nich często znajduje się w opisach motywów, że odpowiednia templatka wspiera fonty webowe Google. Gdy jesteście Państwo osobami początkującymi na pewno zastanawialiście się czym tak naprawdę są czcionki Google? Jest to zbiór fontów przeznaczonych do dowolnego użytku. One posiadają licencję open source, w związku z czym bez żadnych zastrzeżeń możemy umieszczać je na stronach internetowych czy też wykorzystywać w projektach graficznych. Kolejną zaletą serwisu Google jest szeroki wybór fontów, w tym z polskimi literówkami, oraz ich wsparcie przez wszystkie popularne przeglądarki internetowe.

Powiedzmy, że nas zainteresował font Raleway. Możemy użyć go bez żadnych dodatkowych dostosowań. Jednak serwis Google pozwala ustawić różne wersji grubości. Dla przykładu wybierzemy znaczenie medium 500 (rys. 2).

2. Ustawienie grubości dla fontu

Teraz możemy przejść do sekcji Emded (Osadzić) i skopiować odnośnik do wybranego fontu. Jest to https://fonts.googleapis.com/css?family=Raleway:500.

Dlatego aby dodać powyższy kod na stronę, należy w plik funkcje motywu używanego domyślnie wstawić poniższy kod:

Gdzie wp_register_style to funkcja do rejestracje styłów, a wp_enqueue_style – funkcja do załączania stylów.

Zatem przejdziemy do pliku functions.php. Skorzystamy się z standardowego edytora w sekcji Wygląd (rys. 3).

Edycja pliku functions.php

Na końcu tego pliku wstawimy powyższy kod i zapisujemy zmiany.

Teraz możemy przejść do wpisu i użyć font Raleway. Dlatego należy skorzystać się ze znaczniku <span>.: <span style=”font-family: ‚Raleway’;”>Zawartość</span>. W naszym przypadku przykładowy wpis wygląda tak (rys. 4, 5):

4. Wyróżnienie akapitu za pomocą fontu Raleway

5. Wyróżnienie akapitu za pomocą fontu Raleway

Jak widać z rysunków 4 i 5, do drugiego akapitu zastosowaliśmy font Raleway. Odpowiedni kawałek tekstu teraz się wyróżnia od reszty.  A więc podane rozwiązanie działa poprawnie.

Jeśli chcemy podłączyć inne fonty, np. Open Sans i Roboto, należy dodać dodatkowe linijki do funkcji wph_add_google_fonts():

Po analogii możecie dodawać dowolne inne fonty z serwisu Google.

Podsumowanie

Za pomocą dzisiejszego rozwiązania będą Państwo mogli dodawać ciekawe fonty na bloga i używać ich do różnych zawartości tekstowych. Liczba czcionek na serwisie Google szybko się zwiększa, dlatego na pewno znajdziecie coś ciekawe dla siebie. I co jest najważniejsze, nie musicie stosować żadnych dodatkowych wtyczek. Wystarczy jeden raz dodać font i dalej korzystać się z niego na stronie.

Prosimy zwrócić uwagę, że najlepiej zachowywać zmiany do pliku functions.php w motywie potomnym. Wtedy po odnowieniu templatki nie stracicie ich.

Avatar

O Janusz Kamiński

Specjalista działu marketingu firmy TemplateMonster. W branży IT pracuje od 5 lat. Posiada doświadczenie w SEO, marketingu internetowym. Oprócz tego interesuje się projektowaniem internetowym.
  • Link Assistant

  • Budowanie linków
  • Local Machine
  • Budowanie linków nigdy nie było prostrze. Setki możliwości linków za jednym kliknięciem.
  • Rank Tracker

  • Sprawdzanie pozycji słów kluczowych
  • Local Machine
  • Jeśli potrzebujesz narzędzia do sprawdzania rankingu słów kluczowych zapewniającego nieograniczoną ilość danych - wybierz Rank Tracker.
  • SEMRush

  • Profesjonalna platforma SEO
  • Online
  • SEMrush oferuje rozwiązania dla SEO, PPC, treści, mediów społecznościowych i badań konkurencyjnych.
  • Brand24

  • Monitorowanie reputacji i śledzenie marki
  • Online
  • Brand24 zapewnia dostęp do informacji o Twojej marce.

Zostaw odpowiedź

Email nie będzie publikowany. Wymagane pola są oznaczone *

Możesz używać tych tagów HTML <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Przeczytaj poprzedni wpis:
edugrafiapl
Porady dotyczące optymalizacji obrazków w WordPress

Szybkość witryny w ostatnim czasie ma co raz większe znaczenie w temacie optymalizacji stron oraz pozycjonowania. Samo Google oficjalne potwierdziło...

Zamknij