font

text.html

@@ -9,15 +9,21 @@ html, body {
 body {
     display: -webkit-box;
     -webkit-box-orient: vertical;
+    overflow: hidden;
 }
 #top {
     -webkit-box-flex: 1;
 }
-@font-face {
-    font-family: 'Roboto Medium';
-    src: url(../../ttf/Roboto-Medium.ttf);
-}
 #text {
+    color: #fff;
+    text-align: center;
+    font-family: 'Menlow Regular';
+    font-variant: small-caps;
+    //text-transform: uppercase;
+    font-weight: bold;
+    text-shadow: 2px 4px 3px black;
+}
+#text2 {
     color: #fff;
     text-align: center;
     font-family: 'Roboto Medium';
@@ -42,16 +48,28 @@ Producer.prototype.render = function(time) {
     //text.innerText = time;
 }
 function onLoad() {
-    handleFontSize();
     var text = document.getElementById("text");
     text.innerText = webvfx.getStringParameter("title");
+    handleFontSize();
     var producer = new Producer(text.style);
     webvfx.renderRequested.connect(producer, Producer.prototype.render);
     webvfx.readyRender(true);
 }
 function handleFontSize() {
     // Set base font-size to 10% of window height
-    document.body.style.fontSize = (window.innerHeight * 0.1) + "px";
+    //document.body.style.fontSize = (window.innerHeight * 0.1) + "px";
+
+    var fontSize = window.innerHeight * 0.1;
+    text.style.position = 'absolute';
+    var padding = 48;
+    text.style.paddingLeft = padding + 'px';
+    do {
+        console.log(text.getBoundingClientRect().width, window.innerWidth);
+        document.body.style.fontSize = fontSize + 'px';
+        fontSize += 4;
+    } while (text.getBoundingClientRect().width < (window.innerWidth - padding));
+    text.style.position = '';
+    text.style.paddingLeft = '0';
 }
 window.addEventListener("load", onLoad, false);
 window.addEventListener("resize", handleFontSize, false);