Question

I’m running into an issue on my personal splash page with a handwritten Google webfont, Meddon. What’s happening is that, seemingly at random, Webkit browsers (Chrome, Safari, iOS Safari) are clipping the left side of the font.

You can see the issue on my personal page. The left side of the JH will appear/disappear at random, when refreshing or resizing the page.

Anyone know of a solution for this? Even better, does anyone know what’s causing this behavior?

Answer 1

It is because your jh container width is not sufficient, take a look here

Demo

Update .jh class like this – Working Demo

.circle .jh {
    margin-top: 50px; /* You can adjust this */
    font-family: "Meddon";
    font-size: 75px;
    width: 200px;
    height: 120px;
    text-align: center;
    color: #f2f2f2;
    text-shadow: 1px 1px #ff8e00;
    border: 1px solid #ff0000;
}