How do I style a text input using a font from the project?

0 favourites
  • 3 posts
From the Asset Store
Total customisation of the input! You can combine inputs from all peripherals. Make your game accessible for everyone!
  • ..or am I limited to using standard web fonts?

    Cheers

  • Not too sure if there is an easier way of doing this, but you could do it with a relatively simple script

    try
    {
    	// Get the url for the font in the project files
    	const fontUrl = await runtime.assets.getProjectFileUrl("project-font-name-goes-here.woff2");
    	
    	// Create a FontFace object. Make sure to use the correct font format, in this example it's "woff2"
    	const fontFace = new FontFace("ExampleFont", `url(${fontUrl}) format("woff2")`);
    	
    	// Load the font
    	const font = await fontFace.load();
    	
    	// Add the font to the document
    	document.fonts.add(font);
    	
    	// Apply the fontFamily style to your input element
    	document.querySelector("#myInput").style.fontFamily = "ExampleFont";
    }
    catch (e)
    {
    	console.log("something went wrong");
    }
    

    Instead of applying the style directly after loading the font, you could create a stylesheet in Project -> Files and then load it using the Load stylesheet action of the Browser Plugin.

    The stylesheet would look something like this

    	#myInput{
    		font-family: "ExampleFont";
    	}
    

    After the font is loaded, the style will take effect.

    Here is an example project doing all of that. https://www.dropbox.com/s/gzy5zdkghp7w5yu/FontLoading.c3p?dl=0

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Great. Thank You!

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