How to create a beautiful initial letter for your blog using CSS and HTML and how to embed and install a font.

Download and install the font on your system

To have a beautiful initial displayed on your homepage you need to download a font first. Then you need to embed the font on your homepage. Doing this, you can also download other fonts and shed new light upon your homepage so that you not only have some nice initials but also a shiny beautiful font for your writing.

Download your fonts from font squirrel. Make sure you read the licences and that you use a free font. I think they are all free, but I'm not sure. Better read the licence anyway. Click here to go to page. You will find here any stuff you need and you're going to love it!

downloading a font from font squirrel
Look at this baby. Isn't this a beautiful font? This is art.

All the author asks for is a link or an image to the usage of his font. Some artists are not only artists, but also generous:

This font is free for both personal and commercial use. If you decide to use this font in any type of work please be kind to send me a link or an image. I’d love to see it in action.

Download the zip folder unzip it, doubleclick the ttf file and first of all install it on your system so you can use it in word or any other program you use on your pc.

Download and unzip.

Doubleclick on the file FFF_TusJ.ttf.

Press install.

processing...

Enjoy the font on your personal system.

How to beautify your homepage using an artistic font - steps to embed the font

Now you have to upload the ttf to your homepage:

Having uploaded the fonts to a folder on the server you can now use the fonts. First you have to add some CSS:


@font-face { font-family: 'CormorantGaramond';
             src: url('../face/Cormorant-Regular.otf') format('opentype'); }
             

But this is a different font and it is not opentype but truetype so use:


@font-face { font-family: 'FFF-Tusj';
             src: url('https://www.primitivecode.com/face/FFF_Tusj.ttf') format('truetype'); }
             
      h1 {
         font-family:FFF-Tusj;
      }

Of course you have to change the path to the file by accomodating it to your site. I have added the CSS to use this font on the h1-elements of this article. That is how you have beautiful headlines. I have to mention that adding fonts to your website can create a hell of a loading time.

Now it's time to create an initial letter

Use the following CSS:

      .initial{ 
          font-weight: normal;
          font-size: 600%;
          float: left;
          margin: 70px 8px 70px 0px;
          font-family:'FFF-Tusj';
      }

And insert the initial Letter into a p-element like this:


<p>
<strong class="initial">L</strong>orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


primitivecode.com ist eine Seite in der Hauptsache über deutsche Grammatik. Momentan ist diese Homepage nicht monetarisiert. Keiner bekommt irgendwelche Daten. Ich will nur, dass das Deutschlernen für dich zu einer positiven Erfahrung wird und dass sich das herumspricht. Wenn diese Seite dir also gefällt und hilft, dann möchte ich, dass du diese Erfahrung an deine Freunde weitergibst. Auf der ersten Seite schreibe ich, was mir auf dem Herzen liegt. Ansichten sind für mich keine Meinung, sondern ich versuche alles geradlinig und an Fakten orientiert zu erörtern.