Control Text Rendering

Text Rendering Options and its Pros and Cons

All objects that can contain text in SmartBuilder can have their text set to render with one of three options.
Text Rendering Dropdown.png

  1. Default: Allows for lesson wide rendering control.
  2. Device: Uses fonts installed on each learner's computer.
  3. WYSIWYG (What You See Is What You Get): Smartbuilder draws all the characters.
  Pro Con
Default Allows for lesson wide rendering control. None
Device It's a little bit crisper and will render a little faster at runtime. If you use a font that the learner doesn't have installed on their device, the text will use a different font. Even if the font is installed on the learner's device, the spacing/wrapping may be slightly different.
WYSIWYG
(What You See Is What You Get)
Text will look exactly the same and spacing/wrapping will be consistent on all devices. Small text is slightly less crisp. Not really noticeable on larger text sizes. If text of this type is set programmatically it will automatically switch to using device.

Best practice suggestions:

How to bundle fonts with your lesson after publishing

Including the fonts files within your downloaded lesson can give you the most flexibility as you can use unique fonts that learners may not have on their computers as well as set such text programmatically. There are two main ways you can accomplish this.

Link to a Google font

  1. Download the Google font you want to use and install it on your computer.
  2. Use the font in your lesson and make sure to use the Device font setting.
  3. Publish your lesson for deployment.
  4. Find your font in Google fonts and select it.
    Selecting a Google Font
  5. Expand the font selection panel and copy the standard embed code.
    Selecting a Google Font's Embed Code
  6. Open the index.htm file of your published lesson in a text editor such as notepad or Dreamweaver.
  7. Paste the embed code in the <head> section of your HTML document.
    Embed code in your html file
  8. Save the index.htm file.
  9. Test on a computer or device that does not have the font installed.
  10. Repeat as needed for other fonts.

Note This technique will only allow for the embedding of the main font in the Font family selected. To embed the other family sub-fonts in a lesson use the method below that includes the actual font file within the lesson.

Include actual font files in lesson package

  1. Download the fonts you want to use and install them on your computer.
  2. Use the fonts in your lesson and make sure to use the Device font setting.
  3. Publish your lesson for deployment.
  4. Add the actual font files to the folder that contains your published lesson.
    copying actual font files
    pasting font files
    font files in published lesson folder
  5. Open the index.htm file of your published lesson in a text editor such as notepad or Dreamweaver.
  6. In the <style> section of your index.htm document, add code similar to what is in the image below.
    Adding the code to your html files style section

    Tip To find the font-family name open the actual font file and the first line should list the font name.

    Tip To find the weight look in the Google Font selection Customize tab.


    Google Fonts Customize Tab
  7. Save the index.htm file.
  8. Test on a computer or device that does not have the font installed.
  9. Repeat as needed for other fonts or family sub-fonts.