Custom Fonts Pro for Confluence - User Guide

Overview

Custom Fonts for Confluence is a powerful macro that allows you to create beautifully styled text in your Confluence pages with advanced typography features, special effects, and extensive customization options.

Getting Started

Adding the Macro to Your Page

1. Edit your Confluence page

2. Type /customfont in the editor

3. Select "Custom Fonts (Development)" from the dropdown

4. The configuration dialog will open automatically

Open

Configuration Interface

The macro provides a user-friendly configuration interface with 5 main tabs: Basic, Effects, Typography, Characters, and Emoji.

1、Basic - Essential Font Settings

Configure the fundamental text styling options with an intuitive interface.

Open

Available Settings:

• Font Family: Choose from 800+ Google Fonts

  • Popular options: Open Sans, Roboto, Montserrat, Lato, Arial

  • Searchable dropdown for quick font selection

• Font Size: Set text size from 8px to 72px

  • Use dropdown or enter custom value

• Font Weight: Adjust text thickness

  • Thin (100) to Black (900)

  • Common options: Normal (400), Medium (500), Bold (700)

• Text Color: Pick any color

  • Built-in color picker

  • Enter hex codes directly (#000000)

  • Recent colors for quick access

• Text Alignment: Choose text alignment

  • Left, Center, or Right

  • Button-style selection

Key Features:

• Enhanced Text Editor

  • Multi-line text input with line numbers

  • Real-time character, word, and line counting

  • Syntax-highlighting style interface

  • Show/hide line numbers toggle

  • Current cursor position display (Ln, Col)

• Live Preview Panel

  • Real-time preview of your styled text

  • Exact WYSIWYG rendering

  • Updates instantly as you type or change settings

  • Shows text exactly as it will appear on the page

2、Effects - Visual Text Effects

Add stunning visual effects to make your text stand out.

Open

Text Shadow

Add depth and dimension to your text:

• Preset Shadows:

  • None (default)

  • Subtle, Medium, Strong

  • Glow effects

  • Various directional shadows

• Custom Shadow: Full control with CSS syntax

Text Gradient

Apply beautiful gradient color effects:

• Preset Gradients:

  • Sunrise, Ocean, Fire

  • Purple Dream, Emerald

  • Custom gradient option

• Works best with larger text (24px+)

• Full transparency and color control

Show Advanced

Toggle to reveal additional advanced effect options for power users.

3、Typography - Advanced Text Styling

Fine-tune your text with professional typography controls for perfect readability.

Open

Spacing & Layout

• Line Height: Control vertical spacing between lines

  • Range: 0.8 - 3.0

  • Default: 1.5 (recommended for body text)

  • Preset options: Tight (1.2), Normal (1.5), Relaxed (1.8), Loose (2.0)

• Letter Spacing: Adjust horizontal spacing between characters

  • Options: Tighter, Normal, Wide, Wider, Widest

  • Custom pixel values supported

• Text Indent: Set first-line indentation

  • Range: 0-100px

  • Perfect for paragraph styling

• Paragraph Spacing: Control spacing between paragraphs

  • Range: 0-50px

  • Maintains visual hierarchy

Text Decoration

Quick-access buttons for common text styles:

• Italic: Apply italic style to your text

• Underline: Add underline decoration

• Strikethrough: Strike through text for deletions or emphasis

Text Transform

Automatically transform text case:

• UPPERCASE: Convert all text to capital letters

• lowercase: Convert all text to lowercase

• Capitalize: Capitalize the first letter of each word

4、Characters - Special Character Library

Quickly insert special characters into your text without remembering alt codes.

Open

Categories Available:

• ⬆️ Arrows: Directional arrows and pointers

  • Up, down, left, right arrows

  • Curved and diagonal arrows

• ★ Symbols: Stars, shapes, bullets, and decorative symbols

  • Stars (filled and outline)

  • Hearts, diamonds, spades, clubs

  • Circles, squares, triangles

  • Geometric shapes

• ∑ Math: Mathematical symbols and operators

  • Plus, minus, multiply, divide

  • Greek letters

  • Mathematical operators

• $ Currency: Currency symbols from around the world

  • Dollar, Euro, Pound, Yen

  • Bitcoin and other cryptocurrencies

• .,; Punctuation: Special punctuation marks

  • Em dash, en dash

  • Quote marks

  • Special punctuation

• ∞ Misc: Other useful special characters

  • Copyright, trademark symbols

  • Degrees, percentage

  • Other utility symbols

How to Use: Simply click any character to insert it into your text at the current cursor position in the editor.

5、Emoji - Comprehensive Emoji Library

Add expressive emojis to enhance your content and make it more engaging.

Open

Categories Available:

• 😊 Faces: Smiley faces and facial expressions

  • Happy, sad, surprised, angry faces

  • Winking, laughing, crying

  • Love, kiss, and hug faces

• ❤️ Emotions: Hearts, kisses, and emotional symbols

  • Various heart styles and colors

  • Emotional expressions

• 👋 Gestures: Hand gestures and body language

  • Thumbs up/down, wave, OK sign

  • Peace, rock on, pray hands

• 👤 People: People and professions

  • Different ages, genders, professions

  • Family groups

• ⚽ Activities: Sports, games, and activities

  • Sports equipment and events

  • Hobbies and activities

• 🐶 Animals: Animals and pets

  • Common pets and wild animals

  • Birds, fish, insects

• 🌳 Nature: Nature, weather, and plants

  • Trees, flowers, weather icons

  • Celestial objects

• 🍕 Food: Food and beverages

  • Fruits, vegetables

  • Meals, snacks, drinks

• 📱 Objects: Everyday objects and items

  • Electronics, tools

  • Household items

• 🏳️ Flags: Country and regional flags

  • National flags

  • Regional identifiers

• 🚗 Transport: Vehicles and transportation

  • Cars, planes, trains

  • Public transport

How to Use:

1. Click on category tabs to browse different emoji types

2. Click any emoji to insert it into your text

3. Emojis appear at your cursor position in the editor

Using the Enhanced Text Editor

The text editor provides a code-editor-like experience with helpful features:

Features:

• Line Numbers: Easy reference and navigation through your text

• Real-time Statistics

  :

  • Lines: Total number of lines in your text

  • Words: Accurate word count

  • Chars: Total character count (including spaces)

• Cursor Position: Display current line and column (Ln X, Col Y)

• Toggle Controls: Show/hide line numbers as needed

• Multi-line Support: Perfect for long-form content

Live Preview

The Live Preview panel on the right side shows your text exactly as it will appear on the Confluence page:

Benefits:

• ✅ Real-time updates as you type

• ✅ Accurate font rendering using Google Fonts CDN

• ✅ All effects and styles displayed instantly

• ✅ True WYSIWYG (What You See Is What You Get)

• ✅ No surprises when you save

Page Display

After saving your configuration, the macro displays your styled text beautifully on the Confluence page.

Open

What You Get:

• ✅ All selected fonts properly loaded from Google Fonts

• ✅ All visual effects applied (shadows, gradients, etc.)

• ✅ Exact styling as previewed in configuration

• ✅ Responsive display across different devices

• ✅ Professional, polished appearance

The example shows custom fonts applied to a text block with special styling, maintaining perfect readability while adding visual interest.

Saving Your Configuration

To Save:

1. After configuring your text and styles, review in the Live Preview

2. Click "Save Configuration" button at the bottom right

3. The modal will close

4. Your styled text appears on the Confluence page

5. Publish your page to make changes visible to others

To Cancel:

• Click "Cancel" to discard changes and close the configuration dialog

Feature Comparison