All topics

Adobe Font Support?

Rei

3 months ago

Hello Toddle Community 👋
I'm trying to add Adobe Fonts based on the [documentation](https://toddle.dev/docs/adding-scripts-and-links-to-the-page-head).

Since I don't see my fonts registered under Theme > Fonts nor do I see them in the text UI, I would like to ask if Adobe fonts are even supported?

If so, could someone please give further instruction in how to add adobe fonts?
Lucas G

2 months ago

Host the font somewhere then add the CSS for it
Lucas G

2 months ago

Custom fonts on toddle are the same as anywhere else. You have to add the font to the site
You typically add it to the header, for example: <style>@font-face { font-family: CustomFont; src: url('CustomCode.url'); }</style>
Wyatt

2 months ago

If you're using Adobe Typekit, you don't need to host the font yourself. In your Adobe Fonts account, create a new web project and add the fonts you want to use to it. Once you save it, Adobe will give you a stylesheet link (it will look like https://use.typekit.net/YOUR_PROJECT_ID.css).

In Toddle, go to your page settings and under Head Assets add a new link tag and set the attributes - rel="stylesheet" and href="[typekit link]". Then in your CSS styling, reference the font family names, like this:
font-family: "freight-big-pro", serif
@Wyatt
If you're using Adobe Typekit, you don't need to host the font yourself. In your Adobe Fonts account, create a new web project and add the fonts you want to use to it. Once you save it, Adobe will give you a stylesheet link (it will look like https://use.typekit.net/YOUR_PROJECT_ID.css).

In Toddle, go to your page settings and under Head Assets add a new link tag and set the attributes - rel="stylesheet" and href="[typekit link]". Then in your CSS styling, reference the font family names, like this:
font-family: "freight-big-pro", serif
Rei

2 months ago

Thank you so much Wyatt! 😊
I was under the impression that after I added the fonts via the header I would then need to add it under "Theme" Font styles to have it listed as a font family dropdown option across all my elements. Referencing the font family directly into the CSS section of elements appears to work. I do have a follow-up question if you don't mind.

Have you been able to streamline this process other than Inheriting the style from the top level element?
Ideally it would have been great to use these fonts like the other default ones available in the editor (dropdown options).
Lucas G

2 months ago

Can't add custom fonts to themes yet
Rei

2 months ago

Ah 😅
Thank you for the clarification Lucas 🙏
Wyatt

2 months ago

Yeah I think it’s on the toddle team’s roadmap to make theming more full featured, which will hopefully include the ability to upload custom fonts at some point in the future

Adobe Font Support?

Rei

Lucas G

Lucas G

Wyatt

Rei

Lucas G

Rei

Wyatt