Search code examples
htmlcssfont-face

text overruns width of paragraph

I'm having a very strange issue and one which I've never seen in more than 20 years of web development. I have text which is overrunning the width of the paragraph which contains it:

enter image description here

My client has requested the Duffy Script font from Adobe which might be the problem, since when I switch to sans serif, the issue goes away. But I'd really like to fix it if I can!

I've created a simple jsfiddle which shows the problem - you can simply resize the right-hand pane to see the problem I screen-capped in the image: https://jsfiddle.net/GeorgeMooWoof/4x50etdy/6/

Can anyone help at all please?

Thanks so much

@import url("https://use.typekit.net/twt4ckp.css");
.container {
  padding-right: 20px;
  background: yellow;
}

p {
  font-family: "duffy-script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  background: rgba(255, 0, 0, 0.2);
}
<div class="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Solution

  • See @herrstrietzel's post for details and explanation. As mentioned inside, you can use font-variant-ligatures:no-contextual (as pre spec preferred over font-feature-setting) to disable display of contextual alternates.

    (Setting optimizeSpeed as below works because of its side-effect of disabling ligatures. Same with adding a positive letter-spacing.)

    Setting text-rendering:optimizeSpeed fixes the problem for me (on Chrome and Edge).

    @import url("https://use.typekit.net/twt4ckp.css");
.container {
  padding-right: 20px;
  background: yellow;
}

.par {
  font-family: "duffy-script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  background: rgba(255, 0, 0, 0.2);
  text-rendering: optimizeSpeed;
}
    <div class="container">
  <p class="par">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

    As commented by the OP, adding letter-spacing: 0.01px appears to fix the problem as well.

    @import url("https://use.typekit.net/twt4ckp.css");
.container {
  padding-right: 20px;
  /* background: yellow; */
}

.par {
  display: inline-block;
  font-family: "duffy-script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  width: 233px;
  background: rgba(255, 0, 0, 0.2);
  letter-spacing: 0.01px;
}
    <div class="container">
        <p class="par">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>