Can you add a stroke to text in Webflow and why does it draw a stroke around the insides of letterforms when using the Cabin font?

Yes, in Webflow, you can add a stroke to text using CSS properties. Here's how you can add a stroke to text in Webflow:

1. Select the text element: In the Webflow Designer, select the text element to which you want to add a stroke.

2. Open the Styles panel: On the right-hand side of the designer, click on the "Styles" tab to open the Styles panel.

3. Add a stroke property: In the Styles panel, locate the "Typography" section. Click on the "+" button next to "Typography" to expand the options. Look for the "Text stroke" property and enter the desired value for stroke width.

4. Adjust stroke color and opacity: Below the "Text stroke" property, you'll find options to set the stroke color and opacity. Click on the color swatch to open the color picker and choose your desired stroke color. You can also adjust the opacity using the opacity slider.

5. Customize additional stroke properties: Webflow allows you to further customize the stroke properties. Click on the gear icon next to the "Text stroke" property to access additional options, such as stroke alignment (inside, outside, or center) and stroke linecap (butt, round, or square).

6. Preview and publish: Once you've added the stroke to your text, you can preview it in the Webflow Designer. If you're satisfied with the result, you can publish your site to make the changes live.

Now, regarding why a stroke draws around the insides of letterforms when using the Cabin font in Webflow:

The issue with the Cabin font is not specific to Webflow but rather a characteristic of how the font is designed. Some fonts, including Cabin, are designed with slightly overlapping or touching letterforms to create a specific visual effect. When a stroke is applied to such fonts, it tends to draw the stroke around the insides of the letterforms rather than the outside. This can result in a distorted or unreadable appearance.

To overcome this issue, you have a few options:

• Choose a different font: If the stroke is critical to your design, you may consider using a different font that is better suited for applying strokes. Many fonts are designed to work well with strokes and won't cause the same issues as Cabin.

• Adjust the stroke properties: You can try experimenting with different stroke properties such as stroke alignment, stroke linecap, and stroke width to minimize the distortion caused by the overlapping letterforms. However, keep in mind that this may not always completely eliminate the issue.

• Explore other design solutions: If adding a stroke to the text is not essential, you can consider alternative design solutions to achieve your desired visual effect. For example, you could use a different color or font weight to create contrast and emphasis instead of using a stroke.

In any case, it's important to test and preview your design changes to ensure that the text remains legible and visually appealing.

Additional Questions:

1. How do I remove a stroke from text in Webflow?
2. Can I animate the stroke of text in Webflow?
3. Are there any other fonts that may cause similar issues when applying strokes in Webflow?