Durch­dachtes Webdesign & ziel­gerichtete Online Marketing Strategien
Moderne Websites & starke SEO Optimierung
Flexible Gestaltungs­möglich­keiten & schnelle Umsetzung
Hohe Kunden­zufriedenheit & höchste Service­orientierung
bFlow ist Ihr Partner für professionelle Web & Online Marketing Projekte
Durch­dachtes Webdesign & ziel­gerichtete Online Marketing Strategien
Moderne Websites & starke SEO Optimierung
Flexible Gestaltungs­möglich­keiten & schnelle Umsetzung
Hohe Kunden­zufriedenheit & höchste Service­orientierung
bFlow ist Ihr Partner für professionelle Web & Online Marketing Projekte

MyFonts OpenType Funktion aktivieren

Facebook
Twitter
LinkedIn

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]

War dieser Artikel hilfreich?
Scroll to Top