Home > JavaScript, Object Pascal, Smart Mobile Studio > Webfonts in Smart Mobile Studio

Webfonts in Smart Mobile Studio

Webfonts is something I have wanted to include in Smart for ages now. It’s such a simple feature, but when you use it right it becomes powerful and assuring.

What is a webfont?

Well, you know how you have to define what fonts you use under html right? And if the user doesn’t have that font, you have fallback fonts it can use instead? If you have worked with web technology for a while you no doubt know how haphazardly the results can be. You would think that a font like “verdana” looks exactly the same from system to system -but that is not always the case.

webfonts

Adding webfonts to your project is very easy

Apple for instance have their own tweak on just about every typeface; Linux often have alternatives that looks good but might not be 100% identical (on some distros, Linux is not exactly “one thing”). And Microsoft tends to live in their own universe.

The solution? Webfonts. In short it means that the browser will double-check if the user has the font you need installed. And if they don’t – the font is downloaded from a font provider (like Google) when your web application starts.

Fonts, glorious fonts!

The result is that your application will look and feel the same no matter what device is used. And that is a very important thing – because coding flexible, adaptive UI’s that should work on Android, iOS, TV’s and ordinary browsers is no picnic to begin with. Having to worry that your fancy Ubuntu based UI is rendered using vanilla Sans-Serif (read: looking like something out of the 80s) has been an ever-present reality for two decades now.

webfonts2

Plenty of good looking fonts on Google

If you head over to https://fonts.google.com and take a gander at the fonts available, I’m sure you agree that this is a fabulous idea. And as always, when you combine good-looking fonts with some cool CSS – the results can be spectacular.

Still in Alpha

We are still in Alpha for Smart Mobile Studio 3.0, so there might be hiccups along the way. But all in all you should be able to enjoy webfonts in our next update.

Cheers!

  1. October 4, 2017 at 2:34 pm

    it would be handy if SmartMS exposes a BitmapFont kind of object loader, where you can pass a png and xml/fnt pair and get back an assembled bitmap font. A bitmap font loader would be great

    setText(‘Bitmap Fonts!’, 200, 150);

    as shown in //samme.github.io/phaser-examples-mirror/loader/load%20bitmap%20font.html

    • October 11, 2017 at 7:16 pm

      There are classes for that 🙂 If you look at the Spartacus demo there is one. I think we have 5 or 6 old-school demo fonts in there

  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: