LautundKlar

freefontconverter konvertiert Schriften in unterschiedliche Formate

Manchmal benötigt man eine Schrift in einem anderen Format, um sie zum Beispiel auf verschiedenen Betriebssystemen einsetzen zu können oder wenn bestimmte Programme nur mit TrueType Fonts funktionieren.
FreeFontConverter ist eine Webanwendung, mit der man fast alle Schriftarten in ein anderes Format konvertieren kann.

Neben den üblichen Formaten TrueType (. Ttf), OpenType (. OFT) und PostScript (. Ps), unterstützt der Converter auch .Svg .Bin. .Dfont und viele andere.

Ein sehr nützliches Tool das man immer wieder mal brauchen kann.

Website: http://www.freefontconverter.com

Popularity: 3% [?]

Grundlagen zur Verwendung der Google Font API

CSS-Dateien verlinken

Per Hotlink lädt man die CSS-Dateien direkt von Google.com.
Anhand der URL-Parameter werden die Schriftarten sowie die Variationen dieser Schriftarten bestimmt.

Einfaches Beispiel:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">

Etwas aufwändiger:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=
Inconsolata:italic,bolditalic|Droid+Sans">

CSS

Im eigenen CSS-File können diese Schriftarten für jedes beliebige Element festgelegt werden:

body { font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; }

FontLoader

Anstelle auf das CSS bei Google.com zu verlinken, kann der JavaScript WebFont Loader verwendet werden. Dies hat Vorteile wie z.B. die Kontrolle über das “Flash of Unstyled Text” (FOUT), aber auch Nachteile, wie die Tatsache, dass die Schriftarten bei deaktiviertem JavaScript nicht geladen werden.

<script type="text/javascript">// <![CDATA[
WebFont.load({
google: {
families: ['Cantarell']
}
});
// ]]></script>

Klassennamen wie .wf-loading werden auf die entsprechenden HTML-Elemente angewendet.
Wenn die Schriftarten geladen werden, können diese Klassennamen verwendet werden, um den Text zu verstecken/auszublenden. Dann wenn sie fertig geladen sind, müssen sie wieder sichtbar gemacht werden. So funktioniert FOUT.

Websites: http://paulirish.com/2010/details-on-the-new-google-webfont-api/
http://code.google.com/webfonts

Popularity: 3% [?]

Eine Alternative für “Lorem Ipsum” Generatoren

Lorem Ipsum ist der beliebteste Platzhaltertext für Grafik- und Webdesigner. Wenn Sie eine abwechslungsreichere Alternative suchen, ist Fillerati genau das richtige.

Mit Fillerati können Sie Texte aus verschiedenen Büchern als Platzhalter verwenden, wobei Sie die Quelle und die Länge des Textes selbst bestimmen können und ob es sich um einen Absatz, eine Liste oder einen Titel handeln soll. Die Länge kann mithilfe eines benutzerfreundlichen Schiebereglers eingestellt werden, nach dessen Betätigung der Text automatisch in die Zwischenablage kopiert wird.

Leider stehen zur Zeit nur englische Buchtitel zur Verfügung, aber selbst englische “Blindtexte” sind mir lieber als das ewige “Lorem Ipsum”.

Website: http://www.fillerati.com

Popularity: 2% [?]

Übersichtliche Darstellung
der Möglichkeiten die CSS3 bietet

Das css3-click-chart bietet eine übersichtliche Darstellung der Möglichkeiten die sich mit CSS3 für den Webdesigner eröffnen. Für jede CSS Eigenschaft kann durch Klick auf die Überschrift der Quellcode angezeigt werden. Also beispielsweise für HSLA-Farbwerte, mehrspaltige Layouts, Text-Effekte oder abgerundete Ecken:

Website: http://www.impressivewebs.com/css3-click-chart/

Popularity: 2% [?]