If you have these big "slanted" fonts (not sure on the terminology), your opacity is less than 1, and you're using text-align:right, the end of the text will get cut off. I also found that in the OSX version of Safari, the end doesn't render even when the opacity is at 1. Anywhere else it seems to only be the case while opacity is < 1. This only seems to happen when aligning the text to the right.
I have recreated the problem in jsfiddle:
The code:
<head>
<title>Test</title>
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
<style>
.box {
background-color: lightblue;
width: 500px;
font-family: 'Playball', cursive;
text-align: right;
padding-right:30px;
}
.box h1 {
opacity: 0.5;
font-size:48px;
font-weight:400;
}
</style>
</head>
<body>
<div class="box">
<h1>Hello world</h1>
</div>
</body>
I don't know if you are looking for a workaround or an explanation, it is indeed weird and have no answer for that, but a workaround is available :). you could add some padding to the "box h1".
I tested it and it worked
Hope this helped
cheers