LogoLogo
Back to studio
  • 🧠Core Concepts
    • Introduction to Formsort
    • Formsort quickstart guides
      • Add content and collect answers
      • Capture demographic data
      • Add informational content
      • Template your variables
      • Add conditional logic
      • Using conditional logic with Calculated and API variables
      • Add a scheduling option
      • End the flow
      • Review your variable schema
      • Set up integrations
    • How data works in Formsort
      • Responder UUIDs
    • Understanding flows
    • Versioning in Formsort (Deploying)
      • Variant revisions
      • Managing revisions
  • ✨Creating Flows
    • Building a new flow
      • Groups
      • Steps
      • Copy-pasting form content
  • Adding questions and content
    • Questions
      • Select
      • Text
      • Address
      • Comparison
      • Confirmation
      • Date
      • Date & time
      • Email address
      • File upload
      • Grid choice
      • Iframe
      • Image upload
      • Number
      • Payment
      • Phone number
      • Postal code
      • Question group
      • Region
      • Signature
      • SSN
      • Yes/No
    • Content
      • Statement
      • Image
      • Next button
      • Video
      • Divider
      • Map
  • Controlling the flow with conditions and logic
    • Advanced logic
  • Variable templating
  • Redirects and endings
  • Field validation
  • Flow and variant management
  • Content library
  • 🧬JSON Form Definition
  • JSON schemas
  • Validating flow schemas
  • Events subscriptions
  • Flow content data format
  • 🎨Styling
    • Customizing appearance
      • Content area & form layout
      • Buttons
      • Typography
      • UI states
      • Color and dimension variables
      • Question containers
      • Inputs and dropdowns
      • Checkmarks
      • Tables
      • Sliders
      • Divider lines
      • Progress bar
      • Comparison cards
      • Animations and transitions
  • CSS & Advanced Styling
    • Custom CSS overrides
    • Step styling
    • CSS reference
  • 🔁Form Behavior Settings
    • Variant settings
      • Form behavior for returning users
      • Group ranking API
    • Navigation sidebar
  • ⚙️Response Data Collection & Management
    • Schema (variables)
      • Variables from questions
      • Externally provided variables
      • Calculated variables
      • API lookups
      • System Library variables
      • Orphaned variables
  • Saving & retrieving responses
  • Importing Data
    • URL parameters
    • POST body
    • Embed query parameters
  • 📊Analytics and Attribution
    • Built-in analytics
    • Split testing
  • 🚀Publishing and Deployment
    • Live preview overview
    • Environments
      • Loading different environments
    • Embedding
      • Web-embed API
        • React-embed
      • Adding authentication
      • Embedding forms in iOS and Android
      • Setting up a dev environment
    • Pre-deployment checklist
  • 📁Workspace Management
    • Accounts
      • Roles and permissions
    • Custom domains
    • Workspace domain detection
  • 🛠️Formsort Admin API
    • Admin API
  • 🔌Integrations
    • Form answers and events
      • Analytics events
      • Signed requests
      • Event payload shape
      • Submission frequencies
      • Runtime error reporting
    • Integration reference
      • Amplitude
        • Amplitude cross domain tracking
      • BigQuery
      • FullStory
      • Google Analytics
        • Updating from Universal Analytics to GA4
      • Google Cloud Storage
      • Google Sheets
      • Google Tag Manager (GTM)
        • JavaScript triggered by flow events
      • Hubspot
      • Jornaya
      • Optimizely
      • PostgreSQL
      • Redshift
      • Rudderstack
      • S3
      • Salesforce
      • Segment
        • Segment Setup
        • Segment cross domain tracking
      • Stripe
      • TrustedForm
      • Webhooks
        • Zapier
Powered by GitBook
On this page
  • Font selection
  • Uploading custom fonts to Formsort
  • Adobe Fonts
  • Hosting Custom Fonts

Was this helpful?

  1. 🎨Styling
  2. Customizing appearance

Typography

PreviousButtonsNextUI states

Last updated 1 day ago

Was this helpful?

Typography settings in Formsort give you full control over how text appears in your flows—from base font size to specific fonts and styling for individual text elements like headings and body text.

Font selection

You can add and manage fonts in your flow via Theme → Typography → Add font family.... Formsort supports the following font sources:

  • Google Fonts (available out of the box)

  • Adobe Fonts

  • Self-hosted web fonts (e.g., via S3)

Make sure you have the legal right to use any uploaded font. Per our Terms and Conditions, Formsort will comply with takedown requests from copyright holders.

Markdown Styling Support

Once a font is added, you can assign it to the typographic elements found in the chart below. You can use Markdown syntax within any text field in your flow. Typography settings allow you to style each tag individually (e.g., **bold**, _italic_, etc.).

Category

Description

Markdown syntax

H1

Heading 1

#

H2

Heading 2

##

H3

Heading 3

###

H4

Heading 4

####

H5

Heading 5

#####

H6

Heading 6

######

P

Paragraph

A

Hyperlink text

[Formsort](http://formsort.com)

INPUT

Input items

LI

List items


Uploading custom fonts to Formsort

You can also upload font files directly to Formsort:

  1. Navigate to Theme → Typography → Add font family... → Custom Fonts

  1. Enter the font family name

  2. Upload the font files

  1. Map the font weights (e.g., Regular, Bold, Light)

You can upload multiple font files at once. Fonts are stored in your client S3 bucket (no configuration required) and pulled from there automatically.


Adobe Fonts

To use Adobe Fonts in your Formsort flow:

  1. Create or log in to your Adobe Fonts account.

  2. Search for a font and click Add to web project.

  1. In the dialog, create or select a web project.

  2. Click Edit Web Project and note the:

    • Project ID

    • Font-family name

    • Weights you want to use

  1. In Formsort, go to Theme → Typography → Add font family... → Adobe Fonts.

  1. Enter the required values.


Hosting Custom Fonts

If you have font files that you are already hosting somewhere else (like Amazon S3), you can use them in your flows.

CORS Configuration for S3

Here’s a sample CORS policy compatible with Formsort:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>https://flow.formsort.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
    <CORSRule>
    <AllowedOrigin>https://studio.formsort.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>https://{{YOUR_DOMAIN_HOSTING_FORMSORT}}.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

To test your CORS setup:

curl -H "Origin: https://flow.formsort.com" -s -D - -o /dev/null  https://{YOUR_BUCKET}.amazonaws.com/{YOUR_PATH}.otf | grep Access-Control-Allow-Origin

Expected output:

Access-Control-Allow-Origin: https://flow.formsort.com
Typography menu
Upload font file
Adobe Fonts' Web Project editor
Relevant information within the Edit Web Project view