Bei Myfonts Webfont Kit Builder auf das Bild der Schrift klicken und auf „Keep All OpenType Layout. larger file sizes; advanced typographic features in some browsers„
Nach dem Download den Ordner öffnen und in der Datei folgende Anpassungen machen:
- font-family immer der selbe Name – Hauptname „Kawak“ statt „Kawak-Regular“
- font-weight am Ende ergänzen
- font-style am Ende ergänzen normal für normal und italic für kursiv
[css]@font-face {font-family: ‚Kawak>‘;src: url(‚webfonts/35D5CC_0_0.eot‘);src: url(‚webfonts/35D5CC_0_0.eot?#iefix‘) format(‚embedded-opentype‘),url(‚webfonts/35D5CC_0_0.woff2‘) format(‚woff2‘),url(‚webfonts/35D5CC_0_0.woff‘) format(‚woff‘),url(‚webfonts/35D5CC_0_0.ttf‘) format(‚truetype‘);font-weight:300;font-style:normal;}
@font-face {font-family: ‚Kawak‘;src: url(‚webfonts/35D5CC_1_0.eot‘);src: url(‚webfonts/35D5CC_1_0.eot?#iefix‘) format(‚embedded-opentype‘),url(‚webfonts/35D5CC_1_0.woff2‘) format(‚woff2‘),url(‚webfonts/35D5CC_1_0.woff‘) format(‚woff‘),url(‚webfonts/35D5CC_1_0.ttf‘) format(‚truetype‘);font-weight:900;font-style:normal;}
@font-face {font-family: ‚Kawak‘;src: url(‚webfonts/35D5CC_2_0.eot‘);src: url(‚webfonts/35D5CC_2_0.eot?#iefix‘) format(‚embedded-opentype‘),url(‚webfonts/35D5CC_2_0.woff2‘) format(‚woff2‘),url(‚webfonts/35D5CC_2_0.woff‘) format(‚woff‘),url(‚webfonts/35D5CC_2_0.ttf‘) format(‚truetype‘);font-weight:900;font-style:italic;}
@font-face {font-family: ‚Kawak‘;src: url(‚webfonts/35D5CC_3_0.eot‘);src: url(‚webfonts/35D5CC_3_0.eot?#iefix‘) format(‚embedded-opentype‘),url(‚webfonts/35D5CC_3_0.woff2‘) format(‚woff2‘),url(‚webfonts/35D5CC_3_0.woff‘) format(‚woff‘),url(‚webfonts/35D5CC_3_0.ttf‘) format(‚truetype‘);font-weight:300;font-style:italic;}
@font-face {font-family: ‚Kawak‘;src: url(‚webfonts/35D5CC_4_0.eot‘);src: url(‚webfonts/35D5CC_4_0.eot?#iefix‘) format(‚embedded-opentype‘),url(‚webfonts/35D5CC_4_0.woff2‘) format(‚woff2‘),url(‚webfonts/35D5CC_4_0.woff‘) format(‚woff‘),url(‚webfonts/35D5CC_4_0.ttf‘) format(‚truetype‘);font-weight:700;font-style:normal;}
@font-face {font-family: ‚Kawak‘;src: url(‚webfonts/35D5CC_5_0.eot‘);src: url(‚webfonts/35D5CC_5_0.eot?#iefix‘) format(‚embedded-opentype‘),url(‚webfonts/35D5CC_5_0.woff2‘) format(‚woff2‘),url(‚webfonts/35D5CC_5_0.woff‘) format(‚woff‘),url(‚webfonts/35D5CC_5_0.ttf‘) format(‚truetype‘);font-weight:700;font-style:italic;}
@font-face {font-family: ‚Kawak‘;src: url(‚webfonts/35D5CC_6_0.eot‘);src: url(‚webfonts/35D5CC_6_0.eot?#iefix‘) format(‚embedded-opentype‘),url(‚webfonts/35D5CC_6_0.woff2‘) format(‚woff2‘),url(‚webfonts/35D5CC_6_0.woff‘) format(‚woff‘),url(‚webfonts/35D5CC_6_0.ttf‘) format(‚truetype‘);font-weight:500;font-style:normal;}
@font-face {font-family: ‚Kawak‘;src: url(‚webfonts/35D5CC_7_0.eot‘);src: url(‚webfonts/35D5CC_7_0.eot?#iefix‘) format(‚embedded-opentype‘),url(‚webfonts/35D5CC_7_0.woff2‘) format(‚woff2‘),url(‚webfonts/35D5CC_7_0.woff‘) format(‚woff‘),url(‚webfonts/35D5CC_7_0.ttf‘) format(‚truetype‘);font-weight:500;font-style:italic;}[/css]
Upload the newly ‘configured’ web font kit to replace the current files. You will then want to style the text tags where the OpenType variant glyphs are to appear with additional CSS in your stylesheet. A good starting point would be using this CSS:
-moz-font-feature-settings:
-moz-font-feature-settings:
-ms-font-feature-settings:
-o-font-feature-settings:
-webkit-font-feature-settings:
font-feature-settings:
Then define the feature tag you would like to toggle ‘on’ in quotes and assign it the value of ‘1’ for ‘on’. In the follwoing example, we will use oldstyle numbers:
[css] -moz-font-feature-settings:“ss01″ 1;
-moz-font-feature-settings:“ss01=1″;
-ms-font-feature-settings:“ss01″ 1;
-o-font-feature-settings:“ss01″ 1;
-webkit-font-feature-settings:“ss01″ 1;
font-feature-settings:“ss01″ 1;[/css]
