Jump to content

Problem rendering web fonts


palanolho
 Share

Recommended Posts

Hi everyone,

I'm having a problem rendering some web fonts and I have been bashing my head and searching online but I'm not able to figure it out. Maybe someone will know what the issue is and how to sort it out.

I'm using a google font call "Lato". I need it in Normal, Bold and Black.

 

So I copied the embed link from Google and includes it in my index (i'm also using the google WebFontLoaderJS to help load the font - https://github.com/typekit/webfontloader)

<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">

 

Then on my main JS I load the font and once the font + assets are loaded, I call the init() which renders the everything else.

var fonts_ready = false;
var assets_ready = false;

WebFont.load({
	google: {
		families: ['Lato']
	},
	active: function() {
		fonts_ready = true;
        preloaderCheck();
    }
  });

PIXI.loader
    .add("image1","img/image1.png")
    .load(function() {
        assets_ready = true;
        preloaderCheck();
    });

function preloaderCheck() {
	if (fonts_ready && assets_ready)
		init();
}

function init() {
    //... render everything
}

 

My problem is that, when rendering the text using this "Lato" font, the system doesn't understand "bold" nor 900 (black)

If I use fontWeight: "normal" or fontWeight: 400 it works fine and I see the "Lato" font with the normal/regular style.

However, If I try fontWeight : "bold" or fontWeight: 900 it will render using some fallback font.

So basically if I have text in normal, bold and black, I see the normal correct and the other two with a fallback font, all on the same canvas.

// this works fine
var myText1 = new PIXI.Text( "this is a text 12345", {
    fontFamily: 'Lato',
	fontSize: 25,
	fontWeight: "normal",
	fill: ['#ffffff']
});


// these dont work and render with some fallback font
var myText2 = new PIXI.Text( "this is a text 12345", {
    fontFamily: 'Lato',
	fontSize: 25,
	fontWeight: "bold",
	fill: ['#ffffff']
});

var myText3 = new PIXI.Text( "this is a text 12345", {
    fontFamily: 'Lato',
	fontSize: 25,
	fontWeight: 900,
	fill: ['#ffffff']
});

 

I created a JSFiddler to illustrate the issue. Once you open it you should be able to see the issue but if you run it again, it will work fine. I tried to refresh my page (F5 / CRL+F5) to see if it would have the same behaviour on my code but it doesn't.

https://jsfiddle.net/palanolho/5ahvub7e/

 

Does anyone know what could be the problem?

 

Many thanks in advance for any help/guidance you can provide

- Miguel

Link to comment
Share on other sites

@jonforum That's what I said. On JSFeedles, for me, it didn't work the first time but after that it worked always fine.

On my other webside it doesn't work :(

Try using incognito mode (if you don't mind) to see if it replicates (it does to me)

 

@bubamara I tried it but it didn't work for me, still see the fallback fonts :S ever tried with like 3 seconds

Link to comment
Share on other sites

OK, I found something that is interesting and may give and hint to someone.

When I load the page for the first time (or refresh using CTRL+F5), the fonts show incorrectly.
however, once the page is loaded, if I refresh the page using only F5, the fonts show correctly.

Does this ring the bell to anyone? :S

Many thanks in advance,
- Miguel

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...