Forum Discussion

MeghanBrady's avatar
MeghanBrady
Community Member
18 days ago

Using theme fonts

Hi friends!

I'm very new to code blocks and I've found some amazing examples shared in the community. I'd love to integrate them into my courses, and I can hunt my way through the code to adjust the colors to our brand colors using hex codes. 

But I'm wondering if there's any specific syntax or code I could use to pull in the theme fonts? It would make the whole look a lot more seamless. 

Thanks!

2 Replies

  • ISa's avatar
    ISa
    Community Member
    17 days ago

    The easiest way to transfer the look and feel of your course to your code is to open the code in an AI, take a screenshot of your course, paste that into your AI. And ask the AI to apply the look and feel. If you want to take it to the next level, you can include the font in a zipfile (and use the "insert project" option in stead of "insert code". )

    • A Rise custom code block is uploaded as a ZIP package containing your HTML/CSS/JS.
    • Anything you want to use (including fonts) must be included in that package.
    • You can place .woff2 / .woff / .ttf files in a folder inside the ZIP and load them with @font-face.

    Example

    @font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff2") format("woff2"), url("fonts/MyFont.woff") format("woff"); font-weight: normal; font-style: normal; } body { font-family: "MyFont", sans-serif; }

    Important notes

    • The font will only apply inside that custom code block, not to the rest of the Rise course.
    • The font must be included in the ZIP structure — Rise won’t host it separately.

    I'm sure you can vibe code your way out.