Customizing fonts

Development Design
,
1

I’m using tutor with openedx olive. As stated in the tutor documentation I used indigo theme as a base for making my own custom theme. I successfully changed the logo but the font is partially changed. In some sections I see my own font and in some other sections (usually buttons and pages other than the homepage) I still see the default font.

To change the font, I followed these steps:

  1. added custom fonts to a directory within the theme directory
  2. added fonts using font-face in lms/static/sass/partials/lms/theme/_fonts.scss
  3. updated font-family-title, serif and f-sans-serif in _variables.scss

So where is the other font coming from? Is it from edx-boostrap that’s imported in _variables.scss? Assuming this is the issue, I forked edx-bootstrap and changed the fonts there as well. Then I added my own bootstrap (using github link not npm package yet) in openedx-platform package.json file. But now when I want to replace edx-bootstrap with my own bootstrap in the _variables.scss file, when building the image, I get errors saying my bootstrap does not exist and is not found. So does tutor (indigo) has it’s own package.json or something like this? Is there any other way for adding a package to package.json file except adding it to openedx-platform and building the image? Is there any other way of changing fonts globally?

2

Hi @FatemeKhodayari!
The problem is that the theme only impacts on the legacy HTML pages. MFEs go in another way.

We have developed a Tutor plugin that allows customizing the branding, including fonts, in both HTML and MFE. Please check tutor-contrib-branding and let me know how it works.

1 Like
4

Thanks @Andres.Aulasneo. I tested the mentioned plugins and it works on LMS but not on CMS. Is there a way of applying the custom font on CMS as well?

5

Hi @FatemeKhodayari,
Yes, to be honest I don’t pay much attention tu customizing Studio. It happens because we are copying font files only to LMS, not to CMS.

It would also require to replicate the fonts file in the CMS directory, and add the font variables also in CMS, and importing fonts in the extras file.

I’m not sure if it will work and how, but if you can make it work I will appreciate if you submit a PR with the changes.

6

Hi @Andres.Aulasneo, Actuaally I tried doing all this by forking your repo and adding this commit. But it didn’t change the CMS font. Can you please have a look at it?

P.S. copying fonts into static/fonts and adding font variables and extra file for cms (doing same as lms) works in indigo but partially. But this approach on tutor-contrib-branding leads to no change of font, not even partially.

7

Note that tutor-contrib-branding creates a theme called theme. Did you set it with tutor local settheme theme?

8

Yes. I did the steps mentioned in the documentation. For the last step though, I did tutor local do settheme theme, as my tutor returned an error for not typing the do

9

Hello @Andres.Aulasneo ,

I have a theme already set in Tutor. After updating my Tutor version, the Learning MFE is now required. I want to change the fonts on the MFE pages to match the fonts in my theme.

I followed the steps mentioned in the readme file, but I’m stuck on the following command:

tutor branding download-fonts

I encountered the following error:

image
image1502×518 119 KB

 tutor branding download-fonts
*** Downloading fonts ***
Downloading font.zip from h to /home/komal/tutor_projects/olive_new/tutor_olive/env/build/openedx/themes/theme/lms/static/fonts
Error downloading font.zip: Invalid URL 'h': No scheme supplied. Perhaps you meant https://h?
...
with zipfile.ZipFile(os.path.join(dest_dir, filename), 'r') as zip:
  File "/usr/lib/python3.10/zipfile.py", line 1251, in __init__
    self.fp = io.open(file, filemode)
FileNotFoundError: [Errno 2] No such file or directory: '/home/komal/tutor_projects/olive_new/tutor_olive/env/build/openedx/themes/theme/lms/static/fonts/font.zip'

Can you please assist?

Thanks in Advance :slightly_smiling_face: