Skocz do zawartości
Pecetowicz Forum komputerowe

Jak dodać czcionkę z Google Fonts na swoją stronę


Rekomendowane odpowiedzi

Cześć wszystkim. Dzisiaj opiszę poradnik na temat używania czcionek z katalogu Google Fonts i jak dodać taką czcionkę na swoją stronę. Czcionek można używać za darmo na stronach internetowych oraz w dokumentach elektronicznych.

Jak znaleźć czcionkę w Google Fonts

Na początek przechodzimy do katalogu Google Fonts. Za pomocą filtrów szukamy interesującej nas czcionki. Filtry pozwolą nam sprecyzować kategorię, język czy właściwości czcionki. 

Ja dla przykładu wybrałem czcionkę Open Sans która jest bardzo popularna i używana na dużej ilości witryn.

Gdy jesteśmy już na stronie czcionki, zaznaczamy styl czcionki który nas interesuje. Styl czcionki określa grubość i pochylenie.

Ja wybrałem styl Light 300, Regular 400 oraz Bold 700. Po zaznaczeniu stylów czcionki pojawi nam się okno z możliwością implementacji czcionki na własnej stronie internetowej.

Jak dodać Google Fonts na stronie

Czcionkę możemy dodać na swoją stronę poprzez dwa dostępne sposoby. Najpopularniejszym sposobem jest dodanie czcionki za pomocą tagu <link>.

Kopiujemy kod z rubryki, a następnie wklejamy go pomiędzy tag <head>. 

W moim przypadku będzie to wyglądało tak:

<head>
<meta charset="utf-8">
<title>TYTUŁ....</title>
<!--TO JEST NAS KOD CZCIONKI KTÓRY TRZBEA WKLEIĆ-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<!--TO JEST NAS KOD CZCIONKI KTÓRY TRZBEA WKLEIĆ-->
</head>

Kolejnym krokiem jest zdefiniowanie czcionki w arkuszu CSS. Dodajemy poniższą regułę do tagu body lub innego w zależności gdzie chcemy użyć czcionki

body{
font-family: 'Open Sans', sans-serif;
}

Dodawanie czcionki poprzez motodę @import

W tej metodzie odwołanie do wybranej czcionki dodajemy w arkuszu .CSS. Kod najlepiej dodać na samej górze w naszym arkuszu. 

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

Można też dodać odwołanie poprzez tag <style> w kodzie HTML

<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
</style>

Następnie definiujemy czcionkę dodając właściwość font-family do naszego tagu czy klasy.

Polskie znaki w Google Fonts

Niektóre czcionki w katalogu Google Fonts obsługują wiele znaków (na przykład łacińskie, cyrylicy i greckie). W celu określenia, które znaki mają zostać pobrane, do adresu URL należy dołączyć parametr subset.

Jeżeli chcemy, aby nasza czcionka zawierała polskie znaki (tzw. ogonki) należy do parametru subset, dodać latin oraz latin-ext.

Na przykład, aby wymusić zbiór znaków łacińskich (w tym polskich) dla czcionki Open Sans, nasz adres URL powinien wyglądać następująco:

https://fonts.googleapis.com/css2?family=Open+Sans&subset=latin,latin-ext

Adres URL z wszystkimi parametrami łącznie ze stylem czcionki będzie wyglądał tak:

https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap&subset=latin,latin-ext

To wszystko. Mam nadzieję że poradnik wam się przyda. Nie zezwalam na kopiowanie treści na inne strony.

  • Lubię to! 2
Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • 7 lat później...
  • Założyciel

Zaktualizowałem poradnik i usunąłem sposób dodania czcionki przez Javascript bo dzisiaj nie jest już stosowany.

  • Lubię to! 1
Odnośnik do odpowiedzi
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...