This isn’t much different in doing this than loading a Google font in any HTML app. You are mostly interested in how this is achieved through Javascript.
ok, will look into your suggestion briefly, just a minor important detail; I have already tried to merge the Google Font’s js script link in both the HTML-asset (as known in the HTML/CSS UI tutorial), as well as having put the same js script link in the exported index.html-file (sometimes needed)
Hmmm … had a slight suspicion in this direction. Al though I am not interested in using a ton of different fonts on my website, I still want control of the different
's.
Your suggestion ‘only’ reference a broad usage on webpage:
Whereas my HTML/CSS example has this structure in the HTML-asset:
<div class='button'>BUTTON</div>
<div class='counterBox'>
times clicked <span class='counter'>0</span>
</div>
<div class='text'>
Hit the button to increment the counter<br />
</div>
How will you manage to set one font on the Button-div and another font on the (for instance) text-div?
PS: Tried this as well, that doesn’t make a console-error (still not working though):
Ui.prototype.initialize = function () {
// create STYLE element
WebFontConfig = {
google: {
families: ['Droid Sans', 'Droid Serif']
}
};
(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);
})();
var style = document.createElement('style');
// append to head
document.head.appendChild(style);
style.innerHTML = this.css.resource || '';
// Add the HTML
this.div = document.createElement('div');
this.div.classList.add('container');
this.div.innerHTML = this.html.resource || '';
// append to body
// can be appended somewhere else
// it is recommended to have some container element
// to prevent iOS problems of overfloating elements off the screen
document.body.appendChild(this.div);
this.counter = 0;
this.bindEvents();
};