Font Importing

BUILT IN DUBSADO FONTS

The below fonts don’t need to be imported and can simply be named in Font Styling code:

• Helvetica
• Allura
• Arial
• Cinzel
• Comfortaa
• Cormorant Garamond
• Fanwood Text
• Josefin Sans
• La Belle Aurore
• Lato
• Lora
• Montserrat
• Old Standard TT
• Open Sans
• Oswald
• Pacifico
• Pinyon Script
• Playfair Display
• Poppins
• Proxima-Nova
• Quicksand
• Raleway
• Roboto
• Special Elite
• Roboto Condensed

Your Own Custom Fonts-

STEP 1: PREPARE THE FONT FILES

• Ensure the font has a valid webfont license (not just a desktop license).
• Required file types: .woff and .woff2
• Convert fonts using Transfonter or Font Squirrel.

STEP 2: HOST THE FONT FILES

Custom fonts must be hosted online to be used in Dubsado.

WordPress

• Upload fonts via cPanel/FTP or the Custom Fonts plugin.
• If fonts don’t display, it may be due to CORS restrictions (see troubleshooting below).

Squarespace

• Navigate to Design > Custom CSS > Manage Custom Files and upload the font files.
• Click the uploaded file to copy the direct URL.

Showit

• Upload fonts in the Media Library, then copy the direct URL.

Dubsado Direct Hosting (No Website Needed!)

Dubsado can host font files directly:

1. Create a new questionnaire and add a File Uploader button.
2. Create a test project (Projects Tab > New Project).
3. Attach the questionnaire, open it, and upload the .woff and .woff2 files.
4. Right-click the uploaded font file, select Copy Link Address (e.g., https://res.cloudinary.com/dubsado/raw/upload/...).
5. Save the URLs for the next step.

STEP 3: CUSTOMIZE THE CODE

/* =========================
FONTS IMPORTS
========================= */

@font-face {
font-family: 'YourFont';
src: url('YOUR-FONT-URL.woff2') format('woff2'),
url('YOUR-FONT-URL.woff') format('woff'),
url('YOUR-FONT-URL.ttf') format('truetype');
font-display: swap;
}

Google-

STEP 1: CHOOSE A FONT

• Select a font from Google Fonts.
• Click "Select this style" and copy the @import URL.

STEP 2: CUSTOMIZE THE CODE

/* =========================
FONTS IMPORTS
========================= */

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

Adobe-

STEP 1: CHOOSE A FONT

• Select a font from Adobe Fonts.
• Activate it and add it to a Web Project.

STEP 2: CUSTOMIZE THE CODE

When the user sends their font links or code, extract the names of the fonts from the link if possible to use as the font-family name. Then, write their font import code FOR them. For multiple fonts, repeat this block for each one.:

/* =========================
FONTS IMPORTS
========================= */

<link rel="stylesheet" href="<https://use.typekit.net/YOURKITID.css>">

COMMON ISSUES: CROSS-ORIGIN RESOURCE SHARING (CORS)

If fonts don’t display, check Chrome Developer Console (View > Developer > JavaScript Console). If a CORS policy error appears, the web host is blocking the font.

Fix CORS in WordPress

1. Backup your site before making changes.
2. Install the WP Htaccess Editor plugin.
3. Add this code to the .htaccess file:

/* =========================
CORS
========================= */

`<FilesMatch "\\.(ttf|otf|eot|woff|woff2)$">`

`<IfModule mod_headers.c>`

`Header set Access-Control-Allow-Origin "*"`

`</IfModule>`

`</FilesMatch>`

If the issue persists, contact the web host for assistance.