Something very odd is happening, a rare occurrence in my over 20 years of web development experience. The text within the paragraph seems to be overflowing its boundaries:
https://i.sstatic.net/bmB1zg7U.jpg
My client specifically requested the Duffy Script font from Adobe, which may be causing the issue. Interestingly, when I switch to sans serif, the problem disappears. But I am determined to find a solution!
I've created a simple jsfiddle to demonstrate the issue - you can resize the right-hand pane to see the same problem captured in the image: https://jsfiddle.net/GeorgeMooWoof/4x50etdy/6/
If anyone could offer some assistance, I would greatly appreciate it.
Thank you
@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>