custom_font multifont

_.md

[ Launch Inlet ]
Gist #4131310 [ Launch Inlet ]
Gist #4003706

config.json

{"description":"custom_font multifont","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"test.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.3556444159529123,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

var display = d3.select("#display");
console.log(display.node());

var fontsize = 61
var svg = d3.select("svg");

var font_selections = ["Inder", 
                       "Titillium Web", 
                       "Open Sans Condensed",
                       "Montserrat Subrayada"]

for (i in d3.range(4)){
	svg.append("text")
      	.attr({x: 38, y: 155+(50*i)})
      	.text("aerhoaihaer")
      	.style("font-family", font_selections[i])
    	.style("font-size", fontsize);
}

test.html

<div>
  
  <svg>
    
  </svg>
</div>

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Inder::latin', 'Titillium+Web::latin', 'Open+Sans+Condensed:300:latin', 'Montserrat+Subrayada::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
</script>