seowordpress.pl Porady dotyczące SEO i Wordpress'a

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ł.

159 artykułów w bazie

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

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.

1. Strona Google Fonts

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.

2 komentarze

    • Często się składa, że najlepsze rozwiązania to proste rozwiązania. Niewątpliwie jest to swego rodzaju uogólnienie, ale jakby nie patrzeć, ten tekst może posłużyć za dowód. Tak poza tym dziękuję za pomoc Panie Januszu.

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="">

Oferuję szereg usług związanych z WordpressemSPRAWDŹ OFERTĘ
Przeczytaj inne:
Redukcja współczynnika odrzuceń dzięki Reduce Bounce Rate

Dzisiejszy artykuł będzie poświęcony wtyczce do Wordpressa o nazwie: Reduce Bounce Rate, która w "magiczny" sposób obniży nam w Google...

Zamknij