Closed petre-c closed 1 year ago
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:
In the Moodle dashboard, navigate to Site administration -> Appearance -> Additional HTML.
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.
Save the changes.
Go to Site administration -> Appearance -> Theme -> Your theme.
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;
}
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:
Locate your Moodle theme's CSS file. This will be on your server, in a directory like /moodle/theme/your_theme/style/
.
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.
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');
Then, in your CSS, specify where you want to use the font, for example:
body {
font-family: 'YourFontName', sans-serif;
}
Save and upload the CSS file back to your server if you downloaded it for editing.
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.
Hello!
note
: I just tested a working way on Moodle 4.3+ (and 3.9 too).
(I prefer to use local files)
mkdir -fv /[…]/moodle/theme/fonts
Go to Site admin. / Appearance / Themes / Moove
tab "Advanced
"
https://my.moodle.tld/admin/settings.php?section=themesettingmoove#theme_moove_advanced
Raw initial SCSS
, add:
@font-face {
font-family: 'luciole';
font-style: normal;
font-weight: 400;
src: url('/[…]/moodle/theme/fonts/Luciole-Bold.woff') format('woff')
url('/[…]/moodle/theme/fonts/Luciole-Bold.woff2') format('woff2')
url('/[…]/moodle/theme/fonts/Luciole-Bold.ttf') format('truetype')
url('/[…]/moodle/theme/fonts/Luciole-Bold.eot') format('embedded-opentype')
url('/[…]/moodle/theme/fonts/Luciole-Bold.svg#Luciole') format('svg')
url('/[…]/moodle/theme/fonts/Luciole-BoldItalic.woff') format('woff')
url('/[…]/moodle/theme/fonts/Luciole-BoldItalic.woff2') format('woff2')
url('/[…]/moodle/theme/fonts/Luciole-BoldItalic.ttf') format('truetype')
url('/[…]/moodle/theme/fonts/Luciole-BoldItalic.eot') format('embedded-opentype')
url('/[…]/moodle/theme/fonts/Luciole-BoldItalic.svg#Luciole') format('svg')
url('/[…]/moodle/theme/fonts/Luciole-Italic.woff') format('woff')
url('/[…]/moodle/theme/fonts/Luciole-Italic.woff2') format('woff2')
url('/[…]/moodle/theme/fonts/Luciole-Italic.ttf') format('truetype')
url('/[…]/moodle/theme/fonts/Luciole-Italic.eot') format('embedded-opentype')
url('/[…]/moodle/theme/fonts/Luciole-Italic.svg#Luciole') format('svg')
url('/[…]/moodle/theme/fonts/Luciole-Regular.woff') format('woff')
url('/[…]/moodle/theme/fonts/Luciole-Regular.woff2') format('woff2')
url('/[…]/moodle/theme/fonts/Luciole-Regular.ttf') format('truetype')
url('/[…]/moodle/theme/fonts/Luciole-Regular.eot') format('embedded-opentype')
url('/[…]/moodle/theme/fonts/Luciole-Regular.svg#Luciole') format('svg')
}
Raw SCSS
, add:
body {
font-family: "luciole";
}
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