Fonty Webowe


„Real sites are made with webfonts.”

Kilka fontów pobranych z Google Fonts:

Przerobić przykład z tej strony:

Mozilla Developer Network:

Can I use @font-face?

Fonty z ikonkami:

YES or NO to Faux Bolding

[YES to Faux Bold]

Zaczynamy od przykładu:

<!doctype html>
<html lang=pl>
    <meta charset=utf-8>
    <title>Say Yes to Faux Bolding</title>
    <link href='' rel='stylesheet'>
      body { font-family: 'Diplomata', serif; }
    <h1>Say Yes to Faux Bolding</h1>
    <p>Browsers can do terrible things to type.


h1, h2, h3 { font-weight: normal; font-family: 'Diplomata', serif; }
[NO to Faux Bold]

Ale takie rozwiązanie jest lepsze (tzw. duplicating @font-face rules trick: „tells the browser to use the same font file (specified with the src declaration) for both normal and bold font-weight when you apply the «DiplomataSCRegular» font-family”):

@font-face {
  font-family: DiplomataSCRegular;
  font-weight: bold;    /* get a bold fallback font when fallback happens */
  font-style:  normal;

  src: url('diplomatasc-regular.eot');
  src: url('diplomatasc-regular.eot') format('embedded-opentype'),
       url('diplomatasc-regular.woff') format('woff'),
       url('diplomatasc-regular.ttf') format('truetype'),
       url('diplomatasc-regular.svg#DiplomataSCRegular') format('svg');
h1, h2, h3 { font-family: DiplomataSCRegular, serif; }

Powyżej użyto, dla odmiany, fontu DiplomataSCRegular.

Uwaga: W katalogu css/faux-bold są pliki HTML ilustrujące to zagadnienie.