Finding Matching Fonts

Experience in trying to Find Fonts matching those on the watermarks of Ceylon Currency. There are many sites with a huge number of fonts, but finding a matching font is not easy. Websites like have fonts classified under various categories and also allows you to filter based on if the font is commercial or public domain etc. It allows you to type a custom text and shows that text in the various fonts. However, most of the fonts displayed are far removed from the font one is searching. One may find a font which has the primary characteristics but there is no way to fine tune the search.

The website whatfontis.com has 550K+ fonts
allows you to feed in an image and it searches similar fonts, up to 80 after free registration. This website also allows you to filter based on if the font is commercial or public domain etc. However, the watermark images are too noisy and are not useful for this search. Using an image of a font selected and copied from another website like listed above allows you to get 80 similar fonts 80 to select from and the process can be iterated. However, this selection does not fine tune even with even basic characteristics like the ratio of height to width. of the characters, so such iteration is not useful. It is not to difficult to find a close match, but not an exact match.

A primary difficulty is the ratio of height to width. That can be changed when the watermark image is compiled within photoshop. CSS property font-stretch: is currently supported only on IE and Firefox and also needs fonts that allow that action.

Many watermarks use a shadow on the font, having letters darker than background with an underlayed shadow lighter than background about half line width to the right and bottom. Looking through about 400 fonts classified as shadowed in 1001fonts.com none matched the even close. Overlaying Black text on white with a shift in pixels of 5% to 10% of font size in points gave almost the desired shadow.

The default font-size and line-height is different for each font and one cannot just replace one font with another. These parameters need to be scaled and the Position of text adjusted to fit new font.

Using position: fixed one can display the table and image can be dragged-up behind the illustration for comparison and adjusted as needed using the horizontal and vertical Scroll bars.

On click on link wm a new browser window of required size is opened using the Javascript 

<a href="image_wm.html" 
 onclick="window.open(this.href,'wmID','width=widthpx,height=heightpx');return false;">wm</a>
where image_wm.html is the URL with formatted text and watermark image displayed at 100 dpi. wmID is unique ID for each such link and width and height are the numeric pixel width and height of window opened. ;return false; stops the same being also loaded to parent browser window. Use CTRL-R to refresh after editing html to fine tune the parmeters.

Each string of text has 4 variable parameter that can be adjusted by trial and error. 

<font id="uArcID" style="position: fixed; top: toppx; left: leftpx; 
 font-family: font-name; color: white; font-size: sizept; letter-spacing: spacept;"> 
 string of text </font>
 <script>renderarcs('uArcID',radius,direction);</script>
If the Text is drawn as an Arc using function renderarcs defined by include 
<head>
<script src="/scripts/fbl0lhq.js"></script>
<script src="/scripts/CircleType-master/dist/circletype.js"></script>
<script src="/scripts/renderarcs.js"></script>
</head>
it has one additional variable parameter to adjust curvature.

For some unknown reason my HP LaserJet Printer P1102 does not use the fonts shown on the web-page vieweds with Google Chrome and uses an default font, even if that font is installed on my Windows 7 laptop PC. Needs to be investigated.