Adapt Learning Community: Using specific fonts in a theme

Skip to main content

Hi all,

I'm new to both the Authoring Tool and the community - so would appreciate any help you may be able to provide.

Having recently installed the authoring tool, and created some courses, I've had a go at creating my own theme, making simple changes to colours and fonts etc. The theme, after producing several frustrating versions figuring out how various things work, is now working, apart from one thing, my company-specific font.

I've managed to use @font-face to reference a specific font for headings, which is held on our company server (where the main website resides). I have a separate font stack using font-family for body text etc.

When I preview (or download and run as a SCORM package) it all works perfectly on my iPad. This is encouraging as I know the majority of my theme changes have been successful.

However - every other device / browser combination is not working correctly with the font-face referenced header font (it just defaults to a standard font).

Looking into this - I’m getting this error showing in the console on Chrome inspector:

Redirect from (font @ our web address) has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin (our Adapt learning site) is therefore not allowed access.

I've never come across this before and don't know how I would tackle it, so I'm hoping someone else here has!

This is my first time using the tool and I'm very pleased with the results so far - there is just this one bug holding me up from getting courses out with the correct branding etc. - no idea why it works fine on the iPad but not anywhere else - very frustrating!

Does anyone have any suggestions for a solution to this?

I was also wondering (not sure if this is even possible) but can you directly embed fonts into your theme somehow rather than just referencing them using @font-face? So if I have the font installed on my laptop can I wrap that up in the theme file somehow (or add it to the exported SCORM file) - just thinking of alternatives this might not even be possible?

Many thanks for your help!

Jon

Chances are that that when you are running your course it is running over http but trying to load fonts from a URL that is https - this is not allowed.

You should probably be able to fix this by using a 'protocol-less URL' to reference the font in your theme i.e. //britishcycling.org.uk/zuvvi/ext/template/bc/tpl_global_page/design/assets/fonts/

Show parent | Reply

Hi Matt

thanks for the advice - have changed as you advised and then, when re-uploading and applying the theme, I am seeing no change.

Without the protocol on the URL - it still pulls through correctly to the iPad using Chrome but all other devices are still not displaying the font correctly?

Any ideas what it could be?

many thanks

Jon

Show parent | Reply

Assuming you've cleared your cache to make 100% sure you are seeing the latest version... no, difficult to take it any further without being able to access for myself. Sorry.

Show parent | Reply

Hi

Yes cleared the cache and tried again still no different, even when exporting the course and testing externally.

I wondered if there is any benefit investigating the iPad issue more - it is very strange how it works on there but not other devices - but i can't inspect using dev tools in there to see what it's doing.

Thanks for your help Matt - anyone else any ideas?

Thanks

Jon

Show parent | Reply

If your content is running on a different domain to the one your fonts are on (www.britishcycling.org.uk) then I suspect this is what you are running into: https://davidwalsh.name/cdn-fonts

FYI if you have access to a Mac you can inspect content running on an iPad: https://developer.apple.com/safari/tools/

Show parent | Reply

Thanks for your advice - just wanted to let you know we've managed to reach a solution so thought I would share it here in case anyone else has similar issues.

In the end the simplest solution was to store the fonts on the same server as Adapt is running, then reference that folder directly "/fonts" This seems to work on all devices now.

Thanks again for your help

Jon

Show parent | Reply

Further to the above - this "solution" didn't get me very far as this only worked in preview mode as the fonts are referenced on the same server.

As soon as the course was exported and tested externally it no longer worked.

Until i figure out a more permanent solution - I have been able to "fix" the problem by manually copying the font files into the fonts folder of the SCORM package export - then referencing them in the CSS output directly, re-zipping it up and uploading to LMS.

All tests so far seem positive so at least I have a workaround for now. Will investigate further at some point and see if there is a permanent fix with some of the suggestions that were made in the above.

Thanks again for your assistance

Jon

Show parent | Reply

Hi Jon

Could you not add your fonts to the 'fonts' folder in your theme (alongside the 'vanilla' font that contains all the icons used in Adapt)?

That way they'll get built into the course when you preview/export.

That's certainly how most people handle fonts if not using web fonts hosted by Google Fonts or the like.

AFAIK if you only have to support modern browsers (nothing lower than IE11) then you only need the .woff version of the font.

Show parent | Reply

Hi Matt

I was wondering if that was possible in the original post:

"I was also wondering (not sure if this is even possible) but can you directly embed fonts into your theme somehow rather than just referencing them using @font-face? So if I have the font installed on my laptop can I wrap that up in the theme file somehow (or add it to the exported SCORM file) - just thinking of alternatives this might not even be possible?"

haven't really pursued that as an option as it wasn't mentioned until now, so didn't think it was possible. In the theme I have been editing (based on vanilla) there isn't a fonts folder, only assets. When I export as SCORM the fonts folder appears and I can add them in as mentioned above.

If there is an easier, cleaner way to do this that would be great. I am using the authoring tool rather than framework is that why there is no fonts folder for the theme?

Thanks

Jon

Show parent | Reply

So you did, sorry missed that bit.

We recently moved the vanilla font from the theme into the framework itself, since it's required no matter what theme you're using.

If you have a look at some of the other theme plugins you should see a fonts folder still there

https://github.com/cgkineo/adapt-kineo-theme

https://github.com/taylortom/adapt-theme-community

https://github.com/davetaz/adapt-theme-odi

Show parent | Reply

Thanks Matt - it's all working perfectly now.

I thought that was just the way the theme worked, I've done all my development based on vanilla which is what a lot of the documentation mentions. I didn't know the fonts folder had been moved into the framework, but yes that makes sense and I can see how it is represented in the above links.

Simply adding a fonts folder directly into the theme and referencing it accordingly has sorted it. Working just how I wanted it now :)

I think this would be a useful addition to the documentation - how would I go about recommending this and/or contributing to this part of the wiki? I think it would help beginners such as myself to resolve basic theme editing queries of this type.

thanks again for all your help.

Jon

Show parent | Reply

Well there's a wiki page 'styling your course' here that seems like the obvious place for it to go. I'm not sure how we go about handling contributions to Wiki pages... does it give you an option to edit that page?

Show parent | Reply

I'm not sure how to go about it either! but yes edit works ok. Do these articles get edited by users aswell as developers?

Let me know if there is anything I need to do specifically - I'd be happy to add to this.

thanks

Jon

Show parent | Reply

Do these articles get edited by users as well as developers?

They certainly should be, the documentation should be for everyone so just having developers work on it isn't the best way to achieve that!

I would suggest you make the changes then just drop a note in the documentation chat asking people to review and amend/suggest edits if necessary.

Show parent | Reply

Hi Jon

would you mind sharing exactly how you referenced your fonts please, I'm trying to do exactly the same with a specific font and I'm not 100% sure how this can be done.

Thanks

James

Show parent | Reply