Jak dodać Google Fonts do strony

W tym poradniku pokażę Ci krok po kroku, jak dodać Google Fonts do strony HTML. Jednym z najprostszych sposobów na poprawę wyglądu swojej strony internetowej jest wdrożenie niestandardowego fontu. Google Fonts to darmowy serwis oferujący szeroką gamę fontów, które można łatwo zintegrować ze swoją stroną internetową.

Krok 1: Wybór Fontu na Google Fonts

Pierwszym krokiem jest wybór fontu, który chcesz użyć na swojej stronie. Oto jak to zrobić:

Wejdź na stronę Google Fonts.
Przeglądaj dostępne fonty. Możesz filtrować fonty według kategorii, takich jak Sans Serif, Serif, Display, Handwriting i Monospace.
Kliknij na wybrany font, aby zobaczyć więcej szczegółów i przykładowe zastosowania.
Po znalezieniu odpowiedniego fontu kliknij przycisk „Get font”.

Krok 2: Pobranie Kodu do Wstawienia w HTML

Po wybraniu fontu, Google Fonts wygeneruje kod, który należy dodać do swojej strony internetowej.

W panelu po prawej stronie kliknij przycisk „Get embed code”.
Skopiuj wygenerowany kod, który wygląda mniej więcej tak:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Krok 3: Dodanie Fontu Google do Pliku HTML

Następnie musisz dodać skopiowany kod do sekcji <head> swojego dokumentu HTML. Oto jak to zrobić:

Otwórz plik HTML w edytorze tekstu.
Wklej skopiowany kod wewnątrz sekcji <head>:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moja Strona</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Zawartość strony -->
</body>
</html>

Krok 4: Użycie Fontu w CSS

Po dodaniu fontu do HTML, możesz teraz użyć go w swoim pliku CSS. Oto jak to zrobić:

Otwórz plik CSS (np. style.css) w edytorze tekstu.
Dodaj regułę font-family, aby zastosować wybrany font do elementów na swojej stronie. Na przykład:

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

Możesz również stosować różne style fontów do różnych elementów:

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700; /* Bold */
}

p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Regular */
}

Alternatywne wczytywanie Google Fonts

W alternatywnej metodzie dodawania fontów Google możesz od razu dodać link do fontów Google w pliku CSS.

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700; /* Bold */
}

p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Regular */
}

Krok 5: Sprawdzenie i Testowanie

Po dokonaniu zmian w plikach HTML i CSS, zapisz je i otwórz swoją stronę w przeglądarce, aby upewnić się, że font został poprawnie załadowany i wygląda zgodnie z oczekiwaniami.

Przykład Pełnego Kodu HTML i CSS

Utwórz plik index.html i dodaj w nim kod:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moja Strona</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>Witamy na Mojej Stronie</h1>
    </header>
    <section>
        <p>To jest przykładowy tekst, który używa fontu Roboto.</p>
    </section>
</body>
</html>

W kolejnym pliku style.css dodaj:

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header {
    background: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

h1 {
    font-weight: 700; /* Bold */
    font-size: 2em;
}

p {
    font-weight: 400; /* Regular */
    font-size: 1em;
    padding: 20px;
}

Wskazówki i Dobre Praktyki

Używaj minimalnej liczby fontów – zbyt wiele różnych fontów może spowolnić ładowanie strony i wprowadzić chaos wizualny.
Kombinacja fontów – wybierz fonty, które dobrze się ze sobą komponują. Google Fonts często sugeruje kombinacje fontów.
Responsywność – upewnij się, że fonty wyglądają dobrze na różnych urządzeniach i rozdzielczościach.
Zgodność przeglądarek – sprawdź, czy wybrane fonty działają poprawnie we wszystkich popularnych przeglądarkach.