Search my Blogs and my website

Tuesday 12 June 2012

HTML tricks & website tweaking...

Slowly but surely getting the hang of this HTML lark...

 I’ve had an ‘issue’ on my website with non-standard fonts not displaying properly. I’ve got one page for example in an old typewriter style font called Adler. But because Adler doesn’t come as standard on MS Office, it just defaults to Times New Roman on every other machine in the world apart from mine at home!
 However, I’ve found a way of embedding the font actually in the web page using the ‘@ font face’ command:

 <style>
@font-face {
    font-family: "Adler";
    src: url("ADLER__.TTF");
}
</style>

  This makes the downloader’s PC go to my server at home and actually download the font information from it. Hey presto, any PC will now display Adler, whether or not it is installed locally. You just have to make sure the font file is present in the server root directory.

 Just to prove it, here are screenshots from my PC at work before and after the @ font face code was added:


 Before. Horrible TNR!!





 After. Now in Adler.

 The browser has downloaded the font info from my server, along with the webpage.

 Wahey!!

No comments:

Post a Comment