If you’ve ever wanted to have Quikscript on your own site, this page’ll show you how I put it on mine.

First, a simplified example:

<html lang='en-US'>
	<head>
		<meta charset='UTF-8'>
		<title>My Quikscript Site</title>
		<style>
			@font-face {
				font-family: AME;
				src: url('/SiteFonts/ame.woff');
			}

			html {
				font: 400 16pt/1.3 Helvetica, Corbel, AME, sans-serif;
			}

			[lang='en-Qaas'] {
				font-family: AME, Helvetica, Corbel, sans-serif;
			}				
		</style>
	</head>
	<body>
		<h1>Welcome to my Quikscript site!</h1>
		<p>Quikscript is really great. This is what it looks like:</p>
		<p lang='en-Qaas'>‘’   ‘’.</p>
	</body>
</html>

Of course, you wouldn’t want to make a whole site exactly like this. In a normal site, you’d want the CSS in its own file, possibly preprocessed with SASS.

<head> and friends

There’s nothing particularly exotic here. Declare what sort of English most of the page is in, tell the world your page is encoded in UTF-8, and give it a title.

<style>

The biggest advance in type on the web has been @font-face. With @font-face you can supply fonts to users’ browsers and they don’t have to bother installing fonts themselves. Here, I use Abbots Morton Experiment in .woff. I provide Abbots Morton Experiment in both .otf and .woff, but if you only have a font in either .otf or .ttf, Font Squirrel will convert .ttf and .otf fonts into .woff for you.

Font stacks

In addition to the font weight, font size, and line height, I’ve specified two font stacks (lists of preferred fonts, in order). Since most of the page will be in normal English unless otherwise specified, the stack looks like:

font-family: [Latin fonts] [Quikscript fonts] [fallback font];

Meanwhile, parts of the page that’re mostly in Quikscript should put Quikscript fonts first:

font-family: [Quikscript fonts] [Latin fonts] [fallback font];

I then mark up long runs of Quikscript with lang='en-Qaas'; this ensures that punctuation in long chunks of Quikscript match the Quikscript text, not the font I’m using for normal Latin-script English.

Why [lang='en-Qaas']

There’s a lot to this CSS selector; let’s unpack it a bit.

First off, this is an attribute selector that selects any element with a lang attribute of exactly en-Qaas.

Okay, why en-Qaas? You've already seen en-US at the top of the page; it means “English as written in the United States”. However, if you want to specify the language and script a bit of text is in, you’re going to have to write the language (en) and a script code (Qaas). Since Quikscript doesn’t have an official script tag like Latn (Latin), Cyrl (Cyrillic) or Shaw (Shavian), I’ve made up a tag in the “anybody can make up script tags here” block. Qaas seems like the best I can do.

Body text

If you have an element that’s mostly Quikscript, give it an attribute of lang='en-Qaas' so the Quikscript-specific CSS selector matches it. This can be something as short as a one-word heading or as large as a multiparagraph <section> complete with lists, subheadings, and asides.

quikscript.net

Using Quikscript on your own site

<head> and friends

<style>

Font stacks

Why [lang='en-Qaas']

Body text

Further Reading