I’m using this font:
And I noticed it’s being smoothed. I’d like to display all the blocky pixels in their glory. How can I do that? Thanks!
Hello! How are you drawing the font? Are you using a texture? A Playground example would be helpful here 
I’m using a TextBlock and loading through html css. How can I do that in a playground?
You can manually create and attach the css containing the font, like in this example: Custom font | Babylon.js Playground (babylonjs.com). In any case, one thing you can already try is changing the GUI texture sampling mode to nearest, as that’s the usual ideal for pixel perfection.
I’m having trouble due to CORS. Where can I host the font?
Sorry, I removed by accident the example
Text to customMesh in any TrueType font | Babylon.js Playground (babylonjs.com)
chatGPT:
If you are experiencing CORS (Cross-Origin Resource Sharing) issues with fonts, it is likely because the font file is hosted on a different domain than the website using it. To solve this issue, you can host the font on the same domain as your website.
Here are some options for hosting your font:
- Host the font on your own server: You can upload the font files to your own server and serve them from there. This is a good option if you have control over your own server and have the necessary knowledge to set it up.
- Use a content delivery network (CDN): A CDN is a network of servers that distribute content across the internet. There are many CDN services available that can host your font files, such as Google Fonts, Adobe Fonts, and Typekit. These services often have their own cross-domain policies in place, which can help to mitigate CORS issues.
- Use a font hosting service: There are several font hosting services available that specialize in hosting fonts for websites. Some popular options include Fonts.com, Fontspring, and MyFonts. These services often offer additional features such as font management and licensing.
Regardless of which option you choose, be sure to test your website thoroughly to ensure that the font is loading correctly and that there are no CORS issues.
1 Like
Yeah my server doesn’t have CORS enabled, I don’t have a CDN atm, and all of those sites listed are for hosting fonts bought through the site… thanks chatgpt…
I’m guessing the font I’m linking is missing some data in the ttf file for spacing/alignment.
I’m getting more issues with this font:
Since your demand on font quality is not very high, what do you think about the idea of defining your own font in the form of a matrix?
I have found an interesting approach to generate an ASCII type from the 2D context of a canvas element:
<script>
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
let c = canvas.getContext("2d");
c.fillText("H e l l o !", 0, 7);
d = c.getImageData(0, 0, 56, 7).data;
s = "";
for (i = 3; i < d.length; i += 4) {
s += d[i] ? "#" : " ";
s += (i + 1) % 224 ? " " : "\n";
}
console.log(s);
</script>
Output on the console:
# # # # # # # # # # # #
# # # # # # # # # # # #
# # # # # # # # # # # # # # # # # # # # #
# # # # # # # # # # # # # # # # # # # # # # # # #
# # # # # # # # # # # # # # # # # # # # # #
# # # # # # # # # # # # # # # # #
# # # # # # # # # # # # # # # # # # # # # #
No, I just need these fonts to work. Auto resize doesn’t work either.
Can you host it on github? I find it the easiest way: Using External Assets In the Playground | Babylon.js Documentation (babylonjs.com)
You could set up a webpage through github and share your project too
@carolhmj That worked! Thank you!
Unfortunately I can’t repro it in playgrounds… blarg
That works fine…
That’s what it looks like locally. hm
EDIT: oh wait I just reloaded the playground and now it does it.
Ok I’m on to something so. I click on:
Then it looks like the font doesn’t load and I click the play button and it loads and shows the clipping problem!
Oh yeah, the Playground has this weird quirk where the fonts don’t seem to load the first time. Quick question: does this happen with only this font? Have you tried switching this font in your game to another pixel style font to see if the same thing happens? Knowing this would help us narrow down if the problem is specific to a font or something general 
In fact, I’m also having problems loading google fonts through the head of the document and @import.
Eventually, it loads. Eventually it doesn’t. The only reliable loading of custom font I found is with typekit.
A common browser behavior is that the font will not even load until the user interacts with the page and needs to be considered.
There are work arounds for it, one of which is make a landing screen with baked out text that the user sees when they come to the page. That require them then to interact with a “Play” button or something which then will allow the fonts to propagate.
You can hook to an event when the font is loaded:
create-react-app-typescript-babylonjs/App.tsx at master · brianzinn/create-react-app-typescript-babylonjs · GitHub
Then call markAsDirty() on the ADT. That will update the fallback font to the correct font, or you can hold off showing the GUI until the font is loaded.
edit: I think I had brought up once if we could add a font list to the constructor of ADT and then it would automatically mark as dirty. To get the correct font name you can loop through the document.fonts.
1 Like
Typekit? How does that work?
Looks like I can make it happen with most other fonts and it happens mostly with the second @fontface so it looks like this is a loading issue.
So I guess I’m looking for the most reliable way to load fonts into Babylon.