Minor Comic Style Improvements

I've made a few minor adjustments to the comic's style coinciding with the restart. You might not notice unless you have a keen eye for detail.

Font Upgrades

First, I've set a specific font for the free-text in comic frames. The speech bubbles have always used Sniglet, but any text that just floated there was actually set to Verdana with a fallback to sans serif. Sure, it looked fine for Windows users and didn't look too bad when I viewed them on Linux, but sometimes I'd be on a weird browser and get a weird font that looked...weird. I don't know why I never fixed this in the first three years of the comic, but when I set my mind on it I had a lot of trouble picking a free font that I liked. I ended up going with Ubuntu. Now the text should look consistent for all browsers on all operating systems.

Here's a sample of a comic in the original font:

And here's that same comic using the new font:

The difference is subtle, but I think it's important. I'm much happier with the new font.

In addition that font fix, I've added another font option for comics. Anything that's supposed to look hand-written will now use the Architect's Daughter font. It's clean and easy to read but also warm.

Here's an old comic with writing on the whiteboard:

And here's that same comic, updated for the new font:

Mobile Theme Color

Mobile users may also notice another minor change that I've made. I set a "theme color" so the address bar will be green. Oddly enough, this is done via meta tags instead of CSS like I'd expected.

<meta name="theme-color" content="#006600">

Here's what it looks like for me, in Chrome for Android:

More to Come

That's all for now, but there are more updates coming along with the new comics. Here's this week's:

Amphibian.com comic for 8 August 2018

Code Now Displayed with Hack

I hope everyone's having a nice Labor Day and not working. I'm not, unless you count working on more frog comics.

I did, however, take a few minutes to update my Eclipse to use this awesome font. It's called Hack, and it's designed specifically for source code.

This is the Hack font. Note how l looks different than 1, and 0 looks different than O. I like it.

After remembering that Eclipse has waaaaaay more configuration items than reasonably fit on its chosen method of display and fumbling through them anyway to find where to change the font, I had the thought that I should update the way I display code on my blog here to use Hack as well.

The code snippets that show up on my blog are styled using SyntaxHighlighter by Alex Gorbatchev. I downloaded it years ago and set it up on my web server. I then edited my blog template code here on Blogger to load the scripts and stylesheets necessary to make it work. Here's what I added inside the HEAD tag near the top of my Blogger template's HTML (not a real IP address - if you do this, use the address of wherever you have the SyntaxHighlighter installation):

<link href='//cdn.jsdelivr.net/font-hack/2.010/css/hack.min.css' rel='stylesheet' type='text/css'/>
<script src='//1.2.3.4/syntaxhighlighter/scripts/shCore.js' type='text/javascript'/>
<script src='//1.2.3.4/syntaxhighlighter/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='//1.2.3.4/syntaxhighlighter/scripts/shBrushJava.js' type='text/javascript'/>
<script src='//1.2.3.4/syntaxhighlighter/scripts/shBrushXml.js' type='text/javascript'/>
<script src='//1.2.3.4/syntaxhighlighter/scripts/shBrushCss.js' type='text/javascript'/>
<script src='//1.2.3.4/syntaxhighlighter/scripts/shBrushBash.js' type='text/javascript'/>
<link href='//1.2.3.4/syntaxhighlighter/styles/shCoreEclipse.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all();</script>

I am using a CDN for the Hack font itself, but my own server for SyntaxHighlighter. On my server, I just edited the CSS to prefer the Hack font first before "standard" monospace fonts. I also changed the font-size to 0.98em from 1em because I thought it was a bit large. I think it looks great now. Hopefully you agree, if you actually look at any of the code I post here.

When I post code, I use the <pre> method. I have to escape my HTML code with this method, but that's not usually a big deal. Take this snippet, for example:

<pre class="brush: js">
// I put JavaScript code here
console.log("log something");
while (froot) {
    console.log("loop")'
}
</pre>

It will look this this on the page:

// I put JavaScript code here
console.log("log something");
while (froot) {
    console.log("loop")'
}

Using SyntaxHighlighter to highlight the code used for syntax highlighting. So meta.

One thing I did notice about this font is that it is very similar to the default terminal font on my Red Hat Linux workstation. Maybe that's why I like it.

I hope you like today's comic as much.

Amphibian.com comic for 7 September 2015

Using Your Own Custom Web Fonts

Olde Geoff coude telle a goode tale.

It is the month of April, and you know what that means. Yes! The Canterbury Tales! Geoffrey Chaucer's most famous work of Middle English literature was set in April near the end of the 14th century. I loved reading the Tales as part of my high school literature requirements and have never forgotten them.

As a tribute to Chaucer some 600+ years later, Amphibian.com will be written in the style of the Tales for the next week and a half. It starts out with an unnamed narrator meeting up with a group of frogs in an airport. They're all travelling to the Moscone Center in San Francisco for a conference and agree to tell each other stories to pass the time. In the Canterbury Tales, it was a group of pilgrims travelling to Canterbury. If you've never read Chaucer's original, you can find it here: The Canterbury Tales.

I say all that as an introduction to the real topic of the today's post - using your own custom fonts on web pages via CSS.

I had to do this for the comics to get a font that looked Middle English. The font I'm using is, oddly enough, named Canterbury. You may be familiar with using Google Fonts to add a custom font to web pages, but they don't actually offer one in the Middle English style. That's why I had to do it on my own. It's not hard to do, and is the same method used by Google Fonts and font-based icon utilities such as Font Awesome.

The first thing you need is a font. There are many places on the web to find fonts, but make sure you are adhering to the license agreement. Some are public domain, others you have to pay for, and some are provided under one of the Creative Commons licenses. Here are some popular font sources:

• dafont.com
• 1001 Fonts
• Font Squirrel

Besides just having a font, you need to have that font 4 different ways. Each browser has its own set of supported formats, so if you want complete functionality across all browsers you'll need to have the font in EOT, SVG, TTF, and WOFF formats. You can usually find fonts in TTF or OTF formats. What if you don't have the rest? There are some free utilities on the web that can convert to the other formats for you. I used Font2Web but Font Squirrel has a similar service that I used once in the past.

Once you have all those font files, you need to define the font in your CSS. You do this with the @font-face declaration. In it, you give the font a family name and specify the URLs for the various file formats. Here is the CSS for the Canterbury font:

@font-face {
    font-family: 'Canterbury';
    src: url('../fonts/Canterbury.eot');
    src: url('../fonts/Canterbury.woff') format('woff'), url('../fonts/Canterbury.ttf') format('truetype'), url('../fonts/Canterbury.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Note that if you use relative paths in the URLs, they are relative to the location of your CSS file. I keep my fonts in a directory named fonts which is sibling to my css directory.

Once you have your font defined, you can use it in styles by referencing the font-family name you gave it above.

.olde-text {
    font-family: 'Canterbury';
    text-align: left;
    font-size: 1.3em;
}

As you can see, it's not that hard to use your own custom fonts in web pages. It was easy to make my text use a Middle English font. What's not easy is reading Middle English and understanding what it means. But give it a try anyway in today's comic.

Amphibian.com comic for 20 April 2015