Menu

How to make your Website texts nicer

28 Oktober 2011 - General

Everybody knows that problem:

You develop your Website on your local system. Everything looks nice and good. Then you upload your code on your Webserver, test, if everything looks like it should and you are happy.

Then a friend calls you and you got to here: What have you done? It looks horrible! The Texts are looking bad and the Paragraphs are breaking the page design!

How can that be? The Reason is, that on your System the Fonts, you are using are existing and can be loaded by the browser. On other Systems maybe that fonts are not existing. Only Arial and Verdana and a hend full of other fonts are installed on every system. But you want to use special fonts for your website that are fitting better in your design.

In the past sometimes you have to help yourself to insert this lines of Text as picture, but this was bad for SEO (Search engine optimization).

Now Google has developed a good API and its use is for free: fonts.googleapis.com. With this API it it easy to use nearly every font you want to have. Precondition is only, that google has stored the needed font, but it is also possible to upload your own fonts.

For inserting one Font in your Website you need only one single line like the insert of your stylesheet file:

<link href='http://fonts.googleapis.com/css?family=Lobster'
    rel='stylesheet' type='text/css' />

Now you are able to use this font, in my example it is the font named „Lobster“, in your stylesheets as font-family.

<p style="font-family: Lobster; font-size: 24px;">
  Dies ist ein Text for die Google Font 'Lobster'
</p>

And if you use it on your page, it can look like this:

In my opinion, this API is a really good gain for website developers and I will use it as much as often in future, when I’m developing Webapplications and/or websites.

 

 

Print Friendly, PDF & Email

2 thoughts on “How to make your Website texts nicer

Carl

Awesome!! That exactly what I was looking for. From several days I’ve been trying for make my website texts stunning but can’t able. Your mentioned view will be helpful for me. Keep up the great work.

Reply
porimol

Thanks a lot for enjoying this beauty article with me.

Reply

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.