Font Switch

This library allows you to change the fonts used by certain elements depending on which operating system a user is on. We originally created this for Aurorasoft.

How to use

First, load the script. We suggest embedding it in your website’s head section.

<script type="module" src="https://evermoretype.pages.dev/cdn/fontswitch.js"></script>

Then, in a <script> tag, use the following template.

OSFontSwitcher({
    windows: {
        sans: "Segoe UI, Arial, sans-serif",
        serif: "Georgia, serif",
        monospace: "Consolas, monospace",
        fantasy: "Impact, fantasy",
        cursive: "Comic Sans MS, cursive"
    },
    macos: {
        sans: "Helvetica Neue, Helvetica, Arial, sans-serif",
        serif: "Times New Roman, serif",
        monospace: "Menlo, monospace"
    },
    default: {
        sans: "Arial, sans-serif",
        serif: "Times, serif",
        monospace: "Courier New, monospace"
    }
});

Finally, write your CSS code:

<style>
    body { font-family: var(--font-sans); }
    .serif-text { font-family: var(--font-serif); }
    code { font-family: var(--font-monospace); }
    .fantasy-text { font-family: var(--font-fantasy); }
    .cursive-text { font-family: var(--font-cursive); }
</style>