kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Webfonts


Variable Fonts

Bei sog. »Variable Fonts« handelt es sich um ein neues OpenType Feature, dass zunehmend an Bekanntheit gewinnt und darüber hinaus im neuesten Update der Adobe Creative Cloud verfügbar ist. Variable Fonts bieten eine Reihe neuer Möglichkeiten über die sich vor allem Webdesigner (aber nicht nur) freuen dürften. Im Typekit-Blog wurde bereits 2016 darüber berichtet und die neuen Features zusammengefasst.

Direkter Link zum Artikel

Die CSS-Eigenschaft »font-display«

Webfonts sind heutzutage eine Selbstverständlichkeit. Allerdings wird die Schrift von modernen Browsern so lange versteckt, bis sie komplett geladen ist. Mit der CSS-Eigenschaft font-display kann der Fallback- und Ladeprozess (FOIT, FOUT) von Webschriften ähnlich gestaltet werden wie mit JavaScript-basierten Lösungen. Allerdings ist dafür nur noch eine Codezeile nötig. Jeremy Wagener erklärt, wie font-display eingesetzt wird und welche Auswirkung die verschiedenen Werte haben.

Direkter Link zum Artikel

Webfont-Icons erstellen und einbinden

Webfont-Icons selbst erstellen

Webfont-Icons sind fester Bestandteil der meisten modernen Websites. Die vektorbasierten Grafiken sehen gut aus und haben gegenüber pixelbasierten Icons auch zahlreiche technische Vorteile. Webfont-Icons können beispielsweise stufenlos skaliert werden, sind auf jeder Art von Display gestochen scharf und lassen sich ohne großen Aufwand umfärben. In diesem Beitrag beschreiben wir, wie ihr einen individuellen Icon-Font erstellt und in eurer Website einsetzt.

Beitrag zu Ende lesen

Generierter CSS-Content mit den Pseudoelementen ::before und ::after

CSS-Content mit :before und :after

Mit Hilfe der CSS-Selektoren ::before und ::after habt ihr die Möglichkeit vor- bzw. nach einem HTML-Element ein sog. Pseudoelement zu erzeugen. Das Pseudoelement kann wie ein ganz normales HTML-Element mit CSS gestaltet werden, taucht allerdings im HTML-Markup nicht auf. Aus diesem Grund heißt es auch Pseudoelement.
Damit das Pseudoelement entstehen kann, benötigt es zumindest formal einen Inhalt, der über die CSS-Eigenschaft content definiert wird. Die Eigenschaft muss vorhanden sein, sie kann jedoch leer bleiben. Das macht u.a. dann Sinn, wenn das Pseudoelement für Zierelemente eingesetzt wird.

Beitrag zu Ende lesen

Webfonts mithilfe eines Webfont-Anbieters einbinden

Webfont-Anbieter Google Fonts, Adobe Edge, Typekit

Webfont-Anbieter ermöglichen es, Webfonts auf einfache und bequeme Weise in eine Website zu integrieren. Der große Vorteil ist, dass ihr die Schriften nicht kaufen, oder euch um das Lizenzmodell Gedanken machen müsst. Mittlerweile gibt es einige kostenfreie Anbieter für Open-Source-Schriften wie Google Fonts oder Adobe Edge Web Fonts. Wer auf der Suche nach hochwertigen Font-Klassikern ist, findet bei einem kommerziellen Anbieter wie Typekit den passenden Webfont. In diesem Beitrag zeigen wir euch, wie ihr die Web-Dienste nutzen und die Schriften auf eurer Website einbinden könnt. Beitrag zu Ende lesen

Webfonts mit einem Webfont-Generator erstellen

Wer keine Systemschriften verwenden oder auf Webfont-Anbieter zurückgreifen möchte, kann selbst aus einer vorliegenden Desktop-Schrift einen Webfont erzeugen. In diesem Fall kann die Schrift sehr individuell für die Website ausgewählt werden. Allerdings solltet ihr in Bezug auf das Lizenzmodell der Ausgangsschrift einiges beachteten. Wie ihr mithilfe eines Webfont-Generators eine Schrift in das passende Dateiformat umwandelt, beschreiben wir in diesem Artikel. Beitrag zu Ende lesen