[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"UWwIc1Hovi8Nz_CNVf7kb7atH7qTeLDRy31ZEYx7xN4":75,"Qos4Dzlu2RJadRDp4zOtJxNk9Y1Fd7z1Vx7fY4w32V4":176,"_apollo:default":221},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":166,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":169,"author":170},"NodeWpPost","1098","Face to @font-face",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1343276312,"UTC","+00:00","2012-07-26T04:18:32+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/face-to-font-face",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Face to @font-face | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/face-to-font-face","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146,150,154,158,162],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","193","Browsersupport","/tag/browsersupport",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"297","css3","/tag/css3",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"450","Fallback","/tag/fallback",{"__typename":138,"id":151,"name":152,"path":153,"weight":116},"481","font-face","/tag/font-face",{"__typename":138,"id":155,"name":156,"path":157,"weight":116},"761","Local","/tag/local",{"__typename":138,"id":159,"name":160,"path":161,"weight":116},"1506","Webfont","/tag/webfont",{"__typename":138,"id":163,"name":164,"path":165,"weight":116},"1508","webfonts","/tag/webfonts",{"__typename":167,"processed":168,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch3>Was man wissen sollte…\u003C/h3>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2015/02/face_to_at_font-face_kreis-1.jpg?itok=F8NHzWcw\" data-rel=\"lightbox-gallery-imRU2fHm\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"face_to_at_font-face_kreis\" data-entity-type=\"media\" data-entity-uuid=\"6195dcec-a569-48cc-902b-55c3899795ae\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2015/02/face_to_at_font-face_kreis-1.jpg.webp?itok=4pbBmNsL 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2015/02/face_to_at_font-face_kreis-1.jpg.webp?itok=biDRrIES 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2015/02/face_to_at_font-face_kreis-1.jpg.webp?itok=RajfLr6F 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2015/02/face_to_at_font-face_kreis-1.jpg.webp?itok=2m72nt-D 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2015/02/face_to_at_font-face_kreis-1.jpg.webp?itok=HRmoxyDQ 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2015/02/face_to_at_font-face_kreis-1.jpg.webp?itok=etWueuJl 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2015/02/face_to_at_font-face_kreis-1.jpg.webp?itok=-ntVqeBo 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2015/02/face_to_at_font-face_kreis-1.jpg.webp?itok=lptgT7re 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"480\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2015/02/face_to_at_font-face_kreis-1.jpg.webp?itok=Q6AOUhsh 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/face_to_at_font-face_kreis-1.jpg.webp?itok=Kzkat7S5 2x\" type=\"image/webp\" width=\"500\" height=\"500\">\n                  \u003Cimg loading=\"lazy\" width=\"500\" height=\"500\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/face_to_at_font-face_kreis-1.jpg.jpg?itok=Kzkat7S5\" alt=\"face_to_at_font-face_kreis\" title=\"CSS Font Face Technik\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>…1994 brachte Microsoft den ersten @font-face Vorschlag für CSS auf. Zu dieser Zeit wurde der Vorschlag jedoch wegen zu wenig Interesse von den Browserentwicklern und zu wenig Unterstützung abgelehnt. 2009 wurde dann die @font-face Regel sozusagen wiedereingeführt und ist nun ein fester Bestandteil des W3C Arbeitsentwurfes für das CSS Fonts Modul Level 3. Der aktuelle Entwurf beinhaltet jedoch nur einige wenige Unterschiede zu dem Microsoft Vorschlag 1994. Die @font-face Regel erlaubt dem Entwickler theoretisch jede Schriftart in eine Website einzubinden. Man ist also nicht mehr an ein paar Plattform-abhängige Schriftarten gebunden. In einem CSS Dokument können mehrerer @font-face Regeln verwendet werden.\u003Cbr>\n\u003C/p>\n\u003Ch3>Browserunterstützung\u003C/h3>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2012/07/browsersupport41-1.png?itok=Y4_Mh2ln\" data-rel=\"lightbox-gallery-imRU2fHm\" data-rl_title data-rl_caption=\"Webfonts Browsersupport\" title class=\"js-image-link\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"79553d70-1f49-47b7-8e99-4d87da2c6e55\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2012/07/browsersupport41-1.png.webp?itok=2-I4dhU2 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2012/07/browsersupport41-1.png.webp?itok=TCulG5tp 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"540\" height=\"443\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2012/07/browsersupport41-1.png.webp?itok=gmCFdujr 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2012/07/browsersupport41-1.png.webp?itok=2C9OLxLu 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"540\" height=\"443\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2012/07/browsersupport41-1.png.webp?itok=H4j85bx5 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2012/07/browsersupport41-1.png.webp?itok=EfzisIgQ 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"540\" height=\"443\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2012/07/browsersupport41-1.png.webp?itok=ThjUKEoV 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2012/07/browsersupport41-1.png.webp?itok=H8pXC2rU 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"394\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2012/07/browsersupport41-1.png.webp?itok=npC0TeFD 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/07/browsersupport41-1.png.webp?itok=667zNxvX 2x\" type=\"image/webp\" width=\"540\" height=\"443\">\n                  \u003Cimg loading=\"lazy\" width=\"540\" height=\"443\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/07/browsersupport41-1.png.jpg?itok=667zNxvX\" alt title=\"Webfonts Browsersupport\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>Leider ist nicht alles so einfach wie es scheint, nicht alle Browser unterstützen die gleichen Schriftformate. Das bedeutet, will man eine bestimmte Schrift in allen Browsern anzeigen lassen, müssen mindestens 5 verschiedenen Schriftformate generiert und eingebunden werden. Wenn der Browser zu der @font-face Regel im CSS kommt, wird vom Browser das erste Schriftformat gewählt das unterstützt wird.\u003Cbr>\n\u003Cbr>\nDas Schriftformat das von den meisten Browsern unterstützt wird ist TTF, gefolgt von SVG und WOFF. SVG wird aber von keiner Version des Internet Explorers unterstützt. Alle Versionen des Internet Explorers unter der Version 9 unterstützen lediglich ein einzigen Format – EOT. Dieses Format wurde von Microsoft entwickelt und wird somit auch nur vom IE unterstützt. Bis jetzt unterstützen die bekanntesten mobilen Browser (iOS und Android) nur TTF.\u003Cbr>\nDer zukünftige Webfontstandard sollte jedoch, aus der Sicht des W3C WOFF sein. Web Open Font Format wurde von Schriftendesignern und Browserentwicklern gemeinsam erarbeitet. Dieses Format beinhaltet einen Schriftenkompression und eine Metadatei, welche Lizenzinformationen über die jeweilige Schrift enthalten kann. Leider gibt es bis jetzt noch keinen Weg diese Metadatei automatisch auf Gültigkeit zu prüfen. Aufgrund der zusätzlich mangelnden mobilen Unterstützung dieses Formates kann es aktuell nicht als Webfontstandart gesehen werden.\u003C/p>\n\u003Ch3>Probleme mit dem Internet Explorer\u003C/h3>\n\u003Cp>Der Browser mit den meisten Schwierigkeiten ist der Internet Explorer in den Versionen 6, 7 und 8. Der Internetexplorer lädt zum Beispiel alle Schriftfiles vom Server, auch die Formate die er nicht unterstützt was die Seitenladezeit bei Websites mit vielen Schriftarten enorm erhöht. Weiters lädt er nicht wie die anderen Browser die Schriften nur bei Bedarf, sondern immer, auch wenn sie nie angezeigt werden. Um zu vermeiden das der Internet Explorer alle Formate lädt muss man ihm manuell „mitteilen“ das die zugehörige Schrift für ihn beendet ist. Das macht man mit einer Raute oder einem Fragezeichen:\u003Cbr>\n\u003Ccode>src: url(‘../fonts/Economica-Regular-OTF-webfont.eot?#iefix’)\u003C/code>\u003Cbr>\nEin weiteres Problem ist der Kompatibilitätsmodus des Internet Explorers. Mit diesem ist es möglich zum Beispiel dem Internet Explorer in der Version 8 zu sagen dass er sich wie ein Internet Explorer in der Version 7 verhalten soll. Ist dieser Modus aktiviert so weist der Browser merkwürdige Eigenheiten auf. Zum Beispiel ignoriert er das CSS wenn er ein spezielles Attribut nicht kennt. Da der IE7 das format Attribut nicht kennt, würde er die ganze eingebettete Schrift ignorieren. Aus diesem Grund muss man das src Attribut doppelt einfügen, und einmal davon ohne das format Attribut. Alle diese Bugs wurden im IE9 gelöst.\u003C/p>\n\u003Ch3>@font-face Attribute\u003C/h3>\n\u003Cp>\u003Cstrong>Local\u003C/strong>\u003Cbr>\nEin weiteres Attribut das zu der @font-face Regel hinzugefügt werden kann ist das local-Attribut. Dieses ermöglichte es eine Schrift vom lokalen Rechner zu laden, wenn die jeweilige Font vorhanden ist, was die Ladegeschwindigkeit positiv beeinflussen würde. Doch auch dieses Attribut ist mit Vorsicht zu genießen. Ein Problem dabei ist die Schriftgröße. Oftmals haben Webfonts eine niedrigere Auflösung als System/Printschriften. Das bedeutet dass die selbe Schrift mit gleicher Schriftgröße (in Prozent oder ems) im Browser anders aussieht wenn sie lokal geladen wird. Da System/Printschriften für große Auflösung konzipiert sind ist die Startgröße um einiges höher als die einer Webfont.\u003Cbr>\nAuch hier gibt es einen IE Bug. Dieser versucht nämlich auch ohne Angabe des local Attributes manchmal eine lokale Schrift zu laden, die so ähnlich heißt. Oft kommt es hier zu unschönen Fehlern. Um diesen Bug zu umgehen haben sich die Entwickler eine lustige Lösung überlegt. Es wird das local Attribut angegeben, aber anstatt einer Schriftzuweisung bekommt das Attribut einen Smiley als Wert zugewiesen. Das ist eine sichere Lösung um alle Browser davon abzuhalten womöglich eine lokale Schrift zu laden über die man keine Kontrolle hat.\u003Cbr>\n\u003Ccode>src: local('☺')\u003C/code>\u003Cbr>\n\u003Cstrong>Font-size-adjust\u003C/strong>\u003Cbr>\nDieses Attribut gibt es zurzeit nur für den Mozilla Firefox. Es bietet die Möglichkeit die x-Höhe der Fallback Schrift zu adjustieren. So kann man sichergehen das bei einem Fehler des Ladevorgangs der Schrift wenigstens die x-Höhe der alternativen Schrift (zB Helvetica, Arial) gleich ist wie die der bevorzugten Schrift. Um dieses Tool wirklich gut nutzen zu können muss man natürlich die x-Höhe der eingesetzten Schrift wissen.\u003Cbr>\n\u003Cstrong>Fallback\u003C/strong>\u003Cbr>\nJede @font-face Regel sollte mindestens eine Websafe Schrift als Fallback Schrift beinhalten. Falls aus irgendeinem Grund das Laden schief geht wird dann diese Schrift angezeigt. Auch hier gibt es Bugs im IE8 und in Opera. Diese Browser zeigen bei Fehlgeschlagenen Laden gar nichts an.\u003C/p>\n\u003Ch3>Browser independent @font-face rule:\u003C/h3>\n\u003Cp style=\"text-align: left;\">\u003Ccode>\u003Cbr>\n@font-face{\u003Cbr>\nfont-family: ‘EconomicaRegular’;\u003Cbr>\nsrc: url(‘../fonts/Economica-Regular-OTF-webfont.eot’);\u003Cbr>\nsrc: local('☺'),url(‘../fonts/Economica-Regular-OTF-webfont.eot?#iefix’)\u003Cbr>\nformat(‘embedded-opentype’),\u003Cbr>\nurl(‘../fonts/Economica-Regular-OTF-webfont.woff’) format(‘woff’),\u003Cbr>\nurl(‘../fonts/Economica-Regular-OTF-webfont.ttf’)\u003Cbr>\nformat(‘truetype’), url(‘../fonts/Economica-Regular-OTF-webfont.\u003Cbr>\nsvg#EconomicaRegular’) format(‘svg’);\u003Cbr>\n}\u003C/code>\u003C/p>\n\u003Cp style=\"text-align: left;\">p { font-family: ‘EconomicaRegular‘, ‘Arial‘, sans-serif; }\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://liechtenecker.at/blog/face-to-font-face/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Face to @font-face - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Was man wissen sollte… …1994 brachte Microsoft den ersten @font-face Vorschlag für CSS auf. Zu dieser Zeit wurde der Vorschlag jedoch wegen zu wenig Interesse von den Browserentwicklern und zu wenig Unterstützung abgelehnt. 2009 wurde dann die @font-face Regel sozusagen wiedereingeführt und ist nun ein fester Bestandteil des W3C Arbeitsentwurfes für das CSS Fonts Modul […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://liechtenecker.at/blog/face-to-font-face/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2012-07-26T06:18:32+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://liechtenecker.at/wp-content/uploads/2015/02/face_to_at_font-face_kreis-1-300x300.jpg\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"5 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://liechtenecker.at/#website\",\"url\":\"https://liechtenecker.at/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://liechtenecker.at/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/blog/face-to-font-face/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://liechtenecker.at/wp-content/uploads/2015/02/face_to_at_font-face_kreis-1.jpg\",\"width\":500,\"height\":500,\"caption\":\"CSS Font Face Technik\"},{\"@type\":\"WebPage\",\"@id\":\"https://liechtenecker.at/blog/face-to-font-face/#webpage\",\"url\":\"https://liechtenecker.at/blog/face-to-font-face/\",\"name\":\"Face to @font-face - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://liechtenecker.at/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://liechtenecker.at/blog/face-to-font-face/#primaryimage\"},\"datePublished\":\"2012-07-26T06:18:32+00:00\",\"dateModified\":\"2012-07-26T06:18:32+00:00\",\"author\":{\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://liechtenecker.at/blog/face-to-font-face/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":171,"id":172,"myRole":173,"name":174,"nickname":175},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":177},[178,196,209],{"__typename":79,"id":179,"title":180,"path":181,"wpTeaserText":182,"wpPromotedTeaserImage":13,"wpHeaderImage":183},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":184,"id":185,"excludeFromScreenreader":13,"mediaImage":186,"name":194,"path":195,"status":20},"MediaImage","3364",{"__typename":187,"url":188,"width":189,"height":190,"alt":191,"title":13,"size":192,"mime":193},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":197,"title":198,"path":199,"wpTeaserText":200,"wpPromotedTeaserImage":13,"wpHeaderImage":201},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":184,"id":202,"excludeFromScreenreader":13,"mediaImage":203,"name":207,"path":208,"status":20},"3355",{"__typename":187,"url":204,"width":189,"height":190,"alt":205,"title":13,"size":206,"mime":193},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":210,"title":211,"path":212,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":213},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":184,"id":214,"excludeFromScreenreader":21,"mediaImage":215,"name":219,"path":220,"status":20},"3303",{"__typename":187,"url":216,"width":189,"height":190,"alt":217,"title":13,"size":218,"mime":193},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":222,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":223,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":227,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":230,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":233,"Menu:footer":236,"ROOT_QUERY":246,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":262,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":265,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":268,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":271,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":274,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":277,"Menu:nuxt-main-menu":280,"TermCategories:8":294,"TermTags:193":305,"TermTags:297":306,"TermTags:450":307,"TermTags:481":308,"TermTags:761":309,"TermTags:1506":310,"TermTags:1508":311,"User:23":312,"NodeWpPost:1098":313,"MediaImage:3364":344,"NodeWpPost:1619":346,"MediaImage:3355":349,"NodeWpPost:1616":351,"MediaImage:3303":354,"NodeWpPost:1606":356},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",224,"internal",20,"expanded",21,"attributes",226],{"__ref":225},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",228,"internal",20,"expanded",21,"attributes",229],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",231,"internal",20,"expanded",21,"attributes",232],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",234,"internal",21,"expanded",21,"attributes",235],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",237],[238,240,242,244],{"__ref":239},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":241},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":243},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":245},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",247,"menu({\"name\":\"FOOTER\"})",248,"menu({\"name\":\"NUXT_MAIN_MENU\"})",250,"route({\"path\":\"/blog/face-to-font-face\"})",252,"latestKnowhow({\"excludeId\":\"1098\",\"limit\":3})",255],"Query",{"__ref":249},"Menu:footer",{"__ref":251},"Menu:nuxt-main-menu",["null","__typename",77,"entity",253],{"__ref":254},"NodeWpPost:1098",[256,258,260],{"__ref":257},"NodeWpPost:1619",{"__ref":259},"NodeWpPost:1616",{"__ref":261},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",263,"internal",20,"expanded",21,"attributes",264],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",266,"internal",20,"expanded",21,"attributes",267],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",269,"internal",20,"expanded",21,"attributes",270],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",272,"internal",20,"expanded",21,"attributes",273],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",275,"internal",20,"expanded",21,"attributes",276],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",278,"internal",20,"expanded",21,"attributes",279],{"__ref":225},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",281],[282,284,286,288,290,292],{"__ref":283},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":285},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":287},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":289},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":291},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":293},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",295,"langcode",296,"changed",297,"metatag",298],["null","__typename",118,"processed",119,"format",120],{"__ref":225},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[299,301,303],["null","__typename",93,"tag",94,"attributes",300],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",302],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",304],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",138,"id",151,"name",152,"path",153,"weight",116],["null","__typename",138,"id",155,"name",156,"path",157,"weight",116],["null","__typename",138,"id",159,"name",160,"path",161,"weight",116],["null","__typename",138,"id",163,"name",164,"path",165,"weight",116],["null","__typename",171,"id",172,"myRole",173,"name",174,"nickname",175],["null","__typename",79,"id",80,"title",81,"changed",314,"created",315,"langcode",316,"path",90,"promote",21,"status",20,"sticky",21,"metatag",317,"category",324,"contentElements",13,"evergreen",13,"tags",326,"wpBody",341,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",169,"author",342],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":225},[318,320,322],["null","__typename",93,"tag",94,"attributes",319],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",321],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",323],["null","__typename",109,"property",110,"content",81],{"__ref":325},"TermCategories:8",[327,329,331,333,335,337,339],{"__ref":328},"TermTags:193",{"__ref":330},"TermTags:297",{"__ref":332},"TermTags:450",{"__ref":334},"TermTags:481",{"__ref":336},"TermTags:761",{"__ref":338},"TermTags:1506",{"__ref":340},"TermTags:1508",["null","__typename",167,"processed",168,"format",120,"summary",13],{"__ref":343},"User:23",["null","__typename",184,"id",185,"excludeFromScreenreader",13,"mediaImage",345,"name",194,"path",195,"status",20],["null","__typename",187,"url",188,"width",189,"height",190,"alt",191,"title",13,"size",192,"mime",193],["null","__typename",79,"id",179,"title",180,"path",181,"wpTeaserText",182,"wpPromotedTeaserImage",13,"wpHeaderImage",347],{"__ref":348},"MediaImage:3364",["null","__typename",184,"id",202,"excludeFromScreenreader",13,"mediaImage",350,"name",207,"path",208,"status",20],["null","__typename",187,"url",204,"width",189,"height",190,"alt",205,"title",13,"size",206,"mime",193],["null","__typename",79,"id",197,"title",198,"path",199,"wpTeaserText",200,"wpPromotedTeaserImage",13,"wpHeaderImage",352],{"__ref":353},"MediaImage:3355",["null","__typename",184,"id",214,"excludeFromScreenreader",21,"mediaImage",355,"name",219,"path",220,"status",20],["null","__typename",187,"url",216,"width",189,"height",190,"alt",217,"title",13,"size",218,"mime",193],["null","__typename",79,"id",210,"title",211,"path",212,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",357],{"__ref":358},"MediaImage:3303"]