Od provozovatele projektu Rychlost.CZ

Google Fonts - Google API a služby

vydáno: 04.05.2016, seriál: Google API a služby | komentářů: 0

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: