BBox @font-face issue

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Text bbox issue</title>
	
</head>
<style type="text/css" media="screen">
	@import url(https://fonts.googleapis.com/css?family=Cutive);
	svg text {
		font-family: 'Cutive',Helvetica, sans-serif;
		font-size: 30px;
	}
</style>
<body id="" onload="">
	<div id="content">
		
	</div>
	<button id="updateButton">Update!</button>
</body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
		
	function transformCoordOf(elem) {
		var separator = elem.attr("transform").indexOf(",") > -1 ? "," : " ";
		var trans = elem.attr("transform").split(separator);
		return { x: (trans[0] ? parseFloat(trans[0].split("(")[1]) : 0), y: (trans[1] ? 		parseFloat(trans[1].split(")")[0] ): 0) };
	}
	
	function positionElements() {
		txts.filter(function(d,i){return i != 0})
			.attr("transform",function(d,i){
				var prev = d3.select(txts[0][i]),
				prevWidth = parseFloat(prev.node().getBoundingClientRect().width)
				prevCoords = transformCoordOf(prev);
			
				var cur = d3.select(this),
				curWidth = parseFloat(cur.node().getBoundingClientRect().width)
				curCoords = transformCoordOf(cur);
			
				var y = prevCoords.y,
					x = prevCoords.x + prevWidth + 10;
				
				return "translate("+x+","+y+")";
			})
	}
	
	var names = ["apples","oranges","bananas"]
	var canvas = d3.select("#content")
		.append("svg")
		.attr("width","600px")
		.attr("height","100px");
	
	var txts = canvas.selectAll("text").data(names)
		.enter()
		.append("text")
		.attr("transform","translate(10,50)")
		.text(function(d){return d});
	
	positionElements()
	
	d3.select("button").on("click",function(){positionElements()})
	
</script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js