Custom font selector for Code components

Bring Your Framer Components to Life with Custom Font Controls

Hey there! In this post, we're excited to share a neat trick to make your Framer Code Components even more dynamic and user-friendly. Instead of manually typing in font names every time—which can be error-prone and time-consuming—you can use Framer's built-in extended font controls. This not only saves you time but also offers smart suggestions, making your life a whole lot easier!

The Magic Code Snippet

Here's a friendly example of how to set up an extended font control:

font: {
    //@ts-ignore
    type: ControlType.Font,
    controls: "extended",
    displayFontSize: true,
    displayTextAlignment: false,
    defaultFontType: "monospace",
    defaultValue: {
        fontSize: 14,
        lineHeight: "1.5em"
    },
},

What's Going On?

ControlType.Font: This property sets up a font control so that you can easily choose from a list of available fonts without the hassle of typing them manually.
controls: "extended": By using "extended", you unlock extra options, such as adjusting the font size right from the control panel—no extra coding required!
Display Options:
Default Settings: With defaultFontType: "monospace" and default values for fontSize and lineHeight, your component is ready to look great from the start.
TypeScript Ignore: The @ts-ignore comment makes sure you can bypass any TypeScript warnings, keeping your development smooth and friendly.

Why Use Extended Font Controls?

Smart Suggestions: Instead of manually typing in font-family names (which can lead to typos or mismatches), the extended font control gives you a curated list of fonts to choose from. It's like having a personal assistant for your typography!
Time Saver: With built-in suggestions and presets, you can set up and modify fonts quickly, without digging through documentation or writing extra CSS.
User-Friendly: It makes your component more accessible not only for developers but also for designers who might prefer a visual interface over code. This way, everyone can collaborate more effectively.
Consistent Results: Relying on Framer's font controls means that your typography stays consistent throughout your project. No more accidental mismatches or inconsistent styling.

Wrapping Up

Using extended font controls in Framer is a win-win: it makes your code cleaner, saves you time, and helps you avoid the pitfalls of manual font entry. Give it a try in your next project and enjoy a smoother, error-free design process. Happy coding and designing!

Feel free to share this resource with your team or community—let's make creating with Framer fun and effortless for everyone!