Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 20): Schönere Schriften für die App

Web-Apps erstellen (Teil 20): Schönere Schriften für die App

Zugegeben, auch mit Schriften wie Arial und Verdana kann man gute Apps entwickeln. Richtig schick sind die vom Schriftbild dann aber oftmals nicht. Wer genug hat vom Schriften-Einheitsbrei, ist bei diesem Video-Training goldrichtig. Denn hier wird gezeigt, wir ihr mittels Google Webfonts auch noch andere Schriftarten als die üblichen Verdächtigen verwenden könnt.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Wenn ihr eure App mit einer etwas ausgefalleneren Schriftart ausstatten wollt, geht das am sichersten über die sogenannten Google Webfonts.

Bilder



Über diese Webfonts lassen sich tatsächlich auch exotische Schriftarten einbinden, für die man normalerweise Grafiken verwenden müsste, wenn man Text in diesen Schriftarten darstellen wollte. Dieser „Umweg“ gehört der Vergangenheit an.

Damit es an dieser Stelle nicht zu Missverständnissen kommt: Auch schon früher ist es natürlich möglich gewesen, "exotische" Schriftarten mittels CSS einzubinden. Theoretisch waren da keine bzw. kaum Grenzen gesetzt. Sichtbar sind die auf diesem Weg eingebundenen Schriftarten allerdings nur, wenn sie auf dem Rechner des Anwenders tatsächlich verfügbar sind. Und genau da liegt das Problem. Denn ihr könnt, wenn ihr eine Spezialschrift wählt, nicht wissen, wer diese tatsächlich vorliegen hat. Ist die Schrift beim Anwender nicht vorhanden, wird eine Alternativschrift genommen. Das Ergebnis ist dann kaum zu kontrollieren.

 
Hier kommt @font-face ins Spiel. Eine typische @font-face-Definition sieht folgendermaßen aus:
@font-face {
   font-family: "Bitstream Vera Serif Bold";
   src: url("http://developer.mozilla.org
   /@api/deki/files/2934/=VeraSeBd.ttf");
}

Über src:url() wird der Pfad angegeben, unter dem die Webfont-Datei liegt. Wenn theoretisch die Möglichkeit besteht, dass die Schriftart auf den Rechnern der Anwender verfügbar ist, sollte man zusätzlich local angeben. Über local gibt man den Namen der Schriftart an. Auch hierzu wieder ein Beispiel:
@font-face {
    font-family: "Bitstream Vera Serif Bold";
    local: "Bitstream Vera Serif Bold";
    src: url("http://developer.mozilla.org/
    @api/deki/files/2934/=VeraSeBd.ttf");
  }

In diesem Fall wird die Schriftfamilie Bitstream Vera Serif Bold zugewiesen. Die betreffende Schriftartendatei lautet VeraSeBd.ttf. Und hier kommt es unweigerlich zu der Frage, woher man denn eigentlich die Schriftartendateien bekommt? Und genau diese Frage führt uns zu den Google Webfonts. Es gibt mittlerweile einige Anbieter, die Webfonts hosten. Diese gehosteten Webfonts könnt ihr dann ganz bequem nutzen.

 
Der bekannteste Dienst dieser Art ist sicherlich der von Google. Um euch einen Eindruck davon zu verschaffen, was es mit den Google Webfonts auf sich hat, seht euch zunächst die Seite http://www.google.com/webfonts an.

Bilder



 
Hier seht ihr die verfügbaren Webfonts. Über die Filter im rechten Fensterbereich lassen sich die angezeigten Webfonts explizit steuern. Interessant sind zudem die sich hinter den jeweiligen Registern, die oben zu sehen sind, liegenden Funktionen.

Bilder



Darüber könnt ihr euch die jeweiligen Schriftarten nämlich beispielsweise auch auf Fließtext angewendet anzeigen lassen.

Beachtet vor dem Einsatz der Webfonts, dass diese nicht auf allen Browsern funktionieren. Hier müsstet ihr, wenn ihr möglichst viele Browser bedienen wollt, immer mehrere Schriftartendateien angeben.
@font-face { font-family: 'meine-schrift';
    src: url('pfad/zu/schrift.eot#')  format('eot'),
         url('pfad/zu/schrift.woff')  format('woff'),
         url('pfad/zu/schrift.ttf')   format('truetype'),
         url('pfad/zu/schrift.svg#svgFontName')  format('svg'); 
  }

Ausführliche Informationen dazu, welche Browser was unterstützen, findet ihr unter https://developer.mozilla.org/de/docs/Web/CSS/@font-face.

Zurück zur Webfonts-Webseite. Dort werden euch ganz unterschiedliche Möglichkeiten geboten, wie ihr die Webfonts einbinden könnt. Zunächst einmal lassen sich die Fonts direkt über die gezeigte Seite integrieren. Ein entsprechender Aufruf sähe dann folgendermaßen aus:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Direkt hinter family wird der Name der gewünschten Schrift angegeben. Die Namen bekommt ihr von der Webfonts-Webseite. Dort wird dann übrigens auch jeweils der richtige Aufruf angezeigt.

Bilder



Der Einfachheit halber könnt ihr diesen direkt von dort kopieren und in eure Webseite einbinden.

Über family gibt man den Namen der gewünschten Schrift an. Anschließend kann die Schrift wie gewohnt verwendet werden. Im folgenden Beispiel wird den Elementen, die im body-Element definiert sind, die Schriftfamilie Tangerine zugewiesen.
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

Mit einem einzigen Webfont müsst ihr euch natürlich nicht zufriedengeben. Tatsächlich könnt ihr innerhalb eurer Webseite auch mehrere Webfonts nutzen. Dafür bietet Google die sogenannten Kollektionen an. Wenn ihr die Webseite aufruft, findet ihr bei jedem Webfont die Schaltfläche Add to collection.

Bilder



Klickt bei den Webfonts, die ihr nutzen wollt, auf eben jenen Button. Im unteren Fensterbereich werden die gewählten Webfonts gesammelt. Sobald die Kollektion vollständig ist, klickt man auf Use. Daraufhin ist eine Übersicht der gewählten Schriftarten zu sehen.

 
Interessant ist übrigens auch die Grafik Page load.

Bilder



Denn diese zeigt, wie sehr die gewählten Webfonts die Ladegeschwindigkeit eurer Seite beeinflussen. Achtet hier unbedingt darauf, dass sich die Ladezeiten in einem gewissen Normallevel bewegen. Als Faustregel gilt: Jeder weitere Webfont verschlechtert die Performance eurer Webseite. Überlegt euch also gut, welche Schriftarten ihr tatsächlich einbindet.

Im Bereich Add this code to your website ist das Einbinden der gewählten Kollektion zu sehen. Kopiert euch den dort hinterlegten Code und fügt ihn in eure Webseite ein.
<link href='http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette' rel='stylesheet' type='text/css'>

Wie das vorherige Beispiel zeigt, werden die jeweiligen Fonts durch einen senkrechten Strich voneinander getrennt.

Auf die gezeigte Weise könnt ihr beliebig viele Webfonts einbinden, wobei ihr aber natürlich immer auch die Performance im Auge behalten solltet. Die Google Webfonts bieten euch übrigens noch weitaus mehr Möglichkeiten zum Einbinden. So besitzen viele der Fonts sogenannte Subsets. Dabei handelt es sich beispielsweise um Latin oder Kyrillisch. Wenn ihr diese ebenfalls mit einbinden wollt, könnt ihr das explizit mit angeben. Das folgende Beispiel zeigt, wie sich solche Subsets nutzen lassen.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic

Dieses Tutorial hat gezeigt, dass die Webfonts durchaus große Chancen bieten, in den Apps tatsächlich ein ansprechendes Schriftbild zu bieten. Der Browsersupport auf mobilen Geräten ist vergleichsweise gut. So werden Android ab Version 2.2 und iOS ab 4.2 unterstützt. Auf älteren iOS-Versionen laufen die Fonts zwar auch, dort allerdings nicht perfekt. Testet einfach, ob die Webfonts etwas für eure App sind.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von paperboy18
  • 16.10.2016 - 15:11

Vielen Dank für das Tutorial

Portrait von Steve007
  • 05.08.2014 - 10:40

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von MicroSmurf
  • 03.08.2014 - 23:20

Interessant wie immer. Danke.

Portrait von Domingo
  • 03.08.2014 - 22:43

Vielen Dank für diesen informativen Teil des Tutorials.

Portrait von reja
  • 03.08.2014 - 21:50

Vielen Dank für das Tutorial.

Portrait von schub
  • 03.08.2014 - 21:02

Dieses Tut tut wirklich gut!

Portrait von BOPsWelt
  • 03.08.2014 - 18:11

Vielen Dank für diesen informativen Teil des Tutorials.

Portrait von Caesarion2004
  • 03.08.2014 - 16:46

Vielen Dank für die Textfassung dieses Tutorials.

Portrait von pallasathena
  • 03.08.2014 - 16:37

Danke für die 'Übersetzung', mir sind die Tuts weit lieber als die Videos!

Portrait von Kundentest
  • 03.08.2014 - 16:25

Herzlichen Dank für das weitere Tutorial.

Portrait von Kundentest
  • 27.07.2014 - 12:04

Herzlichen Dank für das Video.

Portrait von Steve007
  • 06.07.2014 - 15:46

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von Caesarion2004
  • 05.07.2014 - 11:09

Vielen Dank für das informative Tutorial und die Datei.

Portrait von MicroSmurf
  • 05.07.2014 - 11:09

Wie immer sehr interessant. Danke.

Portrait von Hanno_Hauser
  • 05.07.2014 - 10:44

Hi,
danke für das Video und die Erklärungen dazu.
LG

Portrait von Zicke
  • 05.07.2014 - 10:17

War sehr interessant. Danke.

Portrait von hel_mut
  • 05.07.2014 - 10:17

für eine Sache die ein zwei Minuten braucht 11 Minuten herumreden ist schon sehr langatmig,

Portrait von Domingo
  • 05.07.2014 - 09:42

Hat mir gefallen.

Portrait von johen
  • 05.07.2014 - 08:27

Vielen Dank für das Tutorial.

x
×
×