Skip to main content

Adding Custom Fonts to Your Styleguide

Custom fonts ensure your Candu content matches your brand's typography exactly. This guide covers how to add fonts from popular services like Google Fonts and Adobe Fonts, plus self-hosting options for fonts that aren't available via URL.

Deborah Ramírez avatar
Written by Deborah Ramírez
Updated this week

How Custom Fonts Work in Candu

Candu loads custom fonts from URLs that point to CSS files containing font definitions. When you paste a font URL into your Styleguide, Candu fetches that CSS file and makes the font available for your content.

Note: You must add your font URL separately to each text type you want to style. Candu cannot apply one font URL to all text types at once.

Adding a custom font:

  1. Open any text style

  2. Click "Use Custom Font"

  3. Paste the font URL provided by your font provider

  4. Click Add to save

Self-Hosting Custom Fonts

If your font isn't available from Google Fonts, Adobe Fonts, or another URL-based service, you can host it yourself. This requires technical setup and access to a server or CDN where you can upload files.

To self-host fonts in Candu, you need:

  1. Font files in web-compatible formats (.woff2, .woff, or .ttf)

  2. A static file host: CDN, Amazon S3, your own server, or any publicly accessible hosting

  3. A CSS file that defines the @font-face rules pointing to your font files

  4. CORS headers configured to allow Candu to access your font files

Getting Font URLs

Google Fonts

  1. Go to fonts.google.com

  2. Browse or search for your desired font family

  3. Click on the font name to open its detail page

  4. Click the "Get embed code" button

  5. Select the "Web" tab, then choose "@import" option

  6. Copy everything between url(' and ')

  7. Paste the URL into the Candu Styleguide

Adobe Fonts

  1. Log into fonts.adobe.com

  2. Browse or search for your font family

  3. Click "Add to Web Project" button

  4. Select an existing web project or create a new one

  5. Adobe generates embed code that looks like:

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

Copy the URL from within the code: https://use.typekit.net/abc1234.css and paste it into your Candu Styleguide.

Did this answer your question?