W3.CSS Czcionki Google
Dzięki W3.CSS dodawanie nowych czcionek jest niezwykle łatwe.
- Bardzo łatwy w użyciu (tylko CSS i HTML)
- Nieograniczone korzystanie z zewnętrznych bibliotek czcionek (takich jak Google Fonts)
- Działa we wszystkich nowoczesnych przeglądarkach
To jest Roboto
To jest Sofia
Sofia w ogniu
Tworzenie sieci!
Tworzenie sieci!
Tworzenie sieci!
Tworzenie sieci!
Tworzenie sieci!
Korzystanie z czcionek Google
Czcionki Google są bezpłatne i mają do wyboru ponad 1000 czcionek.
W nagłówku swojej strony internetowej podaj link do czcionki Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
Następnie dodaj CSS informujący o tym, gdzie go używać:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
Inny przykład
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
Utwórz klasę czcionek
W nagłówku swojej strony internetowej podaj link do czcionki Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
Następnie utwórz klasę czcionek:
Przykład
.w3-sofia {
font-family: Sofia, cursive;
}
Na swojej stronie internetowej użyj klasy czcionek:
Przykład
<p class="w3-sofia">Making the Web!</p>
Tworzenie sieci!
Przykład
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
Tworzenie sieci!
Przykład
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Tworzenie sieci!
Przykład
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Tworzenie sieci!
Przykład
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Tworzenie sieci!