CMS

Framer Update: Bold & Italic

Hunter

3:43

5.7K views

Sep 12, 2023

About this lesson

This week’s CMS update brings improvements to the content editing workflow. With the new bold and italic options in Text Styles, you can emphasize your text with granular control of the fonts. On top of that, we have added Required Fields and Max Length options in CMS Fields. These empower you to configure constraints for your content, ensuring that even with 100s of CMS items, your site will match your design.

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00hey all it's hunter in this video I'll 0:02show you the latest additions to the 0:04framer CMS most notably bold and italic 0:06support and textiles as well as required 0:09fields in the CMS and a couple other 0:11goodies that I think you'll like 0:13in this video we're using the standard 0:15docs template which has been updated 0:17with all these new features and you can 0:19find a link to it below 0:21since this release is all about content 0:22let's start by jumping right in 0:25on this page it looks like the content 0:27editor went a little wild with the bold 0:28and italics 0:30I'll add a bit more bold so the next 0:32steps are a bit easier to see and new 0:34with this release while your cursor is 0:36inside any text field in a CMS item you 0:39can hit command s on Mac OS or control s 0:41on Windows to save the CMS item 0:45with our content ready we can now go in 0:48the text style and see how bold and 0:49metallic are set up 0:51we can open up our text Style 0:53for all the built-in web fonts like 0:55General sons in this case bold and 0:58italic is already set up for you so you 1:00never have to worry about it 1:01click on the font Styles menu and here 1:03we can see all the fonts that are 1:05selected for each style but let's say 1:08this bold is a bit too bold for our use 1:11case 1:12we can tweak that and configure it to 1:14use semibold for bolt instead 1:16and we can also configure The Bold and 1:18italic state to also use semi-bolt 1:21in these drop downs we automatically 1:23show all the font weights that are 1:25bolder than your currently selected font 1:28for custom fonts it's a bit more manual 1:30to give you that full flexibility that 1:32you'd expect with custom typefaces let's 1:34say we're using this on the framework 1:35website where our primary font is GT 1:38Wallside I'll select that 1:42if you're to look at the canvas you may 1:43notice that there already is italics and 1:46bold showing up you might wonder how is 1:48this happening well this is actually the 1:50browser doing something called font 1:51synthesis where it essentially makes up 1:54a fake italic and fake bold 1:57we display these so that you can get an 1:58idea of where the bold and italic styles 2:01are applied to your content 2:03but for the best experience especially 2:04cross browsers we recommend using the 2:07proper fonts for each of these styles 2:09as I apply these you can see them load 2:11on the canvas and everything's looking a 2:13lot better 2:16let's see how this page looks with 2:17another CMS item loaded to do that we 2:20can click the little breadcrumb here 2:22and would you look at that another 2:24feature Improvement when switching 2:26between CMS items we now render the 2:28quick menu 2:29this allows you to quickly search the 2:30name and also scales to hundreds of CMS 2:33items 2:34I'll just hit enter to go to the page 2:37and we can see our other pages are 2:39looking good 2:40and for the last thing here let's take a 2:42look at required Fields so in this case 2:45the title of the CMS item is pretty 2:47important to our layout so we'll want to 2:50make sure that's required 2:51and maybe it has a maximum length of 2:53something not super long if we go to the 2:55CMS and go to the edit Fields modal 2:59we can select the title field and from 3:01here we can select required equals yes 3:03and a max length of 50 characters 3:06if we go to our CMS item 3:08Let's test it out if we remove the title 3:10we'll now see title is required and if 3:13we type something super long 3:15we'll see that we've exceeded the 3:17maximum length and it'll tell us by how 3:19many characters so that we can go and 3:21adjust as we need 3:23that's it for the CMS update this week I 3:26hope you enjoy using these features and 3:27I will see you in the next one

TeachesCMS Fields Text Styles

Also coversCustom Cursors Links Templates Typography

Watch on YouTube ↗

‹ Updating your Framer Website’s Title, Description and Social Images

How to add a Cookie Banner to your Framer website ›