Technology Tales

Self hosting Google fonts

One thing that I have been doing across my websites is to move away from using Google web fonts, using the advice on the Switching.Software website. While I have looked at free web font directories like 1001 Free Fonts or DaFont, they do not have the full range of bolding and character sets that I desire, so I opted instead for the Google Webfonts Helper website. That not only offered copies of what Google has, but also created a portion of CSS that I could add to a stylesheet on a website, making things more streamlined. At the same time, I also took the opportunity to change some of the fonts that were being used for the sake of added variety. Open Sans is good, but there are other acceptable sans-serif options like Mulish or Nunita as well, so these got used.

Changing to web fonts

While you can add Windows fonts to Linux installations, I have found that their display can be flaky to say the least. Linux Mint and Ubuntu display them as sharp as I'd like, but I have struggled to get the same sort of results from Arch Linux, while I am not so sure about Fedora or openSUSE either.

This led me to explore web fonts for my websites, with Google Web Fonts meeting my needs through options like Open Sans and Arimo. There have been others with which I have dallied, such as Droid Sans, but these are the ones on which I have settled for now. Both are in use on this website now, and I added calls for them to the web page headers using the following code (lines are wrapping due to space constraints):

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

With those lines in place, it then is a matter of updating font-family and font declarations in CSS style sheets with "Open Sans" or "Arimo" as needed, while keeping alternatives defined in case the Google font service goes down for whatever reason. A look at a development release of the WordPress Twenty Twelve theme caused me to come across Open Sans and I like it for its clean lines and Arimo, which was found by looking through the growing Google Web Fonts catalogue, is not far behind. Looking through that catalogue now causes for me a round of indecision since there is so much choice. For that reason, I think it's better to be open to the recommendations of others.

Improving Font Display in Fedora 15

When I first started to poke around Fedora 15 after upgrading my Fedora machine, the definition of the font display was far from being acceptable to me. Thankfully, it was something that I could resolve, and I am writing these words with the letters forming them being shown in a way that was acceptable to me. The main thing that I did to achieve this was to add a file named 99-autohinter-only.conf in the folder /etc/fonts/conf.d. The file contains the following:

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<match target="font">
<edit name="autohint" mode="assign">
<bool>true</bool>
</edit>
</match>
</fontconfig>

Enabling autohinting improves font appearance in Fedora 15. The TrueType bytecode interpreter (BCI) was recently added to FreeType after its patent expired, but this actually decreased font quality on my system. I applied Kevin Kofler's autohinting fix and installed GNOME Tweak Tool, which lets you adjust autohinting settings. This combination solved my problems, particularly with letters like "k". Now, I am considering trying the same solution in openSUSE, which also has unsatisfactory font rendering, though I'll have to wait for GNOME Tweak Tool until they release a GNOME 3 version.

Worth the attention?

The latest edition of Web Designer has features and tutorials on modern trends, including new ways to use fonts and typography in websites. One thing that's at the heart of the attention is the @font-face CSS selector. It's what allows you to break away from the limitations of whatever fonts your visitors might have on their PC's to use something available remotely.

In principle, that sounds like a great idea, yet there are caveats. The first of these is the support for the @font-face selector in the first place, though modern browsers I have tested handle this reasonably well. These include the latest versions of Firefox, Internet Explorer, Opera and Chrome. While the new fonts may render OK, there's a short delay in the full loading of a web page. With Firefox, the rendering seems to treat the process like an interleaved image, so you may see fonts from your own PC before the remote ones come into place, a not too ideal situation in my opinion. Also, I have found that this is more noticeable on the Linux variant of the browser than its Windows counterpart. Loading a page that is predominantly text is another scenario where you'll see the behaviour more clearly. Having a sizeable image file loading seems to make things less noticeable. Otherwise, you may see a short delay to the loading of a web page because the fonts have to be downloaded first. Opera is a particular offender here, with IE8 loading things rather quickly and Chrome not being too bad either.

In the main, I have been using Google's Fonts Directory but, in the interests of supposedly getting a better response, I tried using font files stored on a test web server only to discover that there was more of a lag with the fonts on the web server. While I do not know what Google has done with their set-up, using their font delivery service appears to deliver better performance in my testing, so it'll be my choice for now. Though there's Typekit too, I'll be hanging onto to my money in the light of my recent experiences.

After my brush with remote font loading, I am inclined to wonder if the current hype about fonts applied using the @font-face directive is deserved until browsers get better and faster at loading them. As things stand, they may be better than before, while the jury's still out for me, with Firefox's rendering being a particular irritant. Of course, things can get better...

A different Firefox II: cross-platform font display issues

One of the things that I have been sorting out on this blog is how the fonts appear in Firefox running on Ubuntu. Even with the same fonts and the same browser, serif fonts were being displayed smaller and appeared more fuzzy in Linux than on Windows. And that's even with the font sharpening that comes with turning on Ubuntu's visual effects. So, there was a spot of swapping between Ubuntu and Windows (running on VMware) while I was increasing font sizes to improve legibility on the Linux side without things going all Blue Peter on Windows. Along the way, I added a mention of the Ubuntu font ae_AlArabiya in the CSS to further spruce up things. In my earlier web building efforts, I was having to make serif fonts bigger because of those serifs. From the on-screen legibility point of view, there's a lot to be said for sans serif fonts and I may yet alter this blog's theme to use them instead, but I'll ponder the idea a bit more before taking the plunge.

A matter of fonts…

It's when you pop from one operating system to another that you realise how operating system specific it is that fonts are. For instance, only one of the names in the following list are understood by Firefox on Ubuntu, the last one: Trebuchet MS, Lucida Grande, Verdana, Arial, Sans-Serif. The reason that San-Serif is understood is that it's a general font class name in the world of CSS. However, that does not mean that you still are not at the mercy of operating system fonts. In fact, font sizes vary and 16px in one font isn't the same as 16px in another; that can mean broken layouts if you are sufficiently clumsy.

As it happens, the main menu bar on my hillwalking blog should all fit on one line, yet it took up two lines when viewed on Linux. If it did that neatly, there wouldn't be much of a problem, but it didn't. While some CSS hacking could have repaired the situation, I went for a simpler solution for now: picking a Linux sans serif font that fitted the bill better. So popping in mentions of "Nimbus Sans L" in appropriate places in my stylesheet was the way that I went. Since I don't know how this appears in other Linux distributions, the wonders of virtualisation should allow me to find out.

If I was really concerned about the fonts that were being used, I could have gone with a server-side approach: embedded fonts. I haven't tried this for a while but differing browser support was a major issue when I did: you had to create a set of files for IE and for Netscape when I was investigating such things, hardly convenient even in those days when Opera was merely a speck on the horizon and Mozilla was nascent. Though it's a valid approach for those exclusive fonts, so is questioning why you are using them in the first place. Adobe's Flash is another option for those who obsess with fonts, though how users take to this remains an open question, as does the accessibility of the approach.

For now, I plan to continue evaluating how applications appear across different operating systems. For this purpose, virtualisation serves as an excellent tool, as do Live CDs. The latter is particularly useful for Linux distributions which the former has application with more scenarios: names OpenSolaris and, with a spot of tinkering, OS X come to mind. This presents an appealing concept, especially considering Firefox has essentially become a cross-platform standard in today's computing environment. Mind you, seeing how websites are rendered by Safari running on OS X might be of interest to some.

Looking at from the user's point of view rather than the web developer's, there remains a question regarding the visiting of websites that break because of the font conundrum. If you find this happening to you a lot, it may be an idea to bring in some TrueType or OpenType fonts. With Ubuntu, this is straightforward: fire up Synaptic, search for msttcorefonts and install that package along with any of its dependencies. Logging off from and on to the system will make the new fonts available. There was a time when more work was needed than that...