Can the students use any other fonts?

csd-unit-4
csd-unit-4-lesson-12

#1

Are other fonts available in the App Lab?


#2

hi @jreynolds,

Great question, I never thought about doing that before, but I will get an answer for you!

cheers,
Kevin


#3

There’s no way to set the font in design mode, but we do have an advanced undocumented command called setStyle that allows you to assign a CSS style to your design mode elements (great callback to unit 2!). setStyle takes two parameters, the first is an ID of an element, and the second a string of CSS to apply to that element, for example:

setStyle("myButton", "font-family: cursive; font-weight: bold;");

Here’s a quick example app showing how setStyle works https://studio.code.org/projects/applab/YzXR4wJXjGfrUSuFp9qzYA/edit


#4

Since I was playing around with this anyway, and it may be of more interest to students in CSD who have already learned some CSS, I put up a quick documentation page for setStyle https://docs.code.org/applab/setStyle/


#5

Thanks! I will play around with it today.


#6

Where exactly do we put the CSS setStyle code? In the workspace window with the onEvents?
Nevermind - I realized the change in font doesn’t take effect until the app is running.


#7

Thanks so much! I love this!


#8

Fabulous update. Great callback indeed. Thank you!


#9

Thanks Josh! My students were in AppLab and wanted to make some text bold and I used this to help them do it. It is good to know that CSD’s environment for CSS allows us to use the same commands for JavaScript. Thanks Josh!


#10

Hi Josh,
Sorry for the thread necromancy, but does setStyle also allow students to import from e.g. Google Fonts (they loved that during Unit 2), or is there any other way to do so?
Thanks,
Laurence