Making the fancy font

*
ARA      TC

Hopefully the above “words” meant to be , playfully, “XARTA TECH” appear in the fancy font I made for the purpose.

online-convert.com allowed me to convert icon files (the jpeg magnifying glass I downloaded from the web, the “X” made out of crossed tools I’d found on the web, and also an IoT house icon I modified with an X) to SVG files.

freefontconverter.com let me convert arialbd.ttf from my Windows fonts folder to SVG format (I’m only using a subset of the characters).

icomoon.io let me upload the SVG files, and make a new subset font taking my icons, some arialbd glyphs, and useful looking free glyphs from icomoon.io. After changing the whitespacing metrics to suit my needs, icomoon.io facilitated my downloading my new font in various formats including .ttf.

On WordPress I installed the “Use Any Font” plug-in from dnesscarkey.com and registered on their website to get the free single use of the API key. On the WordPress admin page for the plug-in I assigned my new “xarta” font to elements “.site-title” (a class in my theme for the site title where I put “XARTA TECH”) and a new class “.fancy-font” (for convenient deployment).

Finally for XARTA TECH I added more JavaScript in the Header Footer plugin. Although I could paste ARA      TC directly into my site customisation field for site-title (having put it together in Microsoft Word in a VM – in which I installed the xarta.ttf font file), doing so would have the unfortunate side-effect of being used repeatedly in elements in my site, and the site header, without the support of the xarta font to render the private-area font glyphs. So this JavaScript only lazily changes the site-title div contents and nothing else, without needing theme amendments etc.


With the magnifying glass glyph in my xarta font I can also do-away with using a large image for the magnifying glass.

The hyperlink in the colorbox shortcode is now:

hyperlink=""
a.wp-colorbox-inline 
{
    font-size: 3em;
    text-decoration: none;
}