How to use a Web-Font in Construct 2

INTRODUCTION

Want to use certain font but doesn't know how? Stressed out? Stressed back in!(huh?) Because today you will learn how to. My first attempt to put certain font to become the font I want is... disaster. Works on my computer but doesn't work at all on my laptop. This is because my laptop doesn't have the font that I want to use so how to use a certain font? Use a web-font!

THE FIRST PART

1. So... the first thing is, go to this website: Font Squirrel ... done? Great! The website will look like this:

Font Squirrel(unregistered user version)

2. Good, good... now take the font you want and upload it. Just drag the file to the upload button.

3. Accept the agreement and press download.

THE SECOND PART

1. After you download the font, you will be getting files like this:

Many files!

2. Open your Construct 2.

3. At the 'Projects Bar' you will have all sorts of file. Open the 'Files' folder below the 'Music' folder.

Below 'Music' folder.

4. Right-click on the 'Files' folder and import only these things:

Only these kind of files! No HTML file!

5. Create any text object. Type something on it.

6. Open the stylesheet.css that you imported just now. (Notepad gonna popup if you set css file to open a notepad.)

7. Don't do anything yet and go to the event sheet.

8. Choose this: System >> On start of layout.

9. At the action tab, choose this: (The text object) >> Set web font(Under 'Appearance')

THE LAST PART

1. Ok, there's gonna look this:

2. Take a look at the stylesheet.css you opened just now, it's gonna look like this:

3. Copy the 'font-family'

4. Paste in into the 'Family name' in Construct 2.

TIPS: Make sure the name is exactly the same!

5. The CSS URL is where do you put the stylesheet.css in Construct 2 engine...

For example: I created new sub-folder inside the 'Files' folder... The sub-folder name is Fonts. I put my new font in there. So how to put the url? Like this:

"../Fonts/stylesheet.css"

So it will be like this:

TIPS: If there is no sub-folder, just put stylesheet.css... without ../ thingy...

FINISHED!

Ok! That's it! If you have any problem, PM me or comment down below. Hope you guys(or girls) understand what I wrote. This is my first tutorial by the way.

  • 0 Comments

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