- This topic has 1 reply, 2 voices, and was last updated 3 years, 5 months ago by
.
-
Posts
-
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
Customer Support
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.
- You must be logged in to reply to this topic.
