Setting a "Default Font" for in-browser editing

Problem

When editing a document template in the browser, some users have observed that the font may change from the document font to Times New Roman. This is because the document templates are based off of HTML documents. Web browsers have a default font when when no font is specified, and this is usually Times New Roman. 

When a document template is created, font tags are applied to specific lines of text using spans (learn more about spans here), but if a new line or new element is created on the page, the span no longer applies so no font is specified. If the user doesn't explicitly apply a font to the new elements, they will render into Times New Roman (or whatever browser default is set).

Solution

In order to apply a "default font" to the entire document, you can use some manual editing to create a div around the entire document. A div is essentially a box on an HTML page that is typically used to arrange or style elements which are within the box (learn more about divs here). By putting all of the document template content within a div, the style you apply to the div will be applied to all elements within it that have no style specified (such as when a user creates a new paragraph or table. Other elements that do have styling applied will simply override the div styling due to the HTML hierarchy (read more here). 

How to Implement

1. Build your document template as usual
2. When completed, go to the code view.
3. At the very top of the document code, insert the following*:
   
   <div style="font-family: []; font-size: [];">
4. At the very bottom of the document code, insert the following:
   
   </div>
5. Return to WYSIWYG view and save the document.
6. Be sure to test it to make sure there are no issues with the document template.

*On the top element, edit the [] sections to specify the desired font-family and font-size via inline CSS (read more here).

Example

Sans Serif, size 12, is a commonly used default:

<div style="font-size: 12px; font-family: 'Source Sans Pro', sans-serif;">
  <!-- document template code goes here -->
</div>