Skip to content
Cobalt Apps Docs
  • CobaltApps.com

FAQs

7
  • There Are A TON Of WP Frameworks Out There, Why Choose Freelancer?
  • If Freelancer Is Free Than Why Does It Require A License?
  • What Is A Theme Framework And How Is It Different Than The Default WordPress Themes?
  • What Are WordPress Conditionals And How Do I Use Them?
  • What Are Filter Hooks?
  • What Are Action Hooks?
  • How Do I Renew My Cobalt Apps Product License?

Dynamik Website Builder

29
  • Dynamik Website Builder Change Log
  • How To Add New Google Fonts To Dynamik
  • How To Add Custom Fonts To Dynamik
  • How To Setup Your Site Just Like A Dynamik Skin Demo
  • Dynamik Vitality Skin Demo Setup
  • Dynamik ThemeShop Skin Demo Setup
  • Dynamik Startup Skin Demo Setup
  • Dynamik Promote Skin Demo Setup
  • Dynamik Parallax Skin Demo Setup
  • Dynamik NonProfit Skin Demo Setup
  • Dynamik Journal Skin Demo Setup
  • Dynamik Impact Skin Demo Setup
  • Dynamik Impress Skin Demo Setup
  • Dynamik RealEstate Skin Demo Setup
  • Dynamik Commerce Skin Demo Setup
  • How To Add A Retina-Ready Logo To Dynamik
  • Dynamik Custom PHP Builder
  • Dynamik Layout Widths
  • Dynamik Custom Widget Areas
  • Dynamik Custom Hook Boxes
  • Dynamik Custom Conditionals
  • Dynamik Custom Labels
  • Dynamik Custom Templates
  • Dynamik Custom Javascript
  • Dynamik Custom Functions
  • Dynamik Custom CSS
  • Dynamik Settings/Custom Import/Export
  • How The Dynamik Skins Feature Works
  • How To Install The Genesis Framework And Dynamik Website Builder

Instant IDE

12
  • Comparing Instant IDE With The Instant IDE Manager Plugin
  • Editing The Instant IDE HTACCESS File
  • Uninstalling Instant IDE
  • About Instant IDE Security
  • How To Manually Update The Instant IDE Manager Plugin
  • What To Do If You Forget Your Admin Access Pin Number
  • Securing The Instant IDE Manager Admin
  • How To Unzip A File In Instant IDE
  • How To Install WordPress Using Instant IDE
  • How To Resolve Form Validation Errors
  • Instant IDE Keyboard Shortcuts
  • How To Install Instant IDE

Simple Sandbox Pro

1
  • How To Enabled The PHP “exec” Function On Your Server

Genesis DevKit

10
  • DevKit Journal Theme
  • DevKit Promote Theme
  • DevKit Impact Theme
  • DevKit Startup Theme
  • DevKit Default Theme
  • What Is A DevKit Theme?
  • DevKit Parallax Theme
  • DevKit Impress Theme
  • Previewing Mobile Fixed Header When Logged Into Dashboard
  • Genesis DevKit Plugin Options And General Functionality

Extender Pro

9
  • Extender Pro Custom Hook Blocks
  • Extender Pro Custom Hook Boxes
  • Extender Pro Custom Widget Areas
  • Extender Pro Custom Conditionals
  • Extender Pro Custom Labels
  • Extender Pro Custom Templates
  • Extender Pro Custom Javascript
  • Extender Pro Custom Functions
  • Extender Pro Custom CSS

Themer Pro

10
  • Advanced File Editor Controls
  • Ace Editor Themes
  • Frontend Dev Tools
  • Frontend Hooks Map
  • Child Theme Editor
  • Child Theme Image Manager
  • Ace Editor Syntax Validation Checking
  • Child Theme Creator
  • Themer Pro Keyboard Shortcuts
  • Quick-Edit Page Templates With Front-End “Edit Code” Button

Freelancer Framework

13
  • Hide Freelancer Admin Pages
  • Adding Custom Body Classes To Freelancer
  • Debugging Freelancer Scripts
  • Set Custom Icons URL
  • There Are A TON Of WP Frameworks Out There, Why Choose Freelancer?
  • If Freelancer Is Free Than Why Does It Require A License?
  • Setting Up The Freelancer Child Theme Default Settings
  • Freelancer Action Hooks
  • Getting And Defining Freelancer Layouts
  • Freelancer Child Theme Setup
  • How To Add Footer Widgets To Freelancer
  • Freelancer Layouts
  • Freelancer Filter Hooks
View Categories
  • Home
  • Articles
  • Dynamik Website Builder
  • How To Add Custom Fonts To Dynamik

How To Add Custom Fonts To Dynamik

1 min read

Dynamik provides an integrated solution for adding Google Fonts, but what if you want to add your own custom fonts? For this you would perform the following steps:

  1. Upload your custom font files to a custom directory inside your /wp-content/uploads/dynamik-gen/ folder, such as /fonts/, which would look like this: /wp-content/uploads/dynamik-gen/fonts/ (note: this will help your custom fonts survive future Dynamik updates).
  2. Go to Dynamik > Custom Options > Hook Boxes and create a new Hook Box, changing the “Hooked” option over to “CSS” and pasting the following code (editing the values according to your specific needs):
@font-face {
font-family: 'My Custom Font';
src: url('https://my-site.com/wp-content/uploads/dynamik-gen/fonts/my-custom-webfont.woff2') format('woff2'),
url('https://my-site.com/wp-content/uploads/dynamik-gen/fonts/my-custom-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
view raw dynamik-custom-fonts-hook-box.css hosted with ❤ by GitHub

Also note that if you leave the Custom Hook Boxes “Conditionals” option empty then this CSS code will display on all pages of your website. But if you need to restrict it to only certain types of pages you can restrict the Hook Box accordingly via the use of the Dynamik Custom Conditionals feature.

  • Finally you can simply add the font-family that you’ve specified in your Custom Hook Box CSS code to any or all of the #Custom font boxes throughout the Dynamik Design Options. Note that you can easily and universally add styles to these #Custom boxes using the U-Control feature at the top of the Dynamik Design Options.
  • After you do this you should be able to load the front-end of your site and see your new custom font affecting the design of your website.

For assistance with the part of this process that precedes these instructions, like finding custom fonts and converting them to web fonts if necessary, you can check out this post on The Easy Way To Add Fonts To Your Website.

What are your Feelings

  • Happy
  • Normal
  • Sad
Share This Article :
  • Facebook
  • X
  • LinkedIn
  • Pinterest
How To Add New Google Fonts To DynamikHow To Setup Your Site Just Like A Dynamik Skin Demo
AboutSales & Support PoliciesProduct Support GuidelinesPrivacy PolicyAffiliatesTerms of ServiceContact Us
Cobalt Apps DocsCopyright © 2025