Archived topic
adobe typekit not showing in frontend
14 replies · Started by Drew on February 3, 2023
I really wish adding typekit fonts weren't as time consuming as they are but I am having the worst time trying to get them to display.
I have the snippet added:
add_action( 'enqueue_block_editor_assets', function() {
wp_enqueue_style( 'typekit', 'https://use.typekit.net/yfv3hms.css' );
} );I have the font families added to the customizer: https://app.screencast.com/UYX0kdbzpbhCA
It's added to the block's font family: https://app.screencast.com/juEs1J8AzlSFF - and I see it in the backend per that screenshot.
But the frontend page shows none of the correct fonts. I get so tired of losing so much time to a process that used to be so simple in GP. What am I missing?
Hi there,
can you share a link to the site ?
I think I finally have it figured out, would you mind confirming this is the correct process (and if so, having it in the documentation would be a huge help):
- Create Hook Element and embed Typekit web project code
- When using blocks, create a snippet to enqueue the same code
- In the customizer, add font families via Font Manager making sure to use their font family name (not just the font label)
- In individual blocks, enter the same font family name into the Typography>Font Family field
Let me know if this is correct and if not, what's missing.
If so, having the generic reference code and screenshots for that entire process would save a ton of support time based on what I see users asking. If this is out there with this much specificity as it relates to using blocks, I am clearly missing it (but searched high and low).
I don't use Adobe Typekit, so i had a look online for how to add
And found this doc:
https://helpx.adobe.com/uk/fonts/using/add-fonts-website.html
The part related to WP and GP comes when you get to:
Next, you’ll be given the embed code to load the fonts into your website. The different options are explained in the embed code help page, and the default embed code works well for most projects.
Copy the embed code and add it to the <head> tag in your website.
1. Take note of the font-family name(s)
2. Then in WP, create a Hook Element to add the embed code to the wp_head hook with Display Rules set to the Entire Site or wherever its required.
3. In Customizer > Typography -> Font Manager --> Add New Font. In the FONT FAMILY NAME field add the font-family name that was specified in Adobe Typekit.
4. In Customizer > Typography -> Typography --> you can add the New Typography, select a target element eg. body and select your newly added Font.
Steps 1 and 2 i assume is what you would have done previously when adding typekit?
The only change is how you declare the font in the Customizer.
Close, Step 1 has been the only thing needed until blocks started getting used.
For clarity, would you be able to post a screenshot for this item: "The only change is how you declare the font in the Customizer."
If you guys want to use this as the foundation for documentation, I think that would help a lot of other users, especially long time GP users like me that find the conversion to GP Blocks more than a little frustrating with the documentation gap and lack of transition tools.
I think we may have some crossed wires.
Between GP Theme and GenerateBlocks.
I will take a look at the Fonts documentation we hold as i agree it needs updating to consider other methods of adding themes.
Regarding the customizer where you declare the font, i was referring to the Font and Typography manager here:
https://docs.generatepress.com/article/dynamic-typography-overview/
Regarding the customizer where you declare the font, i was referring to the Font and Typography manager here:
Roger that, I thought the same process was necessary at the block settings level as well, sop yes, it will be very helpful to have all of that confirmed.
For the Block Settings, eg. GenerateBlocks, you just need to add the font-family name in the GB Block > Typography.
As a note: unless using a Block Element or a reusable block, i would avoid/minimise adding fonts in the block settings. As you need to edit posts to change those fonts if ever the need arises... best to keep the fonts in the theme if possible.
That's what I thought as well but then saw that note from Tom that custom fonts don't show in the editor unless added at the block settings level. Is that still the case?
custom fonts don’t show in the editor unless added at the block settings level. Is that still the case?
That's correct.
Thanks for confirming so per David's point, how do I have clients avoid the gotcha of needing to see how a font family looks in the editor but not go back to the dark ages of losing the benefits of customizer level font settings?
You can try this PHP snippet to make the editor load your @font-faceCSS:
wp_add_inline_style( 'wp-block-library',
' your @font-facee CSS'
);For example:
wp_add_inline_style( 'wp-block-library',
' /* abeezee-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'ABeeZee';
font-style: normal;
font-weight: 400;
src: url('../fonts/abeezee-v22-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
url('../fonts/abeezee-v22-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}'
);Many thanks and for clarity, that would eliminate the need to add the font family in the block settings but still have the font rendered in the editor dashboards, correct?
If so, it seems like we're getting closer to a codified process for adding Adobe Typekit fonts. Does anyone on the GP end of things know if this will get a dedicated support doc?
that would eliminate the need to add the font family in the block settings but still have the font rendered in the editor dashboards, correct?
Yes, correct.
Does anyone on the GP end of things know if this will get a dedicated support doc?
We could :)
Thanks for confirming and it would all kinds of amazing to have that as static documentation.