One Word in a Custom Font

What does this code do?

This code snippet will allow you to set one word (or a couple words) within a sentence to a custom font.

To set a custom font for a wider range of text, see this code snippet here.

Upload Your Custom Font

1. Click on Manage Custom Files in Design > Custom CSS

2. Upload the font file.

Code Snippets

Copy and paste the following into Design > Custom CSS

/*Import Custom Font */
@font-face {
 font-family: 'NAME'; 
 src: url(LINK);
}

Then delete the word LINK and place your cursor between the brackets. Click on the font file you uploaded to insert its url into the brackets. Then name the font whatever you would like. Just be sure to use the same exact name in the next step.

Copy and paste this code into a Code Block on your site.

<h2 style="display: flex; align-items: center; justify-content: center;">About <span style="color: white; font-family: NAME; font-size: 6rem; padding: 0 20px;">Susanne</span></h2>

Then change NAME to the name of your custom font and customize the black text to be the text you would like.

The horizontal alignment is set by justify content. The code is set to right-align the text. If you want the text left-aligned change flex-start to flex-end. If you want the text centered change flex-start to center.

Customize the color, font-size, and padding.

How To Use It

1. Upload your custom font.

2. Copy and paste the code as indicated above.

3. Customize the text, color, padding and alignment.

4. Change h2 to target the type of text you want.

   • h1 = Heading 1

   • h2 = Heading 2

   • h3 = Heading 3

   • h4 = Heading 4

   • p = Body Text (all paragraphs; there is no p1, p2, p3 etc.)

5. You can use a word, rgb, or hex code for the color.