cancel
Showing results for 
Search instead for 
Did you mean: 

Displaying different fonts

netreg
Grafter
Posts: 114
Registered: ‎24-08-2007

Displaying different fonts

Hi all,
Can you display a font (Wonton) on our website, but am I right in thinking that if the end user doesn't have that font installed then it will be displayed using another default font..
if so, is there a work around.  At the moment I make little jpg files with the text in it and display that instead.
any help/advice would be appreciated.
5 REPLIES
MikeWhitehead
Grafter
Posts: 748
Registered: ‎19-08-2007

Re: Displaying different fonts

There are a few ways possible, but I personally wouldn't recommend them.
1) sIFR   -   Converts text blocks and a Flash font onto a flash movie which you can then display (I've never used it, but I believe that's the jist of it)
2) Graphics   -   The method that you are currently using; At a push this would be acceptable for headings, but blocks of text would cause disruption to your used bandwidth, end-users' consumed bandwidth, page load times, and remove the ability for web search spidering.
3) Microsoft WEFT   -   An evil tool brought to you by an evil company (from a web PoV, in this case). Only available for Internet Explorer end-users, this does what you want but it cuts out users of other (and often superior) browsers.
Why is it that you would prefer to use a non-standard font? (and by standard, I mean one that is either included in the majority of browsers/operating systems, or that falls back kindly).
They are pretty much your options, I hope this was of help.
Prod_Man
Grafter
Posts: 286
Registered: ‎04-08-2007

Re: Displaying different fonts

Well ...
You can continue doing what you've already done automated using PHP to save you time ( if you're doing it all by hand ).
You make a simple Function to do it all for you.

<?php
function Str2ImgFont($Text){

for($i=0;$i<strlen($Text);$i++){

$chr = substr($Text,$i,1);
$HTML .= '<IMG WIDTH = "16px" HEIGHT = "16px" SRC = "images/customfont/'. $chr. '.jpg">';

}

return $HTML;

}
?>

You can do it another way.
So long as the font is loadable via the PHP GD Functions (TTF/GDFont)...
You can make blocks of text as a continuous image, dynamically.
Now you cna do it one of two ways.
1. With a GET Variable which contains the text.
2. A backend which uses Files/Database to recall the Text by another means.
I can provide a sample if you wish.
Down side: it requires a little bit of Server Time to create the Image.
Hope that throws up some options.
Jim
MikeWhitehead
Grafter
Posts: 748
Registered: ‎19-08-2007

Re: Displaying different fonts

Got to agree with Jim on this; of all the evils as options, the graphical route is the lesser, and letting it be handled server-side takes a lot of hassle away from yourself.
I personally wouldn't go with the Str2ImgFont function if there is more than a handful of characters, as your markup will start to get very messy, very quickly. However the alternative solution that he has mentioned would be more suitable, and would definately go with a database backend (although I am making quite a number of assumptions on what the text is being used for as not much detail has been given yet).
It's all quite bad development practice however; use of a standard font would be much cleaner, and wouldn't give site reading applications a mechanical headache.
Prod_Man
Grafter
Posts: 286
Registered: ‎04-08-2007

Re: Displaying different fonts

Hello again,
Yeah, as MikeWhitehead says.
That function I've just quickly knocked up was just an Example of makeing life easier. xD
I'd definitly go with a Database Backend with an Administraiton Panel because,
it can save you a lot of hastle and offer you a lot of Dynamic control over the content,
without haveing to edit the Files manually each time.
Irrespective of weather you compromise on the font and go for a standard one...
The Server Side Image Generation will require a good deal of experimentation and development.
Format of the Output?


  • JPEG - Compresses nicely, widely accepted by Web Browsers,
    some visual loss in colour, things like background colours might look awful in JPEG and interfere with the Font Face,
    and cause any number of Secondary problems with respect to the Fonts readability.

  • PNG - Size relative to Colour Pallet and relatively lossless Colour possibly loss of Brightness...
    You can then decide to have: transparency? or a solid background colour for pieces of Text.
    As PNG supports transparency it is a useful thing to implement,
    as it doesn't then mean changed of code for each Colour Theme.


so, you'll have to weigh up what's best for the colour scheme of the Website and for Transfer Limitations...
but ultimately I'd place my bets that PNG would be the best overall solution.
Features?
Well there are some necessities in it even working!

  • Text wrapping - Otherwise, text will be out of readable bounds upon the Image and the Font Size...
    this leads ot the overall size of the image with respect to width and height

  • Text colours - If you require colouring of the text that is.

  • Text offset/alignment - There can be issues with a non fixed-width font and aligment.


Possible Benefits

  • Slightly harder for people to copy and paste (text wise)

  • allows a lot of fucntionality with Images and Text which is less easily done with HTML
    Such as blending images, rotated text etc..


Drawbacks/Problems

  • The font will have to appeal to the audience and others which may have dissabilities such as: Dyslexia;

  • Can also save the image with the Text in, which means the image may need to be stained to retain the texts origin;
    This can acutally be easily remodied within PHP GD's functionality with Alpha Blending/Masking and what not if you so choose...

  • Means that changeing font size may become an issue for the Visually impared (generally the elderly population)
    this means that either the Browsers Zoom function will have to fill in OR you allow a means of controlling Font Size with a parameter;
    Again, this isn't so much of a problem as Text Size can be modified to any sitable size within reason.


Jim,
netreg
Grafter
Posts: 114
Registered: ‎24-08-2007

Re: Displaying different fonts

All, thank you kindly for your responses..  I shall read and try to digest. Smiley