How do I add Custom Fonts in typehub ?


1. Go to Web Font Generater
2. Upload your font’s source OTF / TTF file ( DO NOT check the Embed font data in CSS option )
3. Generate web font and download the package
4. Go to the Custom Fonts tab inside Typehub and upload the webfont package.
5. That’s it, you can now use your custom font for any of the font options.

Here is a quick video of how it is done –


To add a Custom Font using the method given here, you should have the Oshine Child theme installed and activated.

Upload the from the Buyers Package that you downloaded in the WordPress Dashboard and Activate the Child Theme.

1. Download the Custom Font files in all the required formats. Create a Folder named ‘custom-fonts’ in the Child Theme and place the font files in this folder.

2. Generate the Fonts CSS file and name it ‘fonts.css’. Place this file in a fonder named ‘fonts’ within the root folder in the  Child theme. Ensure the font sources are pointed to files with the custom-fonts folder –

Ex –

@font-face { 
font-family: 'Font Family';
src: url('../custom-fonts/font-name.eot');
src: url('../custom-fonts/font-name.eot?#iefix') format('embedded-opentype'),
url('../custom-fonts/font-name.woff') format('woff'),
url('../custom-fonts/font-name.ttf') format('truetype'),
url('../custom-fonts/font-name.svg#webfont') format('svg');

3. Add the following functions in ‘functions.php’ file in the Child Theme

add_action( 'typehub_register_font', 'my_typehub_custom_font' );
function my_typehub_custom_font() {
$font = array(
'name' => 'CUSTOM FONT NAME',
'src' => get_stylesheet_directory_uri().'/fonts/fonts.css', // URL of your font's stylesheet. Assuming its inside the fonts folder of your child or main theme
'variants' => array(
'300' => 'Light',
'400' => 'Normal',
'500' => 'Medium',
'700' => 'Heavy'
typehub_register_font( $font );

Related Articles

Leave A Comment?

You must be logged in to post a comment.