Custom fonts Installation for the Loree editor

Steps to Install Custom Fonts

To install the Loree custom fonts follow the following steps.

1. Download the .otf /.ttf custom font files sent by the client.

2. In AWS go to the non-prod account and upload the files to the following destination https://s3.console.aws.amazon.com/s3/buckets/loree-files?region=ap-southeast-2&prefix=custom-fonts/

3. Select all the files and grant public-read access in the permissions.

4. Open the font file and copy the object URL

5. Paste the object URL in the Loree codes.

Reference MR: https://github.com/crystaldelta/loree-v2/pull/855/files

6. After installing the fonts share the theme.css file with the client and ask them to update it in the canvas themes.

Ways of Testing Custom Fonts on Loree

After finihing all the installation steps as mentioned above, it will be ready for the end users to use custom fonts on their instance.

Here are some ways to test how the font’s are working:

Step 1: please check the Loree Admin Dashboard Fonts section and validate the new fonts whether it’s already available on list

Step 2: Inorder to use those custom fonts across Loree, the fonts should be enabled and save the changes.

 

Step 3: In the Admin Dashboard under Style Manager we have Custom headers and custom link area. Where user can see their newly enabled custom fonts from the Font-family dropdown.

Step 4: Launch Loree Editor and check the text-bubble menu font-family dropdown and you can see the enabled custom fonts

 

Step 5: The same can be tested under Table Design area by selecting any table cell and check the fonts dropdown

 

Step 6: Validate the Loree preview window once you add those fonts on editor page to see whether you added the correct rendered font

 

Step 7: Save the page to LMS

Step 8: View the page on LMS course page and you will see the new font added

Step 9: Please compare the font rendered view(ex: .ttf file) which shared by clients to install and the view what we see in course page. (This step must be done to make sure the right font was added)

Step 10: If the font’s are not rendered properly, please check the Themes and make sure the font’s are added there (only admin’s can access themes)

Step 11: In addition, For Canvas LMS, we need to test the canvas course pages on Mobile Application too since Canvas is maintaining separate CSS for their mobile application for students.

 

Thanks!!!