Italic fonts cuts off only in Safari

Design help Layout & Design
1

As the title suggests, the left side of italic fonts is getting cut off on our website, but only in Safari.

I have checked the overflow settings of the container and the font or span elements. Everything seems to be set up correctly.

Has anyone run into this before or knows what might be causing it?

Screenshot 2025-05-14 at 12.31.23
Screenshot 2025-05-14 at 12.31.23998×460 11.1 KB

Thanks,

Here is my site Read-Only: (Webflow - 16bij9)

2

@16bij9Productie Yes, this is a known rendering issue in Safari — especially with italic or oblique fonts — where glyphs slightly overflow their bounding box, and Safari ends up clipping the left side of italic characters like “f”, “y”, or “T”.

1. Add Left Padding or Margin to the Text

Add a small padding-left or margin-left (around 0.2em or 2-4px) to the affected italic text element or class.

.italic-text {
  padding-left: 0.2em;
}

In Webflow:

  • Select the text or span with the italic class
  • Under Spacing, add 2px–4px padding on the left

2. Use overflow: visible on the parent element

Ensure that all parent containers of the italic text have:

overflow: visible;

Check:

  • The direct wrapper of the text (usually a div, span, or text block)
  • Any column, grid, or section wrapper

In Webflow:

  • Go to each container element
  • Under Layout → Overflow, set it to visible

3. Avoid using inline italic spans if not necessary

If the italic text is applied through a span or inline element, it’s more prone to this issue.

If possible:

  • Use a dedicated class with font-style set to italic
  • Or apply font-style: italic at the block level instead of inline
3

Thanks for the suggestions. I’ve tried options 2 and 3, but they didn’t make a difference. Adding padding does work, but I have to set it to 15 or 20px to make sure the full letter appears inside the box.

Unfortunately, that really messes with the design. Hopefully Safari or Apple will fix this in a future update..

4

@16bij9Productie Let try few more hack

1. Use text-indent Instead of Padding

.italic-text {
  text-indent: 0.2em; /* Adjust as needed (0.1em–0.3em usually works) */
  font-style: italic;
}

2. Apply a transform: translateX() Hack

.italic-text {
  display: inline-block; /* Required for transform */
  transform: translateX(0.2em);
  font-style: italic;
}

3. Wrap Italic Text in a span with overflow: visible

<p>This is <span class="italic-fix">italic text</span>.</p>

.italic-fix {
  font-style: italic;
  overflow: visible;
  display: inline-block;
  padding-left: 0.2em; /* Fallback if text-indent fails */
}

4. Use a Pseudo-Element for Precision

/* Safari-only hack (targets WebKit) */
@media not all and (min-resolution: 0.001dpcm) {
  .italic-text::before {
    content: "";
    display: inline-block;
    width: 0.2em;
  }
}