How do I add Custom Fonts in typehub ?

Table of Contents

UPLOAD CUSTOM FONT – #

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 – https://youtu.be/4kR7qCgMfQA

ADD CUSTOM FONT PROGRAMATICALLY – #

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

Upload the oshine_child.zip 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 );
}
What are your Feelings