Typography Settings: Fonts, Size & Style

The Flipbox plugin gives you full typography control for every text element in your flip box — the front title, the back description, and the back button. You can use any Google Font, adjust sizes, change weights, and control alignment, all from within the editor.

Typography Elements You Can Customize

There are three text elements in a flip box, each with their own typography settings:

1. Front Heading – The title on the front face
2. Back Info Text – The description/body text on the back face
3. Back Button – The call-to-action button text

Each of these has the same set of typography controls, described below.

Font Family (Google Fonts)

The font family field accepts any Google Font name. Simply type the name of the font you want to use (e.g., Roboto, Open Sans, Playfair Display, Lato).

When you save the flip box, Flipbox automatically loads the correct Google Font CSS so the font appears on your website.

Important: Make sure Google Fonts loading is enabled in Flipbox → Settings. If it’s disabled, custom Google Fonts won’t load on the front end. See Font Awesome & Google Fonts Settings.

Popular Google Font Choices

• Roboto – Clean, modern, highly readable
• Open Sans – Friendly, versatile, widely used
• Montserrat – Strong headings, great for bold titles
• Lato – Elegant, balanced for body text
• Playfair Display – Stylish serif, excellent for editorial styles
• Raleway – Geometric and elegant for headings

Font Size

Enter the font size in pixels. There’s no minimum or maximum enforced — use whatever looks right for your card size and layout. Common starting points:

• Front heading: 18–28px
• Back description: 14–16px
• Button text: 13–16px

Font Weight

Font weight controls how bold or thin the text appears. Values range from 100 (thin) to 900 (black/extra bold):

• 300 – Light
• 400 – Regular (normal body text)
• 500 – Medium
• 600 – Semi Bold
• 700 – Bold (headings)
• 800 / 900 – Extra Bold / Black

Note: Not all font weights are available for every Google Font. If a weight isn’t available, the browser will fall back to the nearest available weight. Check Google Fonts to see which weights your chosen font supports.

Font Style

Choices are:

• Normal – Standard upright text
• Italic – Slanted/italic text

Text Alignment

Aligns the text within the flip box element:

• Left – Text sits flush left
• Center – Text is centered (most common for flip boxes)
• Right – Text sits flush right

Center alignment is the most popular choice for flip boxes because cards are typically viewed in a symmetrical grid.

Padding Around Text

In addition to font settings, each text element has padding controls — top, bottom, left, and right (in pixels). Padding adds space between the text and the surrounding elements or card edges.

Adjust padding to:

• Move the title down from the top of the card
• Add breathing room between the description and the button
• Keep text from sitting flush against the card border

Tips for Great Typography

• Use 2 fonts max: One for headings (front title), one for body text (back description). More than two fonts feels cluttered.
• Pair fonts thoughtfully: A bold sans-serif heading with a lighter body font is a classic, readable combination.
• Match your theme fonts: Use the same fonts your theme uses for a cohesive look. Check your theme settings or CSS to find out which fonts it loads.
• Don’t go too small: Description text below 13px is hard to read on the small back face of a card.