Create better text layouts using HTML and CSS and the Web Render TOP in Touchdesigner
In this tutorial I will show you how we can use HTML and CSS to make more dynamic text layouts in Touchdesigner using the Web Render TOP.
Eventually I gave up trying to fix the custom font using @font-face. After recording the video I was able to get the custom font loaded by reverting to my original method of having the font installed on my computer and referencing it using it’s name, weight, and style.
0:00 – Overview
3:12 – Start coding the HTML and CSS
12:03 – Layout and overview of Flexbox and the HTMl box model
23:48 – Styling the text in CSS
27:08 – Moving into Touchdesigner and using the Web Render TOP
40:44 – Failed attempt at debugging custom font loading using @font-face
Learn more about Flexbox with Flexbox Froggy: https://flexboxfroggy.com/
General Grotesque font by General Type Studio: https://www.generaltypestudio.com/fonts/general-grotesque
Video assets from Local 58: https://www.youtube.com/channel/UCuoMasRkMhlj1VNVAOJdw5w
About The Author
