PDA

View Full Version : Embedding fonts, cross platform


dubaco
03-08-2010, 05:00 PM
Hiya

Does anyone have a bullet proofed way of embedding fonts in a website for cross browser viewing?

I have the vilking font in a folder called "fonts" on my website.

I have read a lot around the subject, but as usual there are so many conflicting views from the further you go back (eg 2005, with "it's not possible") to up to date about "now much easier".
I have used the weft tool to create a .eot file and think that's only an ie solution, what about other popular browsers? eg ff and safari?

It's very very rough at the moment but the site is accessed at www.ulfr.co.uk/indx2.htm

Any help would be gratefully appreciated.

Cheers

P

Corrosive
03-08-2010, 05:05 PM
This approach works in some browsers; http://corrosiveonline.co.uk/tutorials_font-face.php You may not get a catch-all solution and have to use a couple of approaches together.

dubaco
03-08-2010, 05:15 PM
Cheers corrosive, yet again!

I have tried this but the viking font, although in "properties" says it's a true type font, doessn't seem to have the .ttf extensdion. I have tried addinbg it and without it but not succeeding.
This nis the css

@font-face {
font-family: Viking-Normal;
src: url(/fonts/viking.eot); /* IE */
src: url(/fonts/viking.ttf) format('truetype'); /* non-IE */
}

P

Corrosive
03-08-2010, 05:33 PM
I have tried this but the viking font, although in "properties" says it's a true type font, doessn't seem to have the .ttf extension.

That might be a bit of a problem then :( I think you can use a .otf font type as well.

domedia
03-08-2010, 06:23 PM
Typekit is all the hype nowadays.
http://typekit.com/

Ricky55
03-08-2010, 07:48 PM
or you could use

http://www.mikeindustries.com/blog/sifr

or

http://facelift.mawhorter.net/

I think both let you use any font of your choosing, I think typekit only lets you choose from their collection although its a good collection.

Its best used for headings though really any heavy use can be problematic.

Ricky55
03-08-2010, 07:50 PM
By the way some good video tuts to show you how to use both. They also discuss the pros and cons of each.

http://css-tricks.com/video-screencasts

dubaco
03-09-2010, 09:05 AM
Hi

Many thanks for all those who responded to my initial thread. I got very exited and decided to get my head around the Flir solution and, well you know the story, spent 3 hours trying to get it to work to no avail.

I added the following:

the VIKING-N font to the facelift-1.2.2 font directory and uploaded everything to my website,

This code just before the closing </body> tag:

<script type="text/javascript">
FLIR.init( { path: '/facelift-1.2.2/' } );
FLIR.replace();
</script>


This code just before the closing </head> tag:

<script src="/facelift-1.2.2/flir.js" type="text/javascript"></script>

and edited the config-flir.php file to include:

$fonts['viking'] = 'VIKING-N.ttf';


.......and still not working. Can anyone please throw some light on this? I shouldn't think that everyone has tried it but if it would work, it certainly should have reall potential for headings and sub-headings.

P