[SOLVED] Loading fonts externally to use within a CSS/HTML setting

Given that one wants to change font type within https://developer.playcanvas.com/en/tutorials/htmlcss-ui/
What is then required in relation load a Google Font to use in the HTML layer?

The topic is therefore not related to Font rendering by the Playcanvas/WebGL layer as read here:

This topic leads the way a little, yet I lack understanding of structures behind:

(the referenced library beneath: https://developer.playcanvas.com/en/api/pc.Asset.html#getFileUrl)

For instance: An image/texture or font asset can have a source …

image.png

Then again, what does ‘none’ stand for? And is this related to the Scene settings > External scripts:

image.png

I have this project to test by, where the sphere with white fibonacci pattern upon it, is the image/texture I try to load externally:

https://launch.playcanvas.com/854709?debug=true

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:

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> 
  <script> 
        WebFont.load({
                    google: { 
                           families: ['Droid Sans', 'Droid Serif'] 
                     } 
         }); 
   </script>

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: Oops the referenced project should be: https://playcanvas.com/editor/scene/854709 for debugging etc

I am not sure if I am following what you want to do.

Loading fonts on a webpage means making them available in the HTML DOM for styling.

After that you use the common font-family styling (CSS) rule to set the font on your whole html document or on individual elements.

https://www.w3schools.com/CSSref/pr_font_font-family.asp

Bottom of CSS-asset before final adjustment:

image

and after:

image

Then put within the HTML-asset:

image

{for outsiders just arriving :-)) } … will (off course not) work on semi-local PC-account:

image

Anyways back to the index.html-file:

Still not working on uploaded :-/ :

I do wonder if the ui.js can be of any help, though? :slight_smile: :

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();
    
    
 
};

Here is an example project that loads a custom (google) font:

https://playcanvas.com/project/659398/

1 Like

Ok, great - got it working on ‘text’-div as well :slight_smile:

1 Like

Hello, @Leonidas
excuse could you share the project link again?

Hi @erickim, I don’t have that exact url, but here I forked the default HTML/CSS UI example and loaded a custom Google font.

https://playcanvas.com/editor/scene/1661937

Steps I did, add the following on top of the HTML file:

<style>
    @import url('https://fonts.googleapis.com/css2?family=Zeyada&display=swap');
</style>

And this rule in the CSS file:

.container {
    font-family: 'Zeyada', cursive;

@Leonidas Thank you so much !! :smiley: