WebDev.wiki > Návody pro webmastery a vývojáře > Google Fonts

Google Fonts - Google API a služby

vydáno: 04.05.2016, seriál: Google API a služby

Obecně o Google fonts

Společnost Google nabízí na svých stránkách https://www.google.com/fonts k volnému použítí na web velké množství fontů. Jedná se o různá patková a bezpatková písma. Na stránkách lze pro náhled galerie fontů volit text, velikost písma a řazení dle popularity, datumu přidání a počtu stylů. Dále lze písma filtrovat dle podpory jazyků. Vybraný font si můžete poté vložit na web přes quick-use.

Vložení na web

Krok č.1 - v tomto kroku si zvolíte jaké tučnosti a styly chcete použít. Daný syl stačí zaškrtnout.

Krok č.2 - výběr podpory jazyka. Je nutné zvolit latin popř. latin extended pro českou diakritiku.

Krok č.3 - výběr způsobu vložení písma na web. Na výběr jsou možnosti:

Standart - odkaz do hlavičky webu <head> přes externí css.

@import - vložení kódu do css souboru pro import externích css písma.

Javascript - pro vložení javascriptu na web.

Krok č.4 - Integrace do CSS. Písmo je nutné vložit k css stylu přes font-family. Př.: font-family: 'Lato', sans-serif;

Zobrazit ukázku

Ukázka:

CSS

body {
    font-family: Arial,sans-serif;
    color: #000;
    font-family: 'Oswald', sans-serif;
}

Použité vlastnosti: font-family, color

HTML

<!DOCTYPE html>
<html lang="cs-CZ">
<head>
    <meta charset="utf-8">
    <title>Ukázka implementace Google fonts</title>
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300&subset=latin,latin-ext' rel='stylesheet' type='text/css'><!-- Vložené externí css pro písmo Oswald -->
</head>
<body>
<h1>Nadpis, který je fomátován Google fonts</h1>
<p>Odstavec, který je formátován Google fonts</p>
</body>
</html>

Použité tagy: <html>, <head>, <meta>, <title>, <link>, <body>, <h1>, <p>

Závěrem

Google fonts jsou ideální pro oživení Vašich www stránek designovými písmi. Integrace na web je otázkou pár kliků a zvládne jí i začínající kodér. Všechna písma jsou open source.

HTML: návody jak psát html tagy

CSS: návody na kaskádovité styly

Seriál Google API a služby

Přejít na následující kapitolu:Google Calendar >

Seznam všech článků seriálu:

Google Fonts
Google Calendar

Témata

Seriály