Adapt Learning Community: Adding custom font to theme

I'm trying to add a custom font (Roboto) to my theme. However, when previewing my course, the font doesn't load; and switches to the fallback font. Please see my config below. Have I got the file path incorrect? I'm not sure what I'm missing...

Font declaration in less/_defaults/_font-config.less

@font-face { font-family: 'Roboto'; src: url('fonts/Roboto-Regular-webfont.woff'); font-weight: normal; font-style: normal; }

My font is located at less/fonts/Roboto-Regular-webfont.woff

Any help very much appreciated.

Thanks!

I realise it's not quite what you're asking, but after lots of mucking around in the last couple of years, the custom css route seems far more reliable for fonts and it's easy to use google or adobe typekit. So for Roboto-Regular you'd have in there

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap');

and make classes with

font-family: 'Roboto', sans-serif;

etc

If you want to call fonts locally then I've put them in the course back end as it were. So
courseidfolder/build/adapt/css/fonts/

However, this is not on the latest framework I might add, but maybe it's useful to you on a Saturday evening.

All the best,

Jonathan

Show parent | Reply

Thanks for your response, but I'm still not quite sure how to set up with the font files themselves (I'd prefer not to import from Google or Adobe).

courseidfolder/build/adapt/css/fonts/

How do I find out what my own path is (what replaces 'courseidfolder')?

Are there any alternative domains I can import fonts from?

Show parent | Reply

In the authoring tool dashboard, the cog on each course gives you access to copy id to clipboard. Screenshots attached. This tells you the folder name of a course in the adapt back end. Depending on where you have the adapt AT installed it's easier or harder to find your way there but the path is

adapt_authoring/temp/[frameworkid]/adapt_framework/courses/[courselibraryid]/

and in here will be a folder that matches the course id that you copied. If your install is on something like Azure or AWS you'll need a utility such as Cyberduck to find your way. If it's local and on MacOS a spotlight search does the trick.

then it's

build/adapt/css/fonts

frameworkid and courselibraryid will be unique to your install (I assume)

at /temp you'll see another folder that is generally empty too so look in both you see there.

It's a pretty confusing file structure until you get used to it – I mean what on earth are all the really important bits doing in 'temp'? But that's the way it is, counter-intuitive or not ; - )

As I say, I am no expert with the back end – just in the wonderful tradition of trial and error (and some great people on here have helped me with some pretty big errors I've made in a corporate production setting) I've worked stuff out… which is the really great thing about Adapt – you can gradually learn with it. So tread carefully going into the file/folder structure 'cos if you move something by accident all hell can / will let loose.

(and we're a few frameworks back from the latest, too, for numerous ridiculous reasons)

Jonathan

Show parent | Reply

Thanks for your help. I'll give this a try and let you know if I have any further issues.

If it's too complicated, I may just stick to web-safe fonts!

Show parent | Reply

Just to wrap this discussion up, I solved the issue by placing my font file in the 'src/core/fonts/' directory and setting the font's source URL as 'fonts/Roboto-Regular-webfont.woff'

Show parent | Reply