Three.js TextGeometry - Z-rotated text looks italicized - three.js

Question

I am trying to render some text onto a "fake 3D" backdrop (see my image link for a picture of what it looks like rendered), however when I rotate the text on the Z-axis to make the text look like it's a part of the fake 3D backdrop the text becomes distorted, almost looking italicized. I've tried rotation on the x and y axis as well to maybe change the depth perception but I can't get it to look right.
Anyone run into this or have thoughts?
Image:
Code:
var desiredWidthInCSSPixels = 1100;
var desiredHeightInCSSPixels = 700;
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var texture_loader = new THREE.TextureLoader();
var font_loader = new THREE.FontLoader();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
renderer.setSize( desiredWidthInCSSPixels, desiredHeightInCSSPixels );
document.body.appendChild( renderer.domElement );
//this is the fake 3d backdrop "business cards"
texture_loader.load( "assets/images/mockups/mockup-1.png", function (texture) {
texture.minFilter = THREE.LinearFilter;
var geometry = new THREE.BoxGeometry( 800, 600, 0 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
});
//here's the company's logo
texture_loader.load( "assets/images/logo.svg", function (texture) {
texture.minFilter = THREE.LinearFilter;
var geometry = new THREE.BoxGeometry( 60, 60, 0 );
var material = new THREE.MeshBasicMaterial( { transparent: true, map: texture } );
var cube = new THREE.Mesh( geometry, [null, null, null, null, material, null] );
cube.rotation.z = -150.12;
cube.position.x = 60;
cube.position.y = -40;
scene.add( cube );
});
//the text loader that looks italicized
font_loader.load( 'assets/fonts/roboto_black_regular.json', function(font) {
var geometry = new THREE.TextGeometry( 'My test text looks italic!!!', {
font: font,
size: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 3,
bevelSize: 8,
bevelSegments: 5
} );
var material = new THREE.MeshPhongMaterial({
color: 0xddd
});
var cube = new THREE.Mesh( geometry, [material, null, null, null, null, null] );
cube.position.x = 60;
cube.position.y = -40;
cube.position.z = 20;
cube.rotation.x = .12;
cube.rotation.z = -149.95;
scene.add( cube );
});
camera.position.z = 200;
var animate = function () {
requestAnimationFrame( animate );
renderer.render(scene, camera);
};
animate();
function xtest() {
cube.rotation.x += .01;
console.log(cube.rotation.x);
}
function ytest() {
cube.rotation.y += .01;
console.log(cube.rotation.y);
}
function ztest() {
cube.rotation.z += .01;
console.log(cube.rotation.z);
}
function x1test() {
cube.rotation.x -= .01;
console.log(cube.rotation.x);
}
function y1test() {
cube.rotation.y -= .01;
console.log(cube.rotation.y);
}
function z1test() {
cube.rotation.z -= .01;
console.log(cube.rotation.z);
}