Stats

4.7K visitors
54K page views
1,296 translation visitors
5.2K translation page views

Using Web Fonts in the Text object

Favourite 89 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

0
vila4480 1,251 rep

Hi guys.. new guy here ^^ (my first comment)

Does this mean that you can't really access other fonts without internet access on your tablet or smartphone?
Is there a way around it?

Flash had an "embed font" option. Is this possible somehow here on Construct 2?
(i didn't want to force an internet connection to run my app just because of the fonts... but they are important in my app!)

Also: i did not make any changes to the project and last night it worked perfectly and now the selected font does not show up... has this happened to any of you guys? Don't really know how to fix something that was ...well... working... =x

Thank you for your time!

Sunday, February 03, 2013 at 2:42:43 PM
0
vila4480 1,251 rep

Does this mean that you can't really access other fonts without internet access on your tablet or smartphone?
Is there a way around it?</div>Ah wait.. this is the right way to "embed" a font!

www.scirra.com/tutorials/237/how-to-use-your-own-web-fonts

I only noticed the other tutorial now, sorry!

Sunday, February 03, 2013 at 2:56:00 PM
0
mineet 7,086 rep

before reading this tutorial, I had been trying to add txt and found the fonts very limited. So I went into another program on my p.c. Ideally I would like to use construct for everything.
However I am yet to find a way of adding a border to the fonts/ texts and edit how the txt looks, for example- like on word art. Maybe I am looking for too much... Its just I think the title page is important to get the initial interest..

Saturday, March 23, 2013 at 3:13:19 AM
0
InvaderX 6,302 rep

Where is the download your collection button?

Sunday, May 12, 2013 at 3:49:24 PM
0
JudyScott 8,707 rep

If the font has more than one word in the name, it may have Plus signs instead of spaces in the Google link. If it doesn't work in Construct, try removing the Plus signs.

Thursday, July 25, 2013 at 4:43:14 PM
0
vancouver 1,735 rep

Thanks for all the info. I didn't read up on Text and made a mess! Now I know, LOL :)

Sunday, May 18, 2014 at 2:06:38 AM

Leave a comment

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