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.
Simple Method
Step 1
Put the page in Edit mode
Step 2
Click on the Setup tab in the Text Widget
Step 3
Click on Formats > Headings and select the Header size for your text
Advanced Method: Supported Inline CSS Properties in the Text Widget
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
Changing the Background Color of the Container Box in the Text Widget
Would you like to emphasize 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:
Step 1
In the Text widget > Setup tab, click on Formats > Special > Container to insert a container element.
Step 2
Enter the text content in the container.
Step 3
Click Edit and select the Source Code.
Step 4
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">
Step 5
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
Remove the container box in the Text widget
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
-
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.