Use bold and italic fonts in the CMS content editor
In this Framer tutorial, you will learn Use bold and italic fonts in the CMS content editor. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
How do I use bold/italic formatting in the Framer CMS?
Bold and italic formatting can be applied directly within formatted text fields in a CMS item. You can then further edit how these settings apply from the canvas itself. These styles appear in the editor and are preserved when published. CMS items can also be saved while editing by pressing Command + S on macOS or Control + S on Windows.
Are there any limitations or font-support issues with bold/italic formatting in Framer?
Framer’s built-in web fonts, such as General Sans, include bold and italic styles automatically, so no extra setup is needed. When using custom fonts, you may need to manually assign the correct font weights for each style. If proper bold or italic files are not provided, browsers may create fake versions using font synthesis, which can appear inconsistent across browsers. For the best results, upload and apply the real bold and italic font files.
How does responsive text scaling work across breakpoints in Framer?
Responsive text in Framer automatically adjusts across breakpoints using REM units. Each breakpoint has a base font size that defines how text scales for that screen size. Text layers set in REM units resize relative to this base value, so increasing or decreasing the base font size updates all REM-based text at once. This makes it easy to maintain consistent, responsive typography without manually defining separate text sizes for desktop, tablet, and mobile.
Lesson details
Sep 12, 2023
3:43
