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

163 artykułów w bazie

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

3 min read" > 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.

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.

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:
forum-bb
Forum na WordPress, czyli jak zbudowac społeczność w obrębie swojej strony

Choć wiele osób postawiło krzyżyk na forach internetowych, istnieje pewna ich grupa, która ma się nadal nad wyraz dobrze. Dzieje...

Zamknij