How do I use custom font in list object?

0 favourites
  • 6 posts
From the Asset Store
This is a single chapter from the "Construct Starter Kit Collection". It is the Student Workbook for its Workshop.
  • Hi!

    I'd like to know if there's a way to use a custom font in a list object.

    I know the text object has a "set web font", but the list object doesn't have that. I have imported the font as .eot, .svg, .woff, .ttf to the project files and the stylesheet for it is there too.

    How would yo do it with the "set css" action? It doesn't seem to work if I set it to the font name as specified in the stylesheet.

  • You can use this:

    "select.options["&loopindex&"].style.fontFamily = 'Your Font Name';"

    I am using a loop so you can replace the loopindex with the itemIndex of your item.

    "select" the ID in your List's Properties

  • Hi!

    Thanks for your help. :)

    I managed to make it work with web-fonts like this:

    But yeah, the custom font I imported doesn't work.

    I'm not sure where the code you provided should go?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • ah, my code will allow you to customize your list.

    Some Item in the list will have another font-family.

    Like:

    Item 1 - Arial

    Item 2 - Impact

    etc...

    But I think it could help you a bit

  • Ah yes I see. Makes sense.

    So you wouldn't perhaps know how to set the list to use a .woff font I imported? I've been following this tutorial that's meant for a text object:https://www.scirra.com/tutorials/557/using-any-fonts-in-your-project

  • Ah I made it work.

    Had to dig in the forum to find the answer.

    For anyone else who want's to know:

    To set a textbox or a list to have a custom font that's in your project files folder, you have to first add an empty text field to the layout that uses the "set webfont" action.

    Then any other object like the list object can have that font by simply using the "set css" action to: "font-family" and value: "thefontname".

    I'll write a tutorial on it too. :)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)