Translations

Know another language? Translate this tutorial!

Stats

4.5K visitors
23.4K page views
22 translation visitors
51 translation page views

Using Web Fonts in the Text object

Favourite 54 favourites
Tutorial written by AshleyOriginally published on 2nd, January 2012 - 5 revisions

Construct 2's Text object supports Web Fonts, which are fonts hosted online. This is really handy for using interesting fonts because you can't guarantee everyone will have the same fonts as you do installed to their computers. With Web Fonts the fonts are downloaded online in a format all computers can use, allowing you to use beautiful fonts other than the few already installed to all computers.

Find a Web Font

Before using a Web Font, first you have to find one that you like! The Set Web Font action in the Text object was designed with Google Web Fonts in mind, but it isn't specific to that - it should work with any provider who provide the necessary stylesheet, which we'll see in a moment.

So try visiting Google Web Fonts and find a font you like! There are hundreds of fonts available, with options to help you filter fonts by attributes like their thickness, slant and so on. Once you've found one, click the Quick-use link.

The Quick-use link


Some fonts have multiple styles. Check the styles you want to use if there's a list.

Web Font styles


You may also wish to select different character sets for the chosen font in step 2.

Using Web Fonts

To set the Text object to use a Web Font, use the Set web font action. You probably want to call Set web font in On start of layout to style it immediately. You need to provide both the Family name and CSS URL to the Set web font action.

The Family name is the name of the font shown in Google Web Fonts. You can cut and paste this in from the website. For this tutorial, we'll use the Flavors web font, so Flavors should be entered for the family name.

The Web Font family name.
Scroll down to step 3 ("Add this code to your website"). We don't need all that code - we just want the URL following the href. So cut and paste the URL in to the CSS URL parameter as shown below.

The Web Font CSS URL


You're all done! Click Done and preview the layout. You should see your font appear.

Using the Web Font.


There are two more things to talk about though: previewing in the editor, and the loading time for the web font.

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

2
Yann 15.0k rep

Maybe there could be a preload font like the preaload sound of the audio plugin.
Also I was wondering if it was possible to have an "is preloaded" condition either for web font or sound.
This way we could more precisely delay the display of text or sound.
Anyway Great feature (:

Monday, January 02, 2012 at 2:17:13 AM
2
Ashley 112.5k rep

@Yann, I think I'll improve it in future so no delay is needed. Still, the invisible text object basically is a preload. You could also test if it's the first run or not with WebStorage and adjust the delay based on that too.

Monday, January 02, 2012 at 2:25:02 AM
1
Yann 15.0k rep

Cool :] Thanks

Monday, January 02, 2012 at 2:47:48 AM
1
diascarlosryal 3,749 rep

@Ashley The web fonts feature is integrated with PhoneGap? Did you test it?

Monday, January 02, 2012 at 11:32:26 AM
1
Ashley 112.5k rep

@diascarlosryal I haven't tested Web Fonts with PhoneGap yet I'm afraid - it might need a connection to work...

Monday, January 02, 2012 at 6:12:04 PM
3
edisone 13.5k rep

so is better not using webfornts with android or cellphone appz,right ?

Monday, January 02, 2012 at 6:28:27 PM
2
diascarlosryal 3,749 rep

@Ashley I will make some tests, when I have time and post the results. Thank you

Monday, January 02, 2012 at 8:50:43 PM
1
Kyatric 41.4k rep

Yet another nice feature and another nice and clear practical tutorial to help using it.

A very good job as always Ash.

Tuesday, January 03, 2012 at 6:08:54 AM
2
bdunzer 1,937 rep

Hi All,

One thing you might want to look into is base-64 encoding of the fonts and putting them into the CSS. This would increase the size of the CSS file but it would make sure it is there and decrease the delay in rendering. There are a lot of resources for FREE fonts and one good location is FontSquirrel, they even have the converter available...look for the FontSquirrel Generator.

Monday, January 09, 2012 at 12:36:06 AM
1
gregoryg 2,468 rep

Sorry, I'm fairly new to web fonts and am a little confused here. Google's web fonts don't contain the sort of font I want to used (pixelated and chunky), but many other places seem to - including FongSquirrel as bdunzer mentioned.

However, even after going to the "@font-face Kit" link of a font I like there, I can't seem to figure out how to hook up what they give me (a downloadable zip) to Construct in the same way that a Google CSS url works. I assume this isn't what's supposed to happen, however, I can't seem to find a CSS url there.

Where should I be looking? What other websites other than Google Fonts API have an easy way to do this? How do I find that url? Thanks!

Friday, January 20, 2012 at 8:35:59 AM
2
Ashley 112.5k rep
Friday, January 20, 2012 at 9:36:35 AM
1
gregoryg 2,468 rep

@Ashley Yep, thanks a bunch!

Friday, January 20, 2012 at 3:24:13 PM
1
simwhi 6,049 rep

A very useful tutorial. Just what I need... Great work.

Tuesday, February 07, 2012 at 7:15:10 AM
0
preetam 2,114 rep

Thanks for this gr8 tutorial......

Friday, August 24, 2012 at 1:28:34 PM
0
RangerJim 3,265 rep

I've been looking for this...

Tuesday, January 08, 2013 at 4:05:35 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.