Using Web Fonts in the Text object

5

Index

Stats

14,438 visits, 29,577 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 2 Jan, 2012. Last updated 19 Feb, 2019

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.

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

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.

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.

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

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

  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!