Changing Fonts
To change the font of your project, you have to edit the style.css file.
1. First, pick your font. The easiest thing to do is to pick a Google Web Font—these are fonts Google makes available for embedding on web pages. Here’s the complete list: https://fonts.google.com/
2. Next, open up the style.css file in Brackets or your preferred text editor. Make the following line the first line of style.css:
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
Replace Open+Sans with the name of the font you want to use. Be sure to replace any spaces in the font name (if it’s more than one word) with plus signs. Like:
@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah);
3. Finally, you have to add another line to style.css. In the body section of the file, add this line:
font-family: Gloria Hallelujah;
Replace “Gloria Hallelujah” with the name of the font (here you need to use spaces if the font name is more than one word).
Save and reload the project in your browser, and you should see the new font take effect. If you have trouble, Google “Google Web Font CSS” and you should find some good tips.
Adding Images
In order to add images, you have to use the <img> HTML tag in your index.html file. See here: https://www.w3schools.com/tags/tag_img.asp.
It’s hard to be more specific than this, because it depends on where you want your image to show up. If you want your image at the top of your page, you can add an image right below the <H1>Title</H1> tag.
Another way to include images is to use the <img> tag directly in the Origin rule in grammar.js. In fact, you can use Tracery to randomize which images show up in your project.
Whatever image(s) you want to embed should also be placed in the same folder as your index.html file.
Other Formatting
You can use bold, italics, and even paragraph breaks in your project by using the appropriate HTML tag in the Origin rule. For example, if your project takes the form of a multi-paragraph announcement, you could do something like this in grammar.js:
"origin": [ "#firstParagraph#<p>#secondParagraph<p><em>#sincerly#</em> ]
The <p> tag forces a paragraph break between the #firstParagraph# and #secondParagraph# rules. The <em> tag turns on italics for the #sincerely# rule, and the </em> turns the italics off.