Bio pages: Custom CSS — adding Google fonts

Web fonts are one of the quickest ways to make your bio page look distinctive, modern and less traditional or 'classic'. This guide walks through importing any font from Google Fonts and applying it to your bio page via Custom CSS.

Why custom fonts

Web fonts are one of the quickest ways to make your page look distinctive, modern and less traditional or "classic". Two minutes of CSS tweaking with a well-chosen Google Font can transform the personality of a bio page far more than any color change.

Step 1 — pick a font on Google Fonts

Open fonts.google.com, browse the catalog, and click on the font you want to use. The font's page opens.

Step 2 — select font styles

Click on Type tester on the font's page. Choose the styles you want (regular, bold, italic, etc.) and preview how they look. Each style you pick will be included in the import — so don't pick more than you actually need or your page will load extra weight.

Step 3 — copy the @import code

Two actions:

1. Click the @import option under "Use on the web".
2. Select and copy everything between <style> and </style>. (You don't need the style tags themselves — the Custom CSS box is already a CSS context.)

Step 4 — apply the font to your bio page

Open your bio page in the editor, go to Settings  ›  Custom CSS, and paste the import code at the top. Below it, add a rule that applies the font to the elements you want. For headings:

@import url('https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap');

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bungee Spice', cursive;
}

Save and update. Every heading on the bio page will pick up the new font.

Changing the body text font

You can repeat the process for body text using a different font. Pick a second font on Google Fonts (something readable — a sans-serif or a clean serif), copy its @import, and add a body rule:

@import url('https://fonts.googleapis.com/css2?family=Nobile&display=swap');

p, div {
  font-family: 'Nobile', sans-serif;
}

Complete example

Two fonts — one for headings, one for body text — combined in the Custom CSS box:

@import url('https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nobile&display=swap');

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bungee Spice', cursive;
}

p, div {
  font-family: 'Nobile', sans-serif;
}

Additional effects — size and shadow

Once you've got the font in place, you can layer typographic effects on top. Two examples:

h1 {
  font-size: 30px;
  text-shadow: 3px 3px 3px #ababab;
}

Adjust the pixel values for size and the hex color for the shadow. Subtle shadows (small offsets, light gray) read as polished; large saturated shadows read as decorative.

30 pre-loaded fonts (no import required)

OpenMyLink includes 30 pre-loaded fonts on the platform — Roboto, Montserrat, Open Sans, and others — that don't require any @import code. You can use them in your CSS directly:

h1 { font-family: 'Montserrat', sans-serif; }
p  { font-family: 'Open Sans', sans-serif; }

If you're going for performance (faster page load), prefer the pre-loaded fonts when one of them fits your design. If you have a very specific look in mind, Google Fonts gives you the full library with one extra HTTP request.