Kalium Documentation
HomeAccountPricingChangelog
  • Getting Started
    • Introduction
      • Before Getting Started
        • Hosting and Domain
        • WordPress Installation
        • Server Requirements
      • How To Purchase Kalium
    • Installation
      • Installing theme via WordPress
      • Installing theme via FTP
      • License Activation
      • Importing a Starter Site
      • Installing Required Plugins
      • Child Theme
      • Updating Kalium
    • License
      • Managing Licenses
      • Activation Scope
      • Prorating Plan Updates
    • Dashboard
    • Customizer
    • Migrating from Kalium 3 to 4
      • Migrating Automatically
      • Migrating Manually
  • General
    • Header
      • Layouts
      • Custom Header
        • Elements
      • Styling
      • Top Bar
      • Sticky Header
      • Mobile Menu
      • Other Options
      • In Page Options
    • Footer
      • Adding/Editing Content
      • Styling
    • Sidebars
      • Troubleshooting Sidebar
  • Post Types
    • Blog
      • Blog Page
      • Post Page
      • Creating a Blog Page
      • Creating a Blog Post
    • Portfolio
      • Portfolio Page
      • Project Page
      • Creating a Portfolio Page
      • Creating a Portfolio Item
        • Side Portfolio
        • Columned
        • Carousel
        • Zig Zag
        • Fullscreen
        • Lightbox
        • Design Your Own
    • WooCommerce
      • General Settings
        • Mini Cart
        • Free Shipping Bar
        • Product Badges
      • Product Catalog
        • Product Card
      • Product Page
      • Product Images
      • Cart & Checkout
      • My Account
      • Store Notice
    • Search Results
  • Typography
    • Fonts
      • How to Add a Font
        • Adding Adobe Fonts
        • Adding Self-Hosted Fonts
        • Adding External Fonts
      • Custom Selectors
      • Advanced Settings
    • Font Sizes
    • Typography Settings
  • Styling
    • Brand and Logo
    • Colors
    • Buttons
    • Forms
    • Layout
    • Link Styles
    • Site Frame
  • Translation
    • Translation introduction
    • Translating with WPML
    • Translating with Loco Translate
    • Translating with Poedit
    • Adding a Language Switcher
    • RTL Languages
  • Other
    • Social Icons
    • Image Placeholder
    • Breadcrumbs
    • Scroll to Top
    • Maintenance Mode
    • Lightbox
    • Custom CSS
  • Troubleshooting
    • Manage Options in Customizer
    • Bad Hosting Environment
Powered by GitBook
On this page
  • 1. Add a New Font
  • 2. Choose the Font Source
  • 3. Name Your Font
  • 4. Upload and Set Up Self-Hosted Font and Variants
  • 5. Apply the Font
  • 6. Save Changes
  1. Typography
  2. Fonts
  3. How to Add a Font

Adding Self-Hosted Fonts

PreviousAdding Adobe FontsNextAdding External Fonts

Last updated 9 months ago

The process of adding Self-Hosted Fonts is quite similar to the general font-adding process. This method also ensures compliance with GDPR regulations by hosting the font directly on your website rather than fetching it from external sources.

By following these steps, you’ll be able to seamlessly incorporate your own fonts into your site and enhance your typography.

1. Add a New Font

Navigate to the Fonts tab under Kalium -> Typography, then click on the "+ Add Font" button to start adding a new font.

2. Choose the Font Source

Select the font source, in this case Self-Hosted Fonts and click "Continue ->".

3. Name Your Font

Once you’re on the self-hosted font page, start by naming the font face you will be adding. For instance, if you are uploading the "Inter" font, you will name it "Inter."

4. Upload and Set Up Self-Hosted Font and Variants

Now you can set up the font style, weight, and upload the font files. You can also preview the font on the right side of the page. Here’s what you need to do:

  • Font Style: Choose between Normal or Italic.

  • Font Weight: Select the appropriate font weight for the variant you are uploading.

  • Font Files: Upload the WOFF2 font file or choose it from the media library. WOFF2 is the only necessary font file; the others are optional for older browser support but not required.

The “Show more options” button is designed for advanced use only. If you click it, you’ll have the option to upload various web font formats, including WOFF, TTF, EOT, and SVG, in addition to WOFF2.

If you have additional font variants, such as Bold, you can create them by clicking the "+ Add Font Variant" button, the variants will show on the right area of the page where you can preview the font you've added. Once you’ve set up the font variants, click "Save Changes."

5. Apply the Font

Decide where you want the font to be applied, such as "Sitewide," "Headings," or "Paragraphs." By default, the font will be applied sitewide. If you want to use different fonts for different sections, you can customize the settings to apply one font to headings and another to paragraphs, or adjust as needed.

6. Save Changes

Finally, save your changes to apply the font to your website. Your self-hosted font is now ready to use.

Well done! You’ve successfully added a self-hosted font to your site. Now, you can start applying these fonts to various elements, ensuring your site’s typography reflects the style you’re aiming for.