Jeff Hayes

Jeff Hayes

Saturday, 31 October 2015 00:00

Embedding Custom Fonts in Themler

I can't be the only one who's thought that the built-in fonts are nice but might not work for a given application.  In this case, I was workign to create a grunge, hand-sketched sort of look.  I needed a typewriter font.

With a bit of googling I found an appropriate opensource font with valid licensing terms.  

Now, let me stop here a moment and go over that... with valid licensing terms.  Specifically, that means you must be licensed to use the font on a server not simply your desktop!  

Now, let's assume you are clean on licensing. In my case the license simply stated that I couldn't sell the font so I'm good to go.  But the next problem was getting the truetype font on my system into some sort of usable format for the web.  This is known as a webfont and despair not because fontsquirrel has the answer for you.  There, you can upload a font or fonts and generate a webfont kit all set to go... almost.  

  1. Go to fontsquirrel and generate your font.
    You can leave all the options at default.  When you're done, download the font zip file.
  2. Create a fonts directory in the root of your HTML space.
    For siteground that looks something like:  public_html/fonts
  3. Upload the zip file to that directory and extract it.
  4. Edit the generated font family names
    This is the step that got me.  Themler called my font "Veteran Typewriter".  Fontsquirrel called it "veteran_typewriter".  Yup, so no dice on any font loading.  I used the chrome console to inspect the element and find exaclty what themler called it.  Then I edited the stylesheet.css file to make the accordingly.

    In Themler:  

    The edited stylesheet.css:
  5. The last step is to link that stylesheet into your web site.
    There are several ways to do this but how I did it was by going into the themler settings and adding the link statement into "Additional Head HTML".

    The link statement I hear you say?  Take a look at the directory in which you extracted the fonts.  You'll find a <fontname>-demo.html file.  Go ahead and view that in your browser.  It not only shows you your font but also how to install them.  Take a look at the 4th tab over and you'll find the link statement conveniently written there for you.


Well this one had me stumped for quite a bit.  I tried several different editors and all of them were totally willing to ignore the content styling from the front-end.  This sounds like a minor issue but with a dark background and light text it could become problematic fast.  This solution works, at a minimum, for JCE and probably many other MCE variants.

  1. Create or edit a stylesheet
    My tools, by default, create an editor.css stylesheet.  That's neat but it doesn't have the required items to style the editor content.
  2. Find the body selector
    Note, mine had more than one.  You might want to just put your own down at the bottom.
  3. Add the needed styling.
    In my case, it looked like this:

    body {
    color: #ffffff!important;

    Note that every attribute is tagged with !important to ensure it doesn't get overwritten later.
  4. Save the stylesheet
  5. Flush any site caching going on
    Not so much Joomla's content caching but any caching being done by your hosting provider.
  6. Clear your browser's cache
    Yes, this is really important.  If you don't you will not see the changes.
  7. Smile because things look right in your editor now.
Thursday, 15 January 2015 00:00

Justifying K2 Images

K2 is a wondrous addition to joomla... but why oh why does it put those item images centered over the articles like that?

Chinese hackers you say?  What would they want with my itty-bitty web site?

Thursday, 11 September 2014 00:00

Victoria AM Association

More pro-bono work... well... if you can call it that when I sit on the board for this organization.  So in real life I've become their geek in charge and things like "overhaul the web site" fall onto my plate.



Friday, 06 June 2014 00:00

A facelift for Victoria AM Association

It's about time I updated what was supposed to be their interim site.

They need a web site and they want Pixelsplash to help!

Saturday, 05 October 2013 15:03


Buy a t-shirt

Monday, 30 September 2013 12:07

Configuring phpList on Siteground

Over the weekend I was working on setting up phpList, a newsletter program, for Victoria AM Association.  The problem for them was communication to members and friends.  The largest mail list they have was about 650 names and tools like Shaw webmail don't allow a single send of that size.  Shaw's SMTP servers also disallow such mass mailings.

Saturday, 28 September 2013 23:59

Viruses & Trojans Oh My!

Yesterday I went over to a client's home to take a look at their slow PC.

Page 3 of 4