Wo findest du Webfonts, welche Fonts sind mit HTML kompatibel und welche sind „websicher“ und k\u00f6nnen auf jeder Webseite verwendet werden? Wir werden sie alle in diesem Artikel erkunden.<\/p>\n
Lasst uns beginnen!<\/p>\n
HTML Fonts: Was sind Web Fonts?<\/h2>\n
Schriftarten haben eine lange Geschichte, aber Schriften, wie wir sie heute kennen, kamen mit dem Aufkommen von Computern und dem Internet in den breiten Gebrauch. Digitale Schriftarten mussten speziell behandelt werden, um auf Bildschirmen dargestellt werden zu k\u00f6nnen. Und als verschiedene Bildschirmgr\u00f6\u00dfen und Ger\u00e4te ins Spiel kamen, wurden die Dinge nur noch komplizierter.<\/p>\n Wenn es um digitale Schriftarten geht, gibt es ein paar verschiedene Arten. Einige Schriften sind vor allem f\u00fcr den Druck und das Grafikdesign gedacht. Diese sind in der Regel gro\u00df und ungeeignet f\u00fcr Webseiten, eignen sich aber perfekt f\u00fcr die Erstellung von Grafiken. Es gibt auch „websichere“ Schriftarten, die auf einem Gro\u00dfteil aller Ger\u00e4te zu finden sind.<\/p>\n F\u00fcr das Webdesign musst du jedoch nach Webfonts Ausschau halten, also nach Schriften, die speziell f\u00fcr die perfekte Darstellung im Web und auf verschiedenen Ger\u00e4ten entwickelt wurden. Du kannst Web-Fonts auch in E-Mails<\/a> oder anderen Online-Diensten verwenden.<\/p>\n Es gibt ein paar Dinge, die Webfonts von den Standardschriften zum Herunterladen unterscheiden. Zum einen k\u00f6nnen sie oft nicht mit Programmen auf deinem Computer verwendet werden; sie m\u00fcssen auf einen Server hochgeladen und im Internet verwendet werden.<\/p>\n Sie sind au\u00dferdem so konzipiert, dass sie auf verschiedenen Bildschirmen und in verschiedenen Gr\u00f6\u00dfen lesbar sind. Sie k\u00f6nnen mit CSS gestylt werden<\/a> (z.B. mit Fett- oder Kursivschrift, Farben und anderen Attributen) und bieten Unterst\u00fctzung f\u00fcr andere Bedingungen wie die Darstellung von rechts nach links.<\/p>\n W\u00e4hrend Webfonts nicht auf deinen Ger\u00e4ten oder denen deiner Besucher installiert werden, gibt es spezielle M\u00f6glichkeiten, sie anzuzeigen, damit jeder, der deine Seite besucht, sie sehen kann.<\/p>\n Du kannst diese Schriftarten entweder ganz normal herunterladen und auf deinen Server hochladen oder einen speziellen Web Font Hosting Service nutzen, der sie auf deiner Seite einbettet, ohne dass ein Download erforderlich ist.<\/p>\n\n Einige Schriftarten sind nicht f\u00fcr das Web gedacht, aber welche k\u00f6nnen in deine HTML Seite eingef\u00fcgt werden?<\/p>\n Im Grunde kannst du jede herunterladbare Schriftart auf deiner Seite verwenden. Du musst sie nur hochladen und richtig konfigurieren, dann sollte sie auf deiner Webseite angezeigt werden.<\/p>\n Aber obwohl du technisch gesehen jede Schriftart auf deiner Seite verwenden kannst, ist das nicht immer die beste Idee. Du solltest speziell nach Web-Fonts suchen, nicht nach Fonts, die f\u00fcr den Druck oder das Grafikdesign gedacht sind. Manche Schriften sind so stilisiert oder f\u00fcr so gro\u00dfe Textgr\u00f6\u00dfen gedacht, dass sie auf deiner Seite nicht richtig dargestellt werden k\u00f6nnen. Bei einer Webschriftart ist das kein Problem.<\/p>\n Bei der Verwendung von Desktop-Schriften auf deiner Seite (oder bei der Verwendung von Web-Fonts f\u00fcr das Druckdesign) gibt es auch lizenzrechtliche Fragen zu kl\u00e4ren. Eine Schriftart in einem anderen Medium zu verwenden, als du sie gekauft hast, kann dich in Schwierigkeiten bringen. Achte darauf, die Lizenz deiner Schriftart sorgf\u00e4ltig zu lesen, bevor du sie kaufst.<\/p>\n Du kannst auch bestimmte Hosts ausfindig machen, die es dir erlauben, einen einfachen Aufruf im HTML zu verwenden, um ihre Schriften auf deiner eigenen Webseite zu rendern, entweder durch kostenlose oder bezahlte Pl\u00e4ne.<\/p>\n So oder so, solange die Schriftart, die du verwendest, richtig hochgeladen<\/a> ist und den richtigen Dateityp hat:<\/p>\n Mit diesen Schriftarten kannst du sie dann auf deiner ganzen Seite verwenden und mit HTML und CSS gestalten.<\/p>\n Es gibt auch websichere Schriftarten, die in der Regel universell in allen Browsern und Programmen funktionieren.<\/p>\n Ein Problem mit den meisten Web Fonts ist, dass es keine Garantie gibt, dass sie auf deiner Webseite richtig angezeigt werden. Anders als beim Grafikdesign, wo du einfach ein Bild in einem Programm erstellen und es zur Verteilung ausdrucken kannst, muss ein Browser<\/a> Webfonts jedes Mal rendern, wenn jemand die Seite \u00f6ffnet. Wenn deine Schriftarten nicht geladen werden, kann es passieren, dass du eine leere, kaputte Webseite hast.<\/p>\n Aus diesem Grund entscheiden sich einige Webseiten-Besitzer daf\u00fcr, sich nur auf websichere Schriftarten<\/a> zu verlassen. Diese sind auf den meisten Systemen vorinstalliert, sodass sie garantiert auf allen Ger\u00e4ten korrekt angezeigt werden. Au\u00dferdem laden sie in der Regel viel schneller als Webfonts, die nur langsam angezeigt werden k\u00f6nnen.<\/p>\n Wenn es dir nur darum geht, die Performance zu maximieren und absolut sicher zu gehen, dass deine Seite die Schriftarten korrekt anzeigt, dann sind websichere Schriftarten das Richtige f\u00fcr dich.<\/p>\n Hier ist eine Liste von websicheren Schriftarten, die im Allgemeinen gut zu verwenden sind.<\/p>\n Es gibt noch Dutzende weiterer websicherer Schriftarten<\/a>, aber diese sind auf allen Ger\u00e4ten am weitesten verbreitet.<\/p>\n Von all diesen sind Arial, Times New Roman, Helvetica und Courier New die sichersten. Obwohl sie als websicher gelten, funktionieren einige der anderen auf bestimmten Betriebssystemen nicht.<\/p>\n Das Problem ist, dass es sich nicht lohnt, dein Branding zu opfern, indem du die meisten Schriften vermeidest, es sei denn, du betreibst so etwas wie eine Regierungsseite oder eine einfache Informationsseite. Websafe-Schriften sind zwar lesbar, aber sie sind auch zu generisch und werden zu oft verwendet.<\/p>\n Es ist viel besser, einen sch\u00f6neren, einzigartigeren Satz von Schriftarten f\u00fcr deine Webseite zu w\u00e4hlen, vor allem, da es eine L\u00f6sung f\u00fcr das Problem der nicht ladenden Web Fonts gibt: Fallback Fonts.<\/p>\n Font Stacks, auch bekannt als Fallback Fonts, sind der einzige Grund, um fette und kreative Web Fonts zu verwenden.<\/p>\n Egal was du tust oder welche Vorkehrungen du triffst, es wird immer jemanden geben, der deine Schriften nicht laden kann. Vielleicht haben sie Javascript deaktiviert, so dass deine gehosteten Fonts nicht richtig gerendert werden, oder irgendetwas l\u00e4uft im Code schief<\/a> und verhindert, dass die von dir hochgeladenen Fonts angezeigt werden. Oder vielleicht ist eine bestimmte Schriftart nicht mit dem Ger\u00e4t des Nutzers kompatibel.<\/p>\n Dank der Fallback-Fonts<\/a> ist es einfach, eine websichere Schriftart zu laden, wenn etwas schief l\u00e4uft. Das funktioniert, indem du eine Schriftart ausw\u00e4hlst, die der Nutzer installiert hat, basierend auf der Schriftfamilie<\/a>:<\/p>\n Denke daran, dass Font Stacks tats\u00e4chlich ein „Stack“ sind; es ist durchaus m\u00f6glich, mehrere Fallback-Fonts in Folge zu haben. Achte nur darauf, dass du immer eine websichere Schriftart am Ende des Stacks hast und du immer noch eine Chance hast, dein Branding mit einer \u00e4hnlichen Schriftart zu vermitteln, wenn die Hauptschriftart ausf\u00e4llt.<\/p>\n Wenn du eine Webschriftart auf deiner Seite einf\u00fcgen m\u00f6chtest, hast du einige M\u00f6glichkeiten.<\/p>\n F\u00fcr WordPress-Nutzer ist der einfachste Weg, Schriftarten auf deine Seite zu bekommen, ein Plugin zu verwenden. Die zwei beliebtesten sind Easy Google Fonts<\/a> und Use Any Font<\/a>. Ersteres vereinfacht das Hinzuf\u00fcgen von Google Fonts auf deiner Webseite, w\u00e4hrend UAF es dir erm\u00f6glicht, Schriften direkt auf deine Seite hochzuladen.<\/p>\n Wenn du kein WordPress verwendest oder dich nicht auf ein Plugin verlassen willst, wird der Prozess einige manuelle Eingriffe erfordern.<\/p>\n Zun\u00e4chst kannst du Schriftarten verwenden, die woanders gehostet werden, wie z.B. bei Google Fonts<\/a>. Die Anleitung dazu h\u00e4ngt davon ab, welchen Dienst du w\u00e4hlst. Bei Google Fonts m\u00fcsstest du die Schriftart, die du verwenden willst, in deinen Du kannst Schriftarten, die du aus dem Internet heruntergeladen hast, auch lokal auf deiner Webseite hosten<\/a>. Das kann vorteilhaft sein, weil du dich dann nicht auf Drittanbieterdienste verlassen musst.<\/p>\n Gl\u00fccklicherweise ist dies sehr einfach zu bewerkstelligen, solange du eine richtig konfigurierte Webschrift hast. Lade die Dateien einfach auf deinen Server hoch und benutze dann die @font-face<\/a> Regel in deinem Stylesheet, um sie zu definieren. Zum Beispiel:<\/p>\n Dann kannst du den Sobald deine Schrift sicher auf deiner Webseite hochgeladen ist, kannst du sie mit HTML und CSS stylen<\/a>. Selbst wenn du nur wenig Programmierkenntnisse hast, ist das Styling einer Schriftart ziemlich einfach. Du kannst die Textfarbe, die Hintergrundfarbe, die Gr\u00f6\u00dfe, den Stil oder das Gewicht \u00e4ndern.<\/p>\n Hinweis:<\/strong> Wenn du mit \u00e4lteren HTML-Versionen gearbeitet hast, erinnerst du dich vielleicht an den Als erstes kannst du die Schriftart mit Farbcodes \u00e4ndern. Du kannst entweder einen Farbnamen<\/a> wie „red“, einen RGB-Code oder einen HEX-Wert verwenden. Dieser wird mit der Eigenschaft color wie folgt gesetzt:<\/p>\n Oder in einem individuellen HTML-Style-Element:<\/p>\n Die Hintergrundfarbe ist die selbe, aber mit dem Attribut background-color.<\/p>\n Als n\u00e4chstes kommt die Schriftgr\u00f6\u00dfe<\/a>. Diese kann entweder in Pixeln, Prozenten oder ems<\/a> angegeben werden (was gut f\u00fcr die Gestaltung von responsive Seiten ist).<\/p>\n oder:<\/p>\n Und zuletzt sind Schriftart<\/a> und -st\u00e4rke, oder kursiv und fett. F\u00fcr schr\u00e4gen Text benutze den „italic“ Tag.<\/p>\n Du kannst stattdessen auch HTML-Tags verwenden. F\u00fcr Kursivschrift kannst du verwenden:<\/p>\n f\u00fcr einen Text, der eine Betonung oder einen Gebrauch vermittelt:<\/p>\n f\u00fcr einen Text, der visuell deutlich sein soll.<\/p>\n Und f\u00fcr fett, benutze:<\/p>\n Zum Beispiel:<\/p>\n oder<\/p>\n Egal, ob du einen Third-Party Font Host nutzen oder sie herunterladen m\u00f6chtest, du musst wissen, wo die besten Orte sind, um Fonts zu finden. Es gibt hunderte von Distributoren, aber nur eine gute Handvoll sind als zuverl\u00e4ssige Quellen f\u00fcr Schriften bekannt. Hier sind ein paar:<\/p>\n Es gibt tausende von Web Fonts da drau\u00dfen, aber wo soll man anfangen? Hier sind zehn einfache HTML Fonts, die auf jeder Webseite gut aussehen w\u00fcrden. Diese sind alle websicher, also sollten sie auf fast allen Ger\u00e4ten funktionieren. Sie sind auch gro\u00dfartige Fallback-Schriften.<\/p>\n Wenn du etwas Aufregenderes brauchst, haben wir jede Menge Artikel \u00fcber kursive Schriftarten<\/a>, Kalligraphie-Schriftarten<\/a> und moderne Schriftarten<\/a>.<\/p>\n Arial ist die bekannteste aller Schriftarten. Sie ist nicht die sch\u00f6nste, aber sie ist einfach und n\u00fctzlich in einer Vielzahl von Situationen.<\/p>\n Times New Roman ist auch eine sehr verbreitete Schriftart. Sie ist am besten geeignet, wenn du eine eher formelle Seite betreibst. Diese Serifenschrift ist nicht besonders aufregend, aber sie lenkt auch nicht ab.<\/p>\n Palatino kommt dir vielleicht bekannt vor, da sie oft im Buchdruck verwendet wird. Jetzt ist sie eine elegante digitale Schriftart, die standardm\u00e4\u00dfig auf vielen Ger\u00e4ten enthalten ist.<\/p>\n Verdana ist bekannt daf\u00fcr, sehr gut lesbar zu sein und sieht auch in gro\u00dfen Gr\u00f6\u00dfen noch gut aus. Diese serifenlose Schrift ist eine gute Alternative zur Arial.<\/p>\n Courier New erinnert an alten Schreibmaschinentext und ist ein gro\u00dfartiges Monospaced-Design f\u00fcr Seiten, die einen altmodischen, aber gut lesbaren Look w\u00fcnschen.<\/p>\n Calibri ist eine einfache, sch\u00f6ne serifenlose Schriftart, die standardm\u00e4\u00dfig in Programmen wie Microsoft Office enthalten ist. Allerdings ist es eine propriet\u00e4re Schriftart, sodass sie oft nur auf Windows-Betriebssystemen unterst\u00fctzt wird.<\/p>\n Diese abgerundete Serifenschrift ist inspiriert von der \u00e4hnlichen, websicheren Schrift Garamond. Wenn du eine formale Schriftart brauchst, die nicht ganz so seri\u00f6s ist wie Times New Roman, ist sie eine gute Wahl.<\/p>\n \u00c4hnlich wie die Palatino ist die Garamond eine klassische Schriftart, die oft f\u00fcr den Buchdruck verwendet wird. Obwohl sie f\u00fcr moderne Betriebssysteme aktualisiert wurde, sieht sie immer noch ziemlich altmodisch aus.<\/p>\n Die minimalen Buchstabenabst\u00e4nde dieser Serifenschrift geben ihr ein einzigartiges Aussehen und Gef\u00fchl. Du kannst sie auf den meisten Apple-Ger\u00e4ten finden.<\/p>\n Diese saubere Schriftart hat als Standardschrift f\u00fcr \u00e4ltere Windows-Betriebssysteme fungiert. Ihr k\u00fchneres Erscheinungsbild l\u00e4sst sie gerade genug hervorstechen, ohne abzulenken.<\/p>\n\n Es ist wichtig, dass du Schriftarten ausw\u00e4hlst, die auf deiner Webseite gut aussehen<\/a>, lesbar sind und deine Marke verk\u00f6rpern<\/a>. Es gibt verschiedene Webseiten, auf denen du kostenlose Schriftarten installieren oder lizenzierte gegen eine Geb\u00fchr herunterladen kannst, und wir haben ein paar Beispiele f\u00fcr gute Schriftarten f\u00fcr den Anfang zusammengestellt.<\/p>\n Du musst dich nicht mit langweiligen, websicheren Schriftarten begn\u00fcgen, die du schon seit Jahrzehnten \u00fcberall im Internet siehst. Dank der Fallback-Fonts kannst du jede Typografie verwenden, die dir gef\u00e4llt, und einen Fallback festlegen, der verwendet wird, wenn sie nicht geladen wird.<\/p>\n Egal ob du diese HTML Fonts auf deiner Webseite, in E-Mails oder in deinem Logo verwendest, stelle sicher, dass du viele Tests durchf\u00fchrst, damit deine Seite lesbar bleibt und die Typografie gut mit dem Rest deines Designs harmoniert.<\/p>\n","protected":false},"excerpt":{"rendered":" Wenn es eine Sache gibt, die f\u00fcr das Branding und das Erscheinungsbild deiner Webseite am wichtigsten ist, dann sind es die Schriftarten. Eine sorgf\u00e4ltig gew\u00e4hlte Schriftart …<\/p>\n","protected":false},"author":20,"featured_media":40962,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[223,75],"topic":[1012,1001],"class_list":["post-40958","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-fonts","tag-webdesign","topic-wordpress-website-design","topic-wordpress-schriftarten"],"yoast_head":"\n![\"Google](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Google-Fonts-Most-Popular-Web-Fonts.png\")
Welche Fonts kannst du in HTML verwenden?<\/h3>\n
![\"Scribble](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/scribble-font.png\")
\n
Was sind websichere Schriftarten?<\/h3>\n
![\"Arial](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/arial-font.jpg\")
\n
Ein Hinweis zu Font Stacks<\/h3>\n
\n
Wie man Fonts mit HTML hinzuf\u00fcgt<\/h2>\n
<head><\/code> einbetten und dann aufrufen, wenn du sie verwenden willst.<\/p>\n\n@font-face {\n\nfont-family: FontName;\n\nsrc: url(FontLocationOnServer);\n\n}<\/code><\/pre>\nfont-family<\/code>-Tag verwenden, um deine Schriftart dort aufzurufen, wo du sie im HTML-Dokument haben m\u00f6chtest.<\/p>\nSchriftarten mit HTML und CSS stylen<\/h3>\n
<font><\/code>-Tag. Dieser wird nicht mehr unterst\u00fctzt und sollte nicht mehr verwendet werden. Stattdessen kannst du Text mit CSS oder einem HTML-Style-Element stylen.<\/p>\n\np {\n\ncolor: blue;\n\n}\n\n<\/code><\/pre>\n\n<p style=\"color:blue;\">Text.<\/p>\n<\/code><\/pre>\n\np {\n\nbackground-color: blue;\n\n}<\/code><\/pre>\n p {\n\nfont-size: 16px;\n\n}<\/code><\/pre>\n<p style=\"font-size:200%;\">Text.<\/p><\/code><\/pre>\n![\"Einstellen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/font-size-css.png\")
.italic {\n\nfont-style: italic;\n\n}\n\nAnd for bold:\u00a0\n\n.bold {\n\nfont-weight: bold;\n\n}<\/code><\/pre>\n![\"Einstellen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/font-style-css.png\")
<em><\/code><\/pre>\n <i> <\/code><\/pre>\n<b><\/code> or <strong><\/code><\/pre>\n<b>Bold Text<\/b><\/code><\/p>\n<strong>I'm of special importance.<\/strong><\/code><\/pre>\nWo bekommt man HTML Fonts?<\/h2>\n
\n
![\"google](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/google-fonts.jpg\")
\n
Die 10 besten HTML Fonts<\/h2>\n
1. Arial<\/h3>\n
![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/arial-font.png\")
2. Times New Roman<\/h3>\n
3. Palatino<\/h3>\n
![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/palatino-font.png\")
4. Verdana<\/h3>\n
5. Courier New<\/h3>\n
![\"Courier](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/courier-new-font.png\")
6. Calibri<\/h3>\n
![\"calibri\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/calibri-font.png\")
7. Georgia<\/h3>\n
![\"georgia\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/georgia-font.jpg\")
8. Garamond<\/h3>\n
![\"garamond\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/garamond-font.png\")
9. Didot<\/h3>\n
![\"didot\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/didot-font.jpg\")
10. Tahoma<\/h3>\n
![\"tahoma\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/tahoma-font.png\")
Zusammenfassung<\/h2>\n