Javascript/CSS Font Detector

[Lalit]

Hi Group,

I have discovered a technique by which we can be able to detect if a
particular font is present in a user's machine. Below is a brief info
about the script. You can find more info at my website
http://www.lalit.org/lab/fontdetect.php

"Javascript/CSS Font Detector"

This Javascript code can be used to guess if a particular font is
present in the users machine. It uses simple Javascript and some CSS
rules to check whether that font is available. This may be help of
desktop-like web application developers when they want to provide
different skins or fonts preferences to their users. This may also
help various blog skin designers which can provide different fonts for
different users based on the list of fonts that their users have. I
mean with these we dont have to always rely on the most common fonts
always, like Arial, Verdana or Times New Roman etc.

I have also made a working demo of the script:
http://www.lalit.org/lab/fontdetect.php

Please send me your bugs, suggestions, comments.

Cheers!
Lalit Patel

 

[OmegaJunior]

Hi Group,

I have discovered a technique by which we can be able to detect if a
particular font is present in a user's machine. Below is a brief info
about the script. You can find more info at my website
http://www.lalit.org/lab/fontdetect.php

"Javascript/CSS Font Detector"

This Javascript code can be used to guess if a particular font is
present in the users machine. It uses simple Javascript and some CSS
rules to check whether that font is available. This may be help of
desktop-like web application developers when they want to provide
different skins or fonts preferences to their users. This may also
help various blog skin designers which can provide different fonts for
different users based on the list of fonts that their users have. I
mean with these we dont have to always rely on the most common fonts
always, like Arial, Verdana or Times New Roman etc.

I have also made a working demo of the script:
http://www.lalit.org/lab/fontdetect.php

Please send me your bugs, suggestions, comments.

Cheers!
Lalit Patel

First of all: excellent idea!

Second: You may want to test this on wide monitors (16:9) and in the Opera
browser as well. Your script only detected Arial on my computer, though I
do have many of the others installed as well.

 

[Lalit]

First of all: excellent idea!

Thanks a lot.

Second: You may want to test this on wide monitors (16:9) and in the Opera
browser as well. Your script only detected Arial on my computer, though I
do have many of the others installed as well.

It now works on Opera 9.10. I don't have any access wide monitors. If
you can find one, please test the script and mail me the results.
Thanks for your effort.

Regards,
Lalit

 

[Richard Formby]

Lalit wrote:

[ http://www.lalit.org/lab/fontdetect.php ]

I don't have any access wide monitors. If
you can find one, please test the script

The width of the monitor is irrelevant. It is the width of the browsers
window that is important.

A normal browser window (~800 pixels wide)
http://barefile.com.au/normal.jpg

A narrow browser window:
http://barefile.com.au/narrow.jpg

A very wide browser window (notice and use the horizontal scroll bar):
http://barefile.com.au/wide.jpg

You should not be specifying that right hand margin in %. There is a fixed
size image to the right so you should be using px.

If there were a [sort of] fixed sized, say, navigaion bar, to the right then
you would us em.

and mail me the results.
Thanks for your effort.

Post here. See the results here.

 

[OmegaJunior]

Thanks a lot.


It now works on Opera 9.10. I don't have any access wide monitors. If
you can find one, please test the script and mail me the results.
Thanks for your effort.

Regards,
Lalit

Excellent job! It works and detected all fonts!

 

[Jeremy]

Hi Group,

I have discovered a technique by which we can be able to detect if a
particular font is present in a user's machine. Below is a brief info
about the script. You can find more info at my website
http://www.lalit.org/lab/fontdetect.php

"Javascript/CSS Font Detector"

This Javascript code can be used to guess if a particular font is
present in the users machine. It uses simple Javascript and some CSS
rules to check whether that font is available. This may be help of
desktop-like web application developers when they want to provide
different skins or fonts preferences to their users. This may also
help various blog skin designers which can provide different fonts for
different users based on the list of fonts that their users have. I
mean with these we dont have to always rely on the most common fonts
always, like Arial, Verdana or Times New Roman etc.

I have also made a working demo of the script:
http://www.lalit.org/lab/fontdetect.php

Please send me your bugs, suggestions, comments.

Cheers!
Lalit Patel

This is extremely clever. Nice work!

It had a 100% accuracy rate on my computer with the fonts listed, and
even worked for every font I manually entered.

Jeremy