[MOD] Adding your own font to site (ver.2)

For Articles relating to more than one ISC version
Post Reply
Snooper
Posts: 264
Joined: Sat Jun 26, 2010 9:22 pm

[MOD] Adding your own font to site (ver.2)

Post by Snooper »

I have already done a similar mod on this subject :- viewtopic.php?f=8&t=781

But as always I try to keep things simple where I can. So here I share an alternative way to add differing fonts to your web site so that it can develop its own personality, but more importantly, open up the design element to something more adventurous and dynamic !!..

Clearly we start with a font.. Any .TTF (TrueType Font).. You then need to convert this font into an .EOF or OpenType Font. This is so that browsers that are basically 'crap' at confirming to W3C XHTML2 standards *cough** IE for example, can still get a look in.

However, to continue...

In this example I am using a font called cali.ttf.. I go to an online .EOF converter service that is free - http://fontface.codeandmore.com/

Here I convert my .TTF. The download I am given will be a .ZIP file, so might have a name like - cali1331664190.ZIP

Once unzipped, you will be given a number of files -
The now converted font cali.eot.
A test .HTML example using your font.
The original cali.ttf file.
And finally cali.woff.

NOTE
Web Open Font Format (WOFF) files are an agreed standard by all browsers since 2009/10. In truth this 'fudge' has limitations which simplify to your needing IE9+, Google Chrome 6+and Opera 11+. Firefox has been able to read/use WOFF since version 3! So using WOFF in web design, will have limited viewing in many lower versions of browsers at this time. If your typically 'arty farty' and are trying to impress. Fine.. But if we cant see the result, maybe your site is not worth a second visit. Looks don't keep customers, and patronising with fancy high level un-usable browser stopping nonsance is pointless!! Errm.. *cough* mini rant over :lol:

Scalable Vector Graphics (SVG) are a specification for newer browsers and an agreed font format since around 1999. The idea of .SVG is to allow web developers construct web sites with true scalable facing without loss of clarity or definition of page. Effectively Tablet/mobile and notepad users.

I have no doubt Both .WOFF and .SVG will feature strongly in HTML5 projects in the near future... !!

The .HTML code-

Code: Select all

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@font-face {
    font-family: 'AristocratSF';
    src: url('cali.eot');
    src: url('cali.eot?#iefix') format('embedded-opentype'),
         url('cali.woff') format('woff'), /* WOFF for newer browsers */
         url('cali.ttf') format('truetype /* TTF file for CSS3 browsers */
         url('cali.svg#cali') format('svg');  /* SVG file for XML browsers */
    font-weight: normal;
    font-style: normal;
}
</style>
</head>
<body style="font-family:'AristocratSF'; padding: 80px; text-align: center;">
<h1>test heading h1</h1>
<h2>test heading h2</h2>
<h3>test heading h3</h3>
<p>test normal paragraph</p>
</body>
</html>
The output result will be along the same lines as my original 'Cufon' approch (URL at top of page).

However, if we want a more generic non-H tagged approach (h1, h2 etc.), we can go the following <spann> </span> route-

Code: Select all

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@font-face {
 font-family: AristocratSF';
 src: url("cali.eot") /* EOT file for IE */
}
@font-face {
 font-family: AristocratSF';
 src: url("cali.ttf") /* TTF file for CSS3 browsers */
}
span.demo {
 font-family: AristocratSF';
 font-size: 14pt
}
</style>
</head>
<body>
<span class="demo">
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
123456789.:,;(:*!?&apos;"
</span>
</body>
</html>
Image

Either option of use is applicable to changing fonts on your web site without viewers needing the same font locally on own comp' at time of viewing.. Enjoy!
ISC 5.5.4 Ultimate : Being used here -- http://www.kdklondon.com

Emi052
Posts: 1
Joined: Mon Apr 16, 2012 10:25 am
Location: Canada
Contact:

Re: [MOD] Adding your own font to site (ver.2)

Post by Emi052 »

Thansk for share wonderful url!!!

Tony Barnes
Posts: 744
Joined: Thu Jun 18, 2009 8:59 am

Re: [MOD] Adding your own font to site (ver.2)

Post by Tony Barnes »

Yep, thanks for this, got a couple of site builds coming up that it will be great for :D

How compatible is it - all the way back to IE6..?!?

Post Reply