Text

Using web safe fonts (custom fonts)

A system font or web-safe font is one that’s already assumed to be on the vast majority of users’ devices.

'What is a web-safe font?'

As mentioned before; a system font or web-safe font is one that’s already assumed to be on the vast majority of users’ devices. Meaning that these fonts should already be installed in your device.

Web-safe fonts are perfect to use when you cannot/do not want to import fonts using embed codes or source links.

Despite the name, though, web-safe fonts aren't 100% safe, in a way that there's still a possibility that these fonts may not have been downloaded or installed correctly in other devices. The possibility for this to happen is really low, but still, there is a possibility. So when we make use of a font, we always put in a fallback font.

Fallback fonts will act as a backup if in case the font you wanted to use is not working for some reason. Fallback fonts typically are fonts from generic and common font families, like serif. If the fallback font doesn't work either, it will move onto the next fallback font, and then onto the next one if it doesn't work, then the next...

How to use web safe fonts (code)

Web-safe fonts do not require adding in a source. You can type them in for the font-family field as is. Usually, the layout looks like this:font-family: font name, fallback font;

The first font listed is the first one that will be loaded. Again, if the font doesn't work, it will move onto the next font. If that doesn't work, it will move on again...This means you can have more than two fonts listed in there. For example:

font-family: Arial, Helvetica, sans-serif;

If Arial fails, it will use Helvetica. If Helvetica then fails (while Arial does not work), it will move onto sans-serif. Note that your last fallback font must be one of the most generic families to make sure that, even if all else failed, you still have one font.

Just a reminder that the code should look like this:

<class ID> {
font-family: <font>, <font>;
}

Other properties for fonts (code)

These are just other basic properties that you can add to your code to further manipulate the appearance of your text.

Color

color: COLOR;

Change COLOR to hexcode, rgb, or the color word.

Font size

font-size: SIZE;

Change SIZE to a number with the pixel unit (example: 15px), a size (small, large, etc.), a percentage (100%, etc), or anything that is listed here.

Font weight (bold text)

font-weight: ;

Go here for a list of values.

Font style (italic text)

font-style: ;

Go here for a list of values.

Resources

• CSS Fontstack - list of web-safe fonts. Has features that allows you to pick the specific fonts, compatibility stats, and more. If you are using this site specifically as a reference, just copy the text under 'Fonts in stack'.
• w3schools page on web-safe fontsw3schools page on fallback fonts - has a list of commonly used fallback fonts.
• mdn web docs - page(s) regarding fonts (similar to w3schools).
• font test - an empty JanitorAI account used to display custom font that can be used on the site.

'Glow' effect (text-shadow or box-shadow)

To give a text a 'glowing' effect, just apply the 'text-shadow' to your CSS class. I recommend going to w3schools' pages on text-shadow and box-shadow, or going to this site that has code generators for this. But it's simple, you just have to add the text-shadow property. Done like so:

<style>
SAMPLE ID {
/* insert other properties */
text-shadow: 2px 2px 8px COLOR;
}
</style>

You are free to adjust the glow effect using the numbers.

Replace COLOR with your chosen color/hexcode.

SAMPLE ID with a class ID. You can click here for this guide's list of universal class IDs.

As an example, here is my code that I use for my profile:

.css-2mfldf, .css-tn683j {
font-family: "Playfair Display SC", serif;
font-weight: 700;
font-style: italic;
color: #d4af37;
text-shadow: 2px 2px 8px #c4a747;
}

If you want to give an element (specifically, a container) a glow then you can change text-shadow to box-shadow.

Updated on: 01/08/2025