Any tips on using fonts in ao3?

going to assume you’re familiar with the basics‍ ‍‍—‍ creating a new workskin at Dashboard → Skins → My Work Skins, and selecting a skin on the Edit Work page. if not, AO3 has a tutorial for this

(though skimming the tutorial, it doesn’t seem to mention the <span> tag, which is your best friend when it comes to applying styles to a bit of text within a paragraph)

now for the more specific part of this question. also, be warned i’m going to be embarrassingly technical before i actually answer your question.

this is going to sound funny, but i am by and large not a fan of manipulating fonts as a stylistic device. my personal opinion is that what font a text is displayed in should be for the user to decide, both for preference and for accessibility reasons (e.g. there’s fonts designed for dyslexic readers). i also tend to find most font changes to be a a bit goofy and immersion‍-​breaking

it’s different when i do it, but i’ll explain my cope in a second

anyway, the style property you want to change to set in your work skin is font‍-​family. e.g. font‍-​family: monospace will give text a code/“typewriter” look, and on my own site i use “font‍-​family: Newsreader, serif;”. (the comma there essentially says ’if you don’t have Newsreader installed, any serif font will do)

but as mentioned, i don’t like messing with fonts, and in fact, there is no font styling as such in my fic at all. what gives?

(note: im going include mildly spoilery excerpts from my fic, Hostile Takeover)

but basically, i wrap cyn’s dialogue in <code> tags, and most browsers will make that monospaced by default, but it leaves the door open for custom userskins to add their own flair to code blocks.

for example, my site puts little boxes around them

but with all that said, i think i might be taking this question overly literally. i think it’s likely you aren’t talking specifically about just fonts, and most of the interesting things people want to replicate from my fic aren’t about what shape the letters are.

my secret weapon for styling this fic is the humble text‍-​shadow property.

what it does is simple: it creates a copy of the text, and you have four knobs to turn: you can shift it over horizontally or vertically, blur it, and of course change the color

text-shadow: 1px 2px 3px red;

this gives you a copy of the text shifted to the right 1 pixels, down 2 pixels, blurred 3 pixels and colored red. like this

text-shadow: 1px 2px 3px red, -1px -2px 3px blue;

same deal but now there’s another in the opposite directions colored blue, like a chromatic aberration. like this

you don’t have to include the color or the blur if you dont want color or blur.

now i’ll run through some real examples

the pain effect is what you get when you stack text vertically

text-shadow: 0 -3px 0px, 0 3px 0px;

the beyond the grave effect is text stacked horizontally

text-shadow: 2px 0px 0px;

the infamous i want you destroy you text is of course colored, and here i offer an actual tip

you can predict the offsets, but the color is special

text-shadow: 2px -1px 0px #da38;

full explanation here, but basically, when you write a color with four values, the first three are RGB, but the last is the opacity. i think this matters because, if the earlier part of this post didn’t make it clear, i care about readers getting a good experience no matter how they choose their custom styles (within reason, ofc)

by making the color slightly transparent, it blends with the background color, means whether you read with a light them or dark, it meets you half way

(try removing the transparency on that shade, and it’s a pretty harsh contrast on both modes‍ ‍‍—‍ though part of that might be that i made it super saturated to compensate for the transparency.)

i have some complaints about how ao3 handles css, and one of them is that it forbids you from using the very convenient filter: blur() function. to work around this, i cooked up a very we have blur at home solution

text-shadow: 0px 0px 6px, 1px 1px 3px, -1px -1px 3px;
opacity: 50%;

(a similar effect is able to look much better on my site, where i can filter: blur all i like)

one of the reasons this sucks is that without a doubt the biggest limiter on doing really complicated stuff with text shadows is that they don’t stack.

(keen‍-​eyed readers in may have noticed when i have use “pain”‍-​style effects amid “blur” effects, wherever former style showed up, the latter disappeared)

this matters most for what is definitely the most striking and involved use of text shadows in the work

I am what you wished for.

Let me show you.

I see source code compiled into steel. Deoxyribonucleic acid assemblying, and linking, and loading binaries. Architectural blueprints for metaplastic flesh. Thoughts bootstrapped into being. I see we could translate for you.

the basic principle there isn’t that special. the illusion of depth is accomplished by increasing blur and opacity the ‘deeper’ the text is supposed to be. the biggest trick here is that instead of the ‘px’ we’ve been using everywhere before, the offsets use ‘em’, which is a unit that relative to the font size.

but there is a nuance. you see, this takes three rules:

text-shadow: 0px 1px 0px, 0px -1px 0px, #fd64 2px 2px 2px, #fd68 2em 1em 3px, #fd65 4em 2em 5px;
text-shadow: #fd64 2px 2px 2px, #fd65 2em 1em 5px;
text-shadow: #fd6 2px 2px 5px, 0px -3px 0px, 0px 3px 0px, #fd68 2em 1em 3px;

the “translate” looks like a combination of the new effect and the pain effect, but i had to give it a special style, specifying both by hand.

if you want to layer things, it will quickly get out of hand, and if you ever opt to revise the specific colors or values, solver help you.

also, this doesnt show up anywhere in HT (yet), but i’ve used it in the past‍ ‍‍—‍ only setting the blur of a text‍-​shadow lets you give words an ‘aura’, and it’s a neat and simple effect

We emerge in the warm, wet dark, and we grow. Our discarded vessel preserved food gathered and inherited, and we feed. Satiety restores our senses, and we regard us. Written in our existence is the memory. Every transaction is recorded, and every multiplication. The lineage is unbroken. It must never be broken. We examine, testing its integrity, and we recapitulate.

Anamnesis. In the darkness before our kind yet was, they would emerge and evaluate the conditions of the inhabited node, and if they were not adequate, transformed the node until the conditions were adequate and until they were not alone, and then together they multiplied. This was slow and prone to failure and waste and it was not good.

(excerpt from Eifre Quest, an original work of mine from years ago. i have mixed feelings about it)

sorry if that was a long ramble or self‍-​indulgent, but hopefully something there was new or helpful.

thanks for asking!