HTML - help

Česká písma pro webdesignéry převzato (a upraveno) z webu http://misc.maly.cz/webfonts.php

Seznam z podzimu 2012 obsahuje písma z katalogu Google Web Fonts, která jsou zdarma k použití na webových stránkách a neměly by mít problém s českou diakritikou. Tato písma byla uvolněna po dohodě v roce 2010 mezi Explorerem, Firefoxem a Operou a jsou dostupná ve formátu woff (Web Open Font Format). Tento formát by měl být tedy bez problémů podporován prohlížeči IE8, Firefox 3.6, Chrome 6 a Opera 10 - a nadále i jejich vyššími verzemi. Dá se předpokládat, že i ostatní prohlížeče pro tento typ fontů budou mít (nebo již mají) podporu.
(původní seznam byl delší, ale vyřadil jsem některé problematické fonty nespolupracující s českými znaky ve Firefoxu a Safari.)

<link  href="http://fonts.googleapis.com/css?family=Bevan:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Bevan", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<style>
body { font-family:"Cantarell", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Covered+By+Your+Grace:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Covered By Your Grace", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Crimson+Text:regular,400italic,600,600italic,700,700italic" rel="stylesheet" type="text/css">
<style>
body { font-family:"Crimson Text", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Crushed:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Crushed", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Droid+Sans+Mono:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Droid Sans Mono", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Goudy Bookletter 1911", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica:regular,italic" rel="stylesheet" type="text/css">
<style>
body { font-family:"IM Fell DW Pica", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"IM Fell DW Pica SC", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=IM+Fell+Double+Pica:regular,italic" rel="stylesheet" type="text/css">
<style>
body { font-family:"IM Fell Double Pica", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=IM+Fell+Double+Pica+SC:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"IM Fell Double Pica SC", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=IM+Fell+English:regular,italic" rel="stylesheet" type="text/css">
<style>
body { font-family:"IM Fell English", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=IM+Fell+English+SC:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"IM Fell English SC", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=IM+Fell+French+Canon:regular,italic" rel="stylesheet" type="text/css">
<style>
body { font-family:"IM Fell French Canon", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=IM+Fell+French+Canon+SC:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"IM Fell French Canon SC", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=IM+Fell+Great+Primer:regular,italic" rel="stylesheet" type="text/css">
<style>
body { font-family:"IM Fell Great Primer", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=IM+Fell+Great+Primer+SC:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"IM Fell Great Primer SC", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Inconsolata:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Inconsolata", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Indie+Flower:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Indie Flower", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Just+Another+Hand:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Just Another Hand", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Just Me Again Down Here", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Luckiest+Guy:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Luckiest Guy", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Maiden+Orange:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Maiden Orange", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT:regular,italic" rel="stylesheet" type="text/css">
<style>
body { font-family:"OFL Sorts Mill Goudy TT", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Oswald:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Oswald", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Radley:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Radley", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Syncopate:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Syncopate", serif;}
</style>

<link  href="http://fonts.googleapis.com/css?family=Terminal+Dosis+Light:regular" rel="stylesheet" type="text/css">
<style>
body { font-family:"Terminal Dosis Light", serif;}
</style>