3

How do I change font size and style in the text widget?


 

Changing font size or style within your course is a great way to add some extra flair or cater to your specific users by choosing a font that is easiest for them to read. 

There are two ways to change the type of font used in the text widget. The simple method is quite straight forward and uses the default formatting that is used across all courses. The advanced method requires you to tinker with the text source code.


Put the page in Edit mode 

Click on the Setup tab in the Text Widget 

Click on Formats > Headings and select the Header size for your text


 

The Text Widget allows you to add text, images, tables, videos, and iFrames. In the Text Editor, you can customise the elements using inline CSS via the Source Code. 

 

Inline CSS is added in the style attribute of an HTML element.  Here's an example of inline CSS:

 

<h1 style="color: green;">Blog Post Title</h1>

 

Please take note that not all CSS properties are supported in the Text widget. Here is the list of the supported inline CSS properties:

  • background-color
  • color
  • display
  • float
  • font-size
  • margin-left
  • margin-right
  • text-align
  • text-decoration

 

 

Would you like to emphasise a specific paragraph or content by putting it in a container with a background color? You can do this in the Text widget, here’s how:

 

In the Text widget > Setup tab, click on Formats > Special > Container to insert a container element.

Enter the text content in the container.

 

Click Edit and select the Source Code.

 

In the Source Code, please insert the container-color parameter in the container div class. Here's an example:

 

<div data-type="container-border" class="macro-container container-border container-orange">

Click OK and then click Done to save the changes.

 

These are the available colors that you can use for now:

 

  • container-orange
  • container-red
  • container-blue
  • container-yellow
  • container-purple
  • container-teal

 


To remove the container, highlight the text inside it. Then, click Edit in the top right corner of the Text widget and select Remove container.

2 replies

null
    • Austin_Van_Groningen
    • 3 yrs ago
    • Reported - view

    Thanks for this info, Open Learning team! This seems to cover only font sizes and styles. Is it possible to change the font itself? Eg our institution uses a font called Encode Sans - we'd love to use this for branding consistency if we can.

      • Customer Success Team
      • Omnaya_Omar
      • 3 yrs ago
      • Reported - view

      Austin Van Groningen Hi Austin! Please take note that not all CSS properties are supported in the Text widget. Here is the list of the supported inline CSS properties: 

      • background-color
      • color
      • display
      • float
      • font-size
      • margin-left
      • margin-right
      • text-align
      • text-decoration

      Unfortunately, this means that Font style is not one of our supported properties at this time. We would love for you to recommend it on our Suggest a Feature page if it is something you believe would improve your OpenLearning experience! 

Content aside

  • 3 Likes
  • 3 yrs agoLast active
  • 2Replies
  • 1357Views
  • 7 Following