- This topic has 13 replies, 5 voices, and was last updated 2 months, 2 weeks ago by
Ying.
-
AuthorPosts
-
September 25, 2020 at 7:54 am #1458658
dasigna
hi there,
being aware this
must have beenhas been asked before, but there seems no way to get it working … already tried several ways.setup:
custom local font (incl. variants) added to website in dedicated folder of child theme, enqueued via css and functions.php.
working like a charme on frontend and within customizer / gp.
so i would assume everything is set up right πso as we are planning to use gutenberg for editing blog posts it would be quite nice if the local fonts would show up there too – sadly they dont. always getting fallback ‘times new roman’.
tried several ways to get it done via snipplets i found here (and others there) – nothing seems to work.
is there something that has been changed according to that recently and theres probably a ‘new’ way to do so?
(btw. … if wp can pick up these fonts in customizer, why not in gutenberg??? weird!)any hint highly appreciated and thanks for that in advance.
September 25, 2020 at 1:25 pm #1459136Tom
Lead DeveloperLead DeveloperHi there,
You need to load the
@font-face
CSS in the block editor. Is the CSS currently in your child theme stylesheet? If so, we can load that in the block editor, but it will bring in your other CSS as well.Alternatively, you can just add the font-face stuff into the editor:
add_action( 'enqueue_block_editor_assets', function() { wp_enqueue_style( 'your-handle', 'URL TO YOUR FILE' ); } );
September 26, 2020 at 8:31 am #1460044dasigna
hi tom,
currently css is in child, yes – fonts also, within dedicated ‘fonts’ folder.
loading this complete css may not be that great, as there are many other things to be contained.so i assume “just add the font-face stuff” into the editor means, to set up a separate css file just for that?
a second question for the understanding of the dumb of us – the ‘your-handle’-part should be picked up from a specific area or may it be just whatever?tried that separate stuff before without success :/ but worth another try anyways.
thanks for your help.
September 26, 2020 at 11:44 am #1460224Tom
Lead DeveloperLead DeveloperYea, that’s what I would do. Create a new .css file with the
@font-face
definitions, and make sure the URLs to the font files are correct. Then add the URL to that new CSS file to the function I provided above.your-handle
can be anything you like as long as it’s unique, it’s just an identifier that WordPress uses for enqueued files.September 28, 2020 at 3:22 am #1461943dasigna
… finally works.
strangely it does not work with relative url within function… weird.
thanks.
September 28, 2020 at 9:40 am #1462549Tom
Lead DeveloperLead DeveloperThat’s strange – relative URLs should work if they’re inside a CSS file and the fonts are relative to that file.
Glad you got it working π
September 28, 2020 at 10:08 am #1462608dasigna
… relative url in css is o.k.
but not in php sniplet.
thanks anyway π
June 27, 2021 at 7:20 am #1836393Kyle Van Deusen
**SOLVED** I had “/public_html/” inside of my URL, which I didn’t realize wasn’t needed. Once I took that out, it worked perfectly. Figured I’d just update this in case anyone in the future makes the silly mistake I did!
I’m having the same issue described here. But I’m not sure how to do enque the font face. I’ve followed the directions to upload the custom font (these instructions: https://docs.generatepress.com/article/adding-local-fonts/) and I’ve just dropped all the CSS for the fonts in a styles.css and after reading this also put them in their own font.css file.
I’ve tried putting this Php in (both in code snippets and in the functions file) using the url to the css file (tried both the default styles and the font.css I made) but neither seem to work.
I’m sure I’m doing something wrong. Happy to provide access to take a look.
June 27, 2021 at 11:51 am #1836745Kyle Van Deusen
Ah, realizing now that while it is DISPLAYING the font in the back end, the custom fonts are not in the “show advanced typography” settings in the drop down menu that shows all the fonts. Is there a way to get it in the list?
June 27, 2021 at 7:08 pm #1836910Tom
Lead DeveloperLead DeveloperHey Kyle – it’s just an input field below, so you can type in any font name you like. The list is just a “quick select” that populates the input below it.
We’ll be adding fonts to the Asset Library in Pro to make this easier very soon π
March 15, 2023 at 1:46 pm #2569089Tyler
SOrry to revive an old topic, but I have virtually the same questions.
My fonts are now loading in the block editor, but ONLY on the “desktop” preview. When viewing the mobile or tablet preview in Block Editor, they don’t show up.
Here’s what I have:
// show fonts in block editor add_action( 'enqueue_block_editor_assets', function() { wp_enqueue_style( 'shop-controller-fonts', '/wp-content/themes/shopcontroller/style.css' ); } );
any ideas?
March 15, 2023 at 3:20 pm #2569150Ying
StaffCustomer SupportCan you try this snippet instead?
add_filter( 'generate_editor_styles', function( $editor_styles ) { $editor_styles[] = 'style.css'; return $editor_styles; } );
March 15, 2023 at 4:09 pm #2569182Tyler
That works, thanks Ying!
March 15, 2023 at 7:59 pm #2569329Ying
StaffCustomer SupportGlad to hear that π
-
AuthorPosts
- You must be logged in to reply to this topic.