I’m not sure whether you want to skew or rotate the text (or possibly something else). Skewed and rotated text can both be achieved using css3 transforms which should work in up to date browsers.
To skew the font:
<span style="display:inline-block;transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg);-moz-transform: skew(-15deg, 0deg);-o-transform: skew(-15deg, 0deg);-ms-transform: skew(-15deg, 0deg);"Skewed Text</span>
To rotate the text:
<span style="display:inline-block;transform: rotate(345deg);-webkit-transform: rotate(345deg);-moz-transform: rotate(345deg);-o-transform: rotate(345deg);-ms-transform: rotate(345deg);"Rotated Text</span>
Rather than use inline styles as above it would usually be preferable to instead add the CSS rules to a child theme stylesheet or using a custom styles plugin, then the transforms can be applied by adding a class to the span.
add these css rules to the stylesheet:
.skew15 {
display:inline-block;
transform: skew(-15deg, 0deg);
-webkit-transform: skew(-15deg, 0deg);
-moz-transform: skew(-15deg, 0deg);
-o-transform: skew(-15deg, 0deg);
-ms-transform: skew(-15deg, 0deg);
}
.rotate15 {
display:inline-block;
transform: rotate(345deg);
-webkit-transform: rotate(345deg);
-moz-transform: rotate(345deg);
-o-transform: rotate(345deg);
-ms-transform: rotate(345deg);
}
Then you can skew or rotate your text by applying the class to the span:
<span class="skew15">Rotated Text</span>
or
<span class="rotate15">Rotated Text</span>
