@font-face to use any Font in Blogger ✤✤✤

Heute möchte ich mal wieder über Fonts sprechen. Und zwar geht es darum, was Google Webfonts eigentlich schon gemacht hat. Das machen wir nun für uns.
Font-Face implementiert einen Font in euren Blog, den ihr dann ganz gewöhlich verwenden könnt. Was ihr dazu braucht ist ein webfont-kit.
Am einfachsten geht es, wenn ihr eure Fonts zum Beispiel bei FontSquirrel aussucht, denn dort könnt ihr euch sicher sein, dass ihr die Fonts verwenden dürft und bei ganz vielen Fonts bieten sie bereits das fertige Kit an, oder aber ihr verwendet ihren WebFont-Generator. Passt aber auf, dass ihr die Schrift verwenden dürft, und allgemein empfiehlt es sich immer, einen Creditlink anzugeben.
Font-face funktioniert in vier einfachen Schritten. Herunterladen, Hochladen, Verlinken, Verwenden

Today I want to talk about fonts - once again. It's about the thing google did for us in the web fonts. Font-face implements a font into your blog, which you can then use like any other. What you need for that is a webfont-kit.
Easiest if you just search your font at FontSquirrel because they do give you the kit and you can be sure that you have the right to use the font, since they are free to use. And they do also offer a generator to create a kit with other fonts. But do pay attention to the licence, if you actually are allowed to use them. When in doubt always add a creditlink.
Font-face with a kit works in four easy steps. Download, upload, link and use.



Sucht euch als erstes eine Schrift aus und laded das Webfont-Kit herunter. Falls das nicht verfügbar ist, verwendet ihr den Generator.

First choose a fon and download the webfont-kit. If it's not available, use the generator.



Das Kit besteht aus einem zip-Ordner. Diesen müssen wir extrahieren, dann sind wir bereit zum Hochladen.

The kit comes in a zip file. We have to extract it in order to be able to upload it.





Geht in Google Drive und erstellt einen neuen Ordner namens Font-Face.

Open up google drive and create a new folder called font-face.



Diesen müssen wir Freigeben und zwar auf öffentlich

We have to make this available in public.



Ehe wir das Pop-Up wieder schliessen, müssen wir den Link für die Freigabe kopieren. Diesen brauchen wir später, also kopiert ihn am besten an einen Ort, an dem ihr ihn zur Hand habt, wenn ihr ihn braucht.

Before closing make sure you do copy the link given. We need that later on. Just keep it somewhere you can grab it again.



Als erstes erstellt ihr einen neuen Ordner innerhalb des font-face Ordners, dem ihr den Namen eures Fonts gebt.

In the font-face folder you wanna create a new folder with the name of your font





In diesen Ordner laden wir nun folgende Dateien hoch.

Into that folder we want to upload the following data



Geht in den Kit-ordner und öffnet den Ordner webfonts

Go back to the kit folder and open the webfonts folder





Ladet dann die darin enthaltenen Dateien hoch (was im Ordner darin ist, brauchen wir nicht)

Now upload the data given in here, leaving out the folder, we don't need that.



Jetzt brauchen wir den Link von vorhin.
Dieser wird irgendwie so aussehen:

Now we need the link we copied earlier.
It will look something like this:

https://drive.google.com/folderview?id=0Bz6HRVCs7oBadE5pRGJnbGo0OEk&usp=sharing

Den Teil den wir nun brauchen ist die ID davon, in meinem Fall wäre das
The part we need is the ID, in my case that would be

0Bz6HRVCs7oBadE5pRGJnbGo0OEk

Und nun geben wir folgendes in unseren Browser ein:
Now type the following URL into your browser

googledrive.com/host/ID

Mit meinem Beispiel also:
Using my example, a webviewlink looks like that

googledrive.com/host/0Bz6HRVCs7oBadE5pRGJnbGo0OEk

Dann klicken wir auf unseren Font-Ordner

Now click on your font folder



Darin klicken wir auf die Stylesheet datei

In there open up the stylesheet



Dort sehen wir das font-Face, welches bereits für uns gemacht wurde.
Ausserdem den Namen, den wir verwenden müssen.
Den Link dieser Seite speichern wir.

In there is the font-face code ready for us.
And the name yoz have to use.
Copy that link



Dann gehen wir in Blogger und öffnen die HTML unseres Blogs

Go to blogger and edit the html



Im Head-Bereich implementieren wir unsere Schrift.

Der Link sieht so aus.

We implement our font in the head part

Your link will look like that

<link href="http://googledrive.com/host/FONTFACEID/FONTFOLDER/stylesheet.css" rel="stylesheet" type="text/css" />

Dann können wir die Schrift mit Font-Family einbinden. Beim Header oder Heading oder wo auch immer wir wollen.

Now we can add the font using fon-family. As a header font or for the headings





Und das war's. Ich hoffe das hat euch geholfen und hilft euch dabei einiges an Bildern zu sparen, weil ihr die Schriften jetzt direkt verwenden könnt. :)

And that's it. I hope this will help you and maybe you can now save some pictures, because you can use your font directly in your blog. :)

Have Fun With It!