Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Additional Tags:
Language:
English
Series:
Part 10 of AO3 Work Skins/Tutorials
Collections:
Fanfiction Reference Works, A Guide to Coding and Fanworks, HTML & CSS stuffs
Stats:
Published:
2015-12-15
Words:
1,136
Chapters:
1/1
Comments:
47
Kudos:
287
Bookmarks:
125
Hits:
22,622

How to Mimic Undertale Fonts on AO3

Summary:

The following tutorial/live example explains how to mimic Sans’, Papyrus’, and the main game’s text on AO3. (I also discuss briefly on how to change the font color, to say yellow, or how to write W.D. Gaster’s text, but because they both have issues attached to them, they’re not automatically included in the main code.)

Work Text:

"* Hey Papyrus... "

"What is it, Sans?"

"* What did the skeleton say when his brother told a lie? "

"Well, there was that time when you told me you finished setting up all your puzzles but really you had just napped the whole afternoon and I called you a lazybones. And then there was--"

"* 'You can't fool me, I can see right through you!' "

"...Sans!!! That isn't funny!!!"

"* Aww, I thought for sure that would tickle your funny bone. "

"Sans!!!"

* Knowing that you can mimic fonts from Undertale on AO3... It fills you with DETERMINATION."

HOW TO CODE IT

First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "Create Work Skin". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box put the following code:

/* This part creates Sans' font. Chalkboard SE is a back-up for browsers that don't register Comic Sans (like my phone), but it is similar in design. */
#workskin .sans {
  font-family: "Comic Sans MS", "Chalkboard SE", sans-serif;
  text-transform: lowercase;
  letter-spacing: 0.15em;
}

/* This part creates Papyrus' font. */
#workskin .papyrus {
  font-family: "Papyrus";
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: small;
}

/* This part creates the font for the main text.  */
#workskin .maintext {
  font-family: "Determination Mono", "8-bit Operator JVE", "fixedsys", Monaco, monospace;
  letter-spacing: 0.062em;
  font-weight: bold;
}


/* This part hides certain elements (like quotation marks) until "Hide Creator's Style" is selected. */
#workskin .hide {
  display: none;
}

Hit "Submit" (or "Update" if adding to a previous work skin), and you've created the work skin for the Undertale fonts. Now to implement them.

Go to your the work you want the fonts, and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", and decide how you want your text to be presented.

LINE BY ITSELF

If you want a line by itself, with no other words in the same paragraph, you would use <p class></p>. For example:

* Oh. Heh. That's cool, I guess.

would be...

<p class="sans">* Oh. Heh. That's cool, I guess.</p>

LINE IN A PARAGRAPH

If you want a line in a paragraph with regular text, you would use <span class></span>. For example:

"What???" Papyrus yelled. "What do you mean you don't like spaghetti???"

would be...

<p>"<span class="papyrus">What???</span>" Papyrus yelled. "<span class="papyrus">What do you mean you don't like spaghetti???</span>"</p>

As you may have noticed, both Papyrus and Sans are coded to be upper case or lower case respectively, no matter how your original text is formatted. If you don't like this option, remove text-transform: uppercase; and text-transform: lowercase; from their corresponding sections in the work skin.

You would implement the game font text in a similar way, either with <p class="maintext"> or <span class="maintext">.

The last aspect of the work skin, .hide, should be familiar to those who have used my skins before. But if you haven't, it's simple; you can use this to hide text that will only show up if the reader has creator's style turned off. To see what I mean, click here and look at the conversation at the top of the page. As you can tell, quotation marks now appear the sentences, marking them as dialogue. I did this by doing span class=hide around the quotation marks; in fact, the exact code is as following:

<p class="sans"><span class="hide">"</span>* Hey Papyrus... <span class="hide">"</span></p>

<p class="papyrus"><span class="hide">"</span>What is it, Sans?<span class="hide">"</span></p>

<p class="sans"><span class="hide">"</span>* What did the skeleton say when his brother told a lie? <span class="hide">"</span></p>

<p class="papyrus"><span class="hide">"</span>Well, there was that time when you told me you finished setting up all your puzzles but really you had just napped the whole afternoon and I called you a lazybones. And <i>then</i> there was--<span class="hide">"</span></p>

<p class="sans"><span class="hide">"</span>* 'You can't fool me, I can see right through you!' <span class="hide">"</span> </p>

<p class="papyrus"><span class="hide">"</span>...Sans!!! That isn't funny!!!<span class="hide">"</span></p>

<p class="sans"><span class="hide">"</span>* Aww, I thought for sure that would tickle your funny <b>bone</b>. <span class="hide">"</span></p>

<p class="papyrus"><span class="hide">"</span>Sans!!!<span class="hide">"</span></p>

NOTES

* That's not the right font for-- I'll stop you right there. If your readers have Determination Mono or 8-Bit Operator JVE installed on their computers, they'll see the text very close to the original game text. If they don't have it installed, it will just go down the list and pick the font that's similar enough and would show in most browsers. (AO3 has yet to allow @font-face, so that's why I couldn't go that route.) I know the fonts aren't as pixelated as in the game, but that's because the ability to turn off font smoothing has apparently been disabled in most browsers. To my current knowledge, the way I've presented it here is the closest one can get without resorting to static images with text, but if anyone else knows another way, I'm happy to hear it.

* Can the fonts be different colors? Sure, by adding color: [colorhere] to one or more of the fonts sections in the work skin, but do keep in mind that the game had colored text on a black background while the general layout of AO3 is black text on a white background. So yellow names don't show up that well. (And no, neither do pink ones).

* Is there a way to write W.D. Gaster? Yes and no. Sure, you could create a separate section in the work section, relabel it as Gaster, put the font-family as Wingdings and font-size as x-large, and then add it to your work like the others. Like this? But does that show up as words and not symbols? That's because not all browsers don't display Wingdings. (When I tested it, IE and Chrome did, Firefox and Safari didn't.) I did try to use Unicode characters to work around the problem, but it seems like AO3 strips them out if you use more than one character in a row together.

Series this work belongs to: