Archived topic

Want to add custom font TT Hoves Bold

1 reply · Started by Sabbir on October 24, 2022

Viewing posts 1–2 of 2

October 24, 2022 at 1:14 am #2383772

Hi,

I want to use a custom font which is "TT Hoves"

I try with your guide:
1. https://docs.generatepress.com/article/adding-local-fonts/
2. https://generatepress.com/forums/topic/how-to-add-a-otf-font/

But, I can't set it up.

I'm here:

1. I download the font from the font website, the format was .otf

2. I added the snippet in the child theme function.php that you provide (https://docs.generatepress.com/article/adding-local-fonts/#uploading-our-font). I try to upload .otf font directly, but I can't.

3. Then I use the tool (https://www.fontsquirrel.com/tools/webfont-generator). generate web font file and upload 2 file called 1. tt_hoves_bold.woff 2. tt_hoves_bold.woff2

4. added the CSS:

@font-face {
    font-family: 'tt_hovesbold';
    src: url('tt_hoves_bold.woff2') format('woff2'),
         url('tt_hoves_bold.woff') format('woff');
    font-weight: normal;
    font-style: normal; }

5. added the function code:


add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'tt_hovesbold';

    return $fonts;
} );

But still I can't find the font in theme customize typography.

What’s wrong I did or what should I do. please help

October 24, 2022 at 3:48 am #2383913

Hi there.

when using a Child Theme:

1. Create a folder called Fonts in your child theme folder.
This will provide a URL structure of:

https://yourdomain.com/wp-content/themes/generatepress_child/fonts

2. Add your fonts to this folder, for each font you should now make a note of its URL eg.

https://yourdomain.com/wp-content/themes/generatepress_child/fonts/tt_hoves_bold.woff

3. Your @font-face should contain the full URL eg.


@font-face {
    font-family: 'tt_hovesbold';
    src: url('https://yourdomain.com/wp-content/themes/generatepress_child/fonts/tt_hoves_bold.woff2') format('woff2'),
         url('https://yourdomain.com/wp-content/themes/generatepress_child/fonts/tt_hoves_bold.woff') format('woff');
    font-weight: normal;
    font-style: normal; 
}

4. In the Customizer > Typography --> Add Font and in the font name field, type in your font-family name from the @font-face CSS eg, tt_hovesbold.

Now when you Add Typography, you will be able to select your custom font.

This archived topic is closed to new replies.

Start building better websites today.