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:
- 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).
- 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):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} |
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.