HTML / CSS LEVEL 3

Teil 1 - Web Fonts

Was sind web fonts?

Eigene Schriften im Web einbinden
Systemunabhängig
Schriften werden über CSS eingebunden

Relevante CSS Eigenschaften

@font-face

Schriften laden und deklarieren

font-family

Schriftart zuweisen

http://jsbin.com/hozuzi/edit?html,css,output

Web Font Formate

https://css-tricks.com/snippets/css/using-font-face/

woff

Moderne browser

woff2

Moderne browser

svg

Alte Safari und iOS

eot

Alte Microsoft IE

ttf

Meisten Browser und alte aber viel zu gross

otf

Meisten Browser und alte mit ligatures

Best practice

Für alle was dabei...

@font-face {
  font-family: 'MyWebFont';
       /* IE9 Compat Modes */
  src: url('webfont.eot');
       /* IE6-IE8 */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), 
       /* Super Modern Browsers */
       url('webfont.woff2') format('woff2'), 
       /* Pretty Modern Browsers */
       url('webfont.woff') format('woff'), 
       /* Safari, Android, iOS */
       url('webfont.ttf')  format('truetype'), 
       /* Legacy iOS */
       url('webfont.svg#svgFontName') format('svg');
}

Font Synthesis

Ein typographisches no-go!

http://jsbin.com/qidoro/edit?html,css,output

Falls die Schrift in einem benötigtem Schnitt nicht verfügbar ist, erstellt der Browser eine künstliche Version, die meist sehr schlecht lesbar ist

Schnitte Angeben

In @font-face können varianten und gewichte angegeben werden

http://jsbin.com/madoku/edit?html,css,output

@font-face {
  font-family: "myfont";
  src: url("font-regular.woff2") format("woff2");
  font-weight: normal;
}

@font-face {
  font-family: "myfont";
  src: url("font-bold.woff2") format("woff2");
  font-weight: bold;
}

@font-face {
  font-family: "myfont";
  src: url("font-bold.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}