search

willianmano / moodle-theme_moove

A Moodle Boost child theme
GNU General Public License v3.0
170 stars 155 forks source link

Definitive guide to adding a custom font #423

Closed petre-c closed 1 year ago

petre-c commented 1 year ago

Please explain how to add a custom font to the theme.

There are other issues about this but they point to files/locations that don't seem to exist in version 4.2.

Moodle - How to add custom fonts in a theme

https://github.com/willianmano/moodle-theme_moove/issues/325 https://github.com/willianmano/moodle-theme_moove/issues/225 https://github.com/willianmano/moodle-theme_moove/issues/188 https://github.com/willianmano/moodle-theme_moove/issues/48 https://github.com/willianmano/moodle-theme_moove/issues/288

https://github.com/willianmano/moodle-theme_moove/issues?q=font

petre-c commented 1 year ago

Here's an answer that worked (with the help from ChatGPT)

In Moodle, you can specify a web-font URL in several ways, but the easiest one is through the Additional HTML setting, and another option is via modifying your theme's CSS or creating a child theme. Here are both methods:

Method 1: Using the Additional HTML setting

This is a simpler way but might not work in all scenarios:

  1. In the Moodle dashboard, navigate to Site administration -> Appearance -> Additional HTML.

  2. In the 'Within HEAD' box, insert the link to your web font. If you're using Google Fonts, it would look something like this:

    <link href="https://fonts.googleapis.com/css2?family=YourFontName&display=swap" rel="stylesheet">

    Replace "YourFontName" with the actual name of the font you want to use.

  3. Save the changes.

  4. Go to Site administration -> Appearance -> Theme -> Your theme.

  5. In the 'Custom CSS' or 'Raw CSS' box (the exact name depends on your theme), specify where you want to use the font, for example:

    body {
    font-family: 'YourFontName', sans-serif;
}

  6. Save the changes and then go to Site administration -> Development -> Purge all caches.

Method 2: Modifying the CSS in your Moodle theme

This method requires more understanding of how Moodle themes work:

  1. Locate your Moodle theme's CSS file. This will be on your server, in a directory like /moodle/theme/your_theme/style/.

  2. Open the CSS file for editing, either by downloading it and opening it in a text editor or by editing it directly on the server.

  3. At the top of the CSS file, add the @import rule for your web font. If you're using Google Fonts, it would look something like this:

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

  4. Then, in your CSS, specify where you want to use the font, for example:

    body {
    font-family: 'YourFontName', sans-serif;
}

  5. Save and upload the CSS file back to your server if you downloaded it for editing.

  6. In Moodle, go to Site administration -> Development -> Purge all caches.

Remember to replace 'YourFontName' with the actual name of your font. Be careful when editing your theme's CSS, as incorrect CSS can cause your theme to display incorrectly.

Remember to always make a backup of any files before modifying them. If you're not comfortable making these changes yourself, you might want to consult with a web developer or someone who's familiar with Moodle themes.

18info commented 9 months ago

Hello!

note: I just tested a working way on Moodle 4.3+ (and 3.9 too).

1. Add a directory

(I prefer to use local files)

mkdir -fv /[…]/moodle/theme/fonts

2. Upload files in this directory

3. Modify CSS from the theme

Go to Site admin. / Appearance / Themes / Moove tab "Advanced"
https://my.moodle.tld/admin/settings.php?section=themesettingmoove#theme_moove_advanced