[ARCHIVED] Custom CSS: Font Import - Instructure Icons on Mobile

[alfredasplén]

A few weeks fresh Administrator / Designer here.

I'm in the middle of absorbing everything I can about CSS and HTML while also coming up with applications and solutions for my institution using what I'm learning. I've managed to get a clear enough idea of the options available to me by lurking around the forums here as well as official documentation, but I'm still stumped on a few points I was hoping to get some help with.

1. Custom Fonts

I would like to have the ability to use fonts specified in our brandbook(s) across all courses for the sub-account associated with that branding. One is "Open Sans", which I know is publicly accessible through Google Fonts, but the other two are not.

How can I go about solving this?

• Can I @import the font via a public link from an online storage service?
• Can I provide access to the company SharePoint server through CSS code and then host the fonts I want to access there?
• Can the fonts be hosted directly within Canvas, for example at the root account level file storage?

2. Instructure Icons on Mobile

I've found the solution to adding the Instructure Canvas icons to my page layouts, but I need some clarification on how to allow displaying them on mobile. In the replies to the thread I linked, the OP writes:

"As far as I know, the admin has to allow (at the very least) the @font-face declaration for  'InstructureIcons-Line'  to be a part of the css file for the app; this also means turning on/allowing css for your app if it is not already."

I would appreciate some further clarification on the exact code I would need to write for the Mobile App CSS to accomplish this, or a link to some already existing documentation with the answer I'm looking for.