Jak změnit font CSS?

Proměňte typografii webu: Průvodce pravidlem @font-face v CSS

Chcete dodat svému webu osobitý vzhled a odlišit se od konkurence? Klíčem k vizuální identitě je typografie. Použití vlastních fontů může výrazně ovlivnit dojem, který váš web na návštěvníky zanechá. V tomto článku se zaměříme na to, jak elegantně a efektivně implementovat vlastní fonty pomocí pravidla @font-face v CSS.

Zatímco dříve byl výběr fontů na webu omezený, dnes nám CSS3 nabízí mocný nástroj @font-face, který otevírá dveře k neomezeným možnostem. S jeho pomocí můžete integrovat prakticky jakýkoli font, ať už se jedná o elegantní serif, moderní sans-serif nebo hravý handwritten font.

Jak na to?

Základem je definovat pravidlo @font-face uvnitř vašeho CSS souboru (ideálně v samostatném souboru pro fonty, pro lepší organizaci). Uvnitř tohoto pravidla specifikujete vlastnosti fontu, které prohlížeči sdělí, jak s ním má pracovat.

Zde je příklad základní implementace:

@font-face {
  font-family: 'MyCustomFont'; /* Unikátní název fontu */
  src: url('cesta/k/fontu.woff2') format('woff2'), /* Moderní formát s dobrou kompresí */
       url('cesta/k/fontu.woff') format('woff'), /* Starší, ale stále široce podporovaný formát */
       url('cesta/k/fontu.ttf') format('ttf'); /* TrueType font */
  font-weight: 400; /* Normální tloušťka */
  font-style: normal; /* Normální styl */
}

Rozklad jednotlivých částí:

• font-family:: Zde definujete název, pod kterým budete font ve svém CSS kódu používat. Zvolte si unikátní a popisný název, například 'MyCustomFont'.

• src:: Nejdůležitější část - cesta k souboru s fontem. Pro maximální kompatibilitu a výkon je doporučeno uvést více formátů fontu, seřazených od nejmodernějšího po starší. WOFF2 a WOFF jsou preferované pro svou kompresi a podporu v moderních prohlížečích. TTF je starší formát, který je stále široce podporovaný.

• format(): Specifikuje formát fontu. Pomáhá prohlížeči rychleji identifikovat správný formát a zabraňuje zbytečnému stahování nepodporovaných souborů.

• font-weight:: Určuje tloušťku fontu (např. 400 pro normální, 700 pro tučný).

• font-style:: Definuje styl fontu (např. normal, italic, oblique).

Použití fontu

Po definování pravidla @font-face můžete font použít stejně jako jakýkoli jiný systémový font:

body {
  font-family: 'MyCustomFont', sans-serif; /* Použití vlastního fontu s fallbackem na sans-serif */
}

Důležité: Nezapomeňte na fallback font (v tomto případě sans-serif), který se použije v případě, že vlastní font se nepodaří načíst.

S pravidlem @font-face máte plnou kontrolu nad typografií vašeho webu. Experimentujte s různými fonty a dodejte svému projektu jedinečný charakter.