Was sind ueberhaupt Web-Fonts
Der Hauptvorteil von Web-Fonts ist das Sie von einem externen Server geladen werden. Dies kann sowohl Fluch als auch Segen zugleich sein.
Zum einen sollte dieser immer zur Verfügung stehen und es kommt nur sehr selten vor dass die Font gelöscht wird, dies könnte jedoch vorkommen. Darum ist es wichtig die Font herunterzuladen und lokal zu speichern. Im Falle einer Löschung kann die Font dann direkt über deinen Webserver eingebunden werden.
Um die Schriftarten am einfachsten und sichersten einzubinden sollten diese entweder als Web Open Font Format (WOFF), TrueType (.ttf) oder als OpenType PostScript® (.otf) eingebunden oder auch gespeichert werden. Jedoch ist es technisch seit der Einführung der “@fot-face-Regel” ab CSS2 technisch möglich alle Schrift-Formate einzubetten.
Wir würden die Einbindung mit dem WOFF Format vor allem empfehlen wenn Ladezeiten der Website optimiert werden sollen. Durch die Komprimierung der Schriftart werden diese nämlich um ein vielfaches schneller geladen.
Für alle technisch Interessierten unter euch eine Font Einbindung per CSS kann so aussehen (lokaler Server):
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Roboto'), local('Roboto-Regular'),
url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}Es gibt verschiedene Anbieter die Web-Fonts zur Verfügung stellen. Die bekanntesten sind hierbei folgende:
In unseren nächsten Beiträgen werden wir dir unsere Favoriten mit Begründung zeigen! Sei also gespannt was hier noch passiert!
