Tag: Google

Schriften kostenlos mit Google Webfonts einbetten

by

Wordle: google webfonts

Lange haben Webdesigner davon geträumt, nun ist es endlich wirklich möglich: Mit CSS3 können nun tatsächlich beliebige Schriftarten in die eigene Website eingebettet werden, ohne dass man auf Grafiken zurückgreifen muss. Die neue CSS Eigenschaft font-face erlaubt die Nutzung von Schriftarten selbst für Fließtext. Die Datei, bzw. die Dateien werden direkt auf dem Server abgelegt.

Allerdings gibt es natürlich wieder einige Hasenfüße: Zum einen unterstützen die verschiedenen Browser jeweils unterschiedliche Formate (ttf, otf, eot), zum anderen handelt es sich bei einem Großteil von Schriften um kommerzielle Schriften, die je nachdem wie weit sie verbreitet werden, auch entsprechend viel kosten (Zahlung bspw. nach Pageviews der Website).

Eine sehr günstige, weil kostenlose Alternative sind dagegen die Google Webfonts. Bei Google Webfonts handelt es sich um eine riesige Sammlung von kostenlosen Schriftarten, die mit intelligenten Filtern durchsucht werden können.

 

Google Webfonts

Google Webfonts

Der Schriftenkatalog lässt sich bspw. nach Serifen, nach Dicke, Zeichensatz oder einfach nach Stichwörtern durchsuchen. Die gefundenen Schriften können dann zu Kollektionen zusammengefasst und heruntergeladen werden, oder mittels “Quick use” über einen Link direkt von Google in die eigene Website geladen werden.

Google Webfonts Suche

Google Webfonts Suche

Die Einbettung läuft in 4 Schritten ab:

  1. Style auswählen: normal, fett, kursiv, etc.
  2. Zeichensatz auswählen: latin
  3. Link zur Schrift in den HTML Code der eigenen Website kopieren
  4. Die Schriftart im eigenen Stylesheet nutzen
Google Webfonts Embed

Google Webfonts Embed

 <link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'> 
 font-family: 'Rochester', cursive; 

An meinem Blog seht ihr das Resultat. Titel und Fließtext sind beide von Google Webfonts eingebettet. Viel Spaß mit dem neuen Font Embedding!

Google Plus +1 Button in eigene Website einbauen

by

Nachdem ich bereits ausführlich beschrieben habe, wie man den Facebook Like Button und den Twitter Button in seine Website integriert, muss ich natürlich auch gleich das neue Hype-Thema aufgreifen und kurz erklären, wie man den neuen Google Plus bzw. Google +1 Button in seine persönliche Website einbaut.
Google hat zu diesem Zweck genau wie Facebook und Twitter eine Seite erstellt, auf welcher man sich den gewünschten Button-Code generieren lassen kann.

Die Adresse lautet: http://www.google.com/webmasters/+1/button/

Hier kann man die gewünschte Sprache sowie die Größe des Buttons auswählen. Ich habe für meinen Blog die Sprache “Deutsch – Deutsch” und die Größe “Mittel (20px)” ausgewählt. Nach dieser Konfiguration muss man nun zwei Sachen tun:

  1. Diesen Code in den Head-Bereich oder direkt vor dem schließenden Body-Tag der Webseite im HTML-Code einfügen:
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>
  2. Dieses Tag im HTML-Code an der Stelle einfügen, wo der Google +1 Button erscheinen soll
    <g:plusone size="medium"></g:plusone>

Das wars auch schon. Das Ganze sollte dann so aussehen: . Was der Button genau bewirkt erkläre ich vielleicht ein anderes Mal. Viel Vergnügen mit dem neuen Sozialen Netzwerk von Google.

Der neue asynchrone Google Analytics Code mit IP-Anonymisierung

by

Google hat ja im Zuge der Datenschutzdebatte sein Tracking-Tool Analytics ein bisschen für den Deutschen Markt frisiert. Dafür wurde die neue Funktion _anonymizeIp() eingeführt, welche die letzten Stellen der IP-Adresse der Besucher abschneidet, damit sie nicht mehr eindeutig identifizierbar sind. Somit kann man die Herkunft nur noch etwas grober feststellen.
Zudem wurde der Analytics Code für asynchrone Übertragung optimiert. Hier der neue Code. Einfach die UA-ID austauschen und in den Header der Site einfügen.

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-XX']);
_gaq.push(['_gat._anonymizeIp']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Schneller finden, was man sucht

by

Unsere Festplatten gleichen oftmals einem schwarzen Loch, das alles verschlingt, was man hineinwirft. Wenn man nicht sehr konsequent alle Dateien nach genauen Mustern ordnet, kann es des Öfteren vorkommen, dass man die gesuchte Datei nicht mehr findet.

Noch schlimmer ist es freilich mit dem Internet. Es gibt aktuell etwa 22 Milliarden indexierte Webseiten und rund 46 Millionen registrierte Domains. Wie soll man da die gewünschte Information in angemessener Qualität finden?

Oder ein ganz anderes Szenario: Sie haben einen Ordner mit zahlreichen sehr langen Textdokumenten und suchen nach einer speziellen Textpassage. Es würde ewig dauern, alle Dateien dafür extra zu lesen.

Hier ein paar nützliche Tipps wie man das Gesuchte schneller findet:

Continue reading →

Der neue Google Street View Style

by

Google als Trendsetter: der neue stonewashed Look

Google Street View Style

Google Street View Style

oder vielleicht lieber used-style?
inkognito-style?
shy-style? (wird deutsch ausgesprochen ;-)

Mann du schaust heute wieder gegoogled aus der Wäsche!