Skip to content

Changing and Importing Fonts

Jump to bottom
tou - ThatOneUnoriginal edited this page Oct 25, 2023 · 3 revisions

Unless the Variable Only Wide Topics is enabled, DevForum Condensed will by default change the font to Public Sans or OpenDyslexic is enabled through the Swap Font to OpenDyslexic Variable. DevForum Condensed also modifies the Font Size and Font Weight. All three of these; Font Type, Font Size, and Fong Weight can be modified through variables.

Font Type

There are a vast array of fonts available on the internet, each with its own distinctive designs and characteristics. Whether their aim is to emulate the timeless look of traditional typography, enhance readability on digital screens, prioritize accessibility, captivate attention, or simply exude visual intrigue, custom fonts cater to a wide range of preferences and purposes.

With DevForum Condensed, you can change the Font Type to whichever one suit you.

How to Change Font Type

  1. Go to the Variables Section of the DevForum Condensed Theme (check here to learn how to access it if you don't know already)
  2. Scroll Down Until You See Font Type
  3. Delete the Default "Public Sans" and Type the Font Name of your Choice

Changing Fonts

1. System Fonts

What Are They + Where to Find

System Fonts are either 1) Fonts automatically downloaded by your Operating System or 2) Fonts you've downloaded onto your device. To see fonts that are downloaded on your system, go to;

  • Windows:
    • Control Panel > Fonts (Windows 7, 10)
    • Control Panel > Appearance and Personalization > Fonts (Windows 8.1)
    • Settings > Personalisation > Fonts (Windows 11)
  • macOS:
    • Open the Font Book Application and Select My Fonts or All User Fonts (macOS Ventura 13, Sonoma 14)
    • Open the Font Book Application and Select User or Computer (macOS Big Sur 11, Monterey 12)
  • Linux:
    • This'll change depending on Linux distribution, search up How to Manage Fonts on [Insert Linux Disto + Version] or How to See Downloaded Fonts on [Insert Linux Distro + Version]

Install New Ones

You can use platforms like dafont, Google Fonts or similar font databases to find a font.

Windows:

  1. Download the font files. These often come in compressed .zip folders. In one .zip folder, you might find several variations on the same font, such as "light" and "heavy."
  2. If the font files are zipped, unzip them by right-clicking the .zip folder and then clicking Extract. Now you'll see the available TrueType and OpenType font files. Don't worry about choosing between the OTF or TFF files, the difference between the two are not consequential for regular daily computer use.
  3. Right-click the fonts you want, and click Install. If the font comes in several variations, find one that doesn't have variations (usually denoted by the file that doesn't have a keyword like "Light" or "Heavy" denoted after the name.

Alternatively you can go to the Fonts folder and dragging the font files into it. Windows will automatically install them.

macOS:

  1. Download the font files. If the font files are zipped, double-click on the zipped file to unzip it. You'll see the available font files.
  2. Install the font by;
    1. In the Fonts app, choose File > Add Fonts to Current User. In the window that appears, double-click the font file or;
    2. Drag the font file to the Font Book app icon in the Dock, then click Install in the dialogue that appears or;
    3. Drag the font file to the Font Book window or;
    4. Double-click the font file in the Finder, then click Install in the dialogue that appears.

Linux:

  • This'll change depending on Linux distribution, search up How to Install Fonts on [Insert Linux Disto + Version]

How to Import Fonts

  1. Find the System Font you'd want to use and Remember its Name (ex: Comic Sans MS)
  2. Go to the Variables Section and Scroll Down to the Font Type Varaible.
  3. Clear the Text in the Section and Replace it with the name of the Font. If you don't have "on change" enabled (is on default), click the "Save" button.

2. Importing Fonts

Alternatively, you can utilize @import to use a font without having to download to the local machine. An advantage of this over system fonts is that you wont need to download the font onto your machine, additionally, if you share it to other people , they wont need to install it. A disadvantage is that they will be overwritten whenever an update is made (Updates will always overwrite Local Edits.) You'll also have to modify the source code yourself, albeit it shouldn't be too difficult.

How to Import Fonts

Depending on the service you're using to get the fonts from, you'll have to fetch a different link. Below is an example of how the link should look like from a few vendors;

Google Fonts: https://fonts.googleapis.com/css?family=Font+Name (ex: https://fonts.googleapis.com/css?family=Open+Sans)
CDN Fonts: https://fonts.cdnfonts.com/css/font-name (ex: https://fonts.cdnfonts.com/css/chalet-newyork)
Font Library: https://fontlibrary.org//face/font-name (ex: https://fontlibrary.org//face/archivo-narrow)

Once you've grabbed this, click the extension and click the Pencil Icon, this'll open a new tab with the Source Code of the Stylus Theme. Scroll down until you see the @import for the Public Sans and Open Dyslexic fonts. Create a new like between this and :root. Then, type @import url('[Link Here]'); After you've done this, go to the Variables section, go to Font Type and swap the name with the one you're changing it to.

Note

Whenever you update, Stylus will overwrite any local edits made to the Stylus theme, so if you have installed/inserted fonts through this method, save the imports you added somewhere else and add them back in once you've updated! Otherwise they wont appear.

Clone this wiki locally