Adobe Font Support?

  • lunar_rei-1335539366990188666

    Rei

    2 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?
    1335539367493767179-adobe-font-support.png
  • lucasg-1350480311510892606

    Lucas G

    1 month ago

    Host the font somewhere then add the CSS for it
  • lucasg-1350481863608897657

    Lucas G

    1 month 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>
  • wy4ttb-1350492510215999508

    Wyatt

    1 month 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
  • 1046148990493798491-@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
    lunar_rei-1350506472651358318

    Rei

    1 month 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).
  • lucasg-1350506697507999856

    Lucas G

    1 month ago

    Can't add custom fonts to themes yet
  • lunar_rei-1350506807512272896

    Rei

    1 month ago

    Ah πŸ˜…
    Thank you for the clarification Lucas πŸ™
  • wy4ttb-1350516183258103898

    Wyatt

    1 month 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

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code β€” but accessible to your entire team!

Try toddle β€” it's free!

Β© Copyright 2024 toddle. All rights reserved.