Universe Moodle Theme
Demo Get this theme
  • Universe
  • Changelog
    • 1.1.0 - June 20, 2023
    • 1.0.0 - May 30, 2023
  • Requirements
  • Getting started
    • Theme Installation/Update
    • Translations
    • Recommended plugins to install
      • Atto Editor: Full Screen
      • Atto Editor: Advanced Link
    • Global Styles
      • UI Elements
      • Typography
    • RTL Interface
    • Paid Courses
    • Course Filter
  • Demo Content
    • Demo content
    • Front Page Blocks
      • Hero Blocks
        • Block #1 - Hero Slider
        • Block #2 - Video Hero
        • Block #3 - Hero Image
        • Block #4 - Hero Slider #2
      • HTML Blocks
        • Block #5
        • Block #6.1, 6.2
        • Block #7
        • Block #8
        • Block #9.1 , #9.2
        • Block #10
        • Block #11
        • Block #12
        • Block #13
        • Block #14.1, #14.2, #14.3
        • Block #15
        • Block #16
        • Block #17.1, #17.2, #17.3
        • Block #18
        • Block #19
        • Block #20
        • Block #21
        • Block #22
      • Advanced Options
        • Additional Classes
        • Custom Block Title
        • Custom CSS field
        • Custom CSS/SCSS for Blocks
        • Gradient Titles
        • Rounded Boxes/Containers
        • Rounded Images
      • Re-usage HTML code snippets
    • Front Page Block #0
    • 🎨Course Colors
    • Custom Enrollment Page
    • User roles
  • UI Kit
    • Global Styles
      • Typography
      • UI Elements
      • Headings/Text Modifications
    • Course Layout
      • Standard View
      • Tab Layout
    • Course Page
      • Default Moodle Course List
    • Course Formats
    • Paid Courses
  • Theme Settings
    • General
    • SEO
    • Customization
      • Google Fonts
      • Colors
    • Login page
    • Top Bar
    • Footer
      • Default Moodle Footer Links
    • Google/Custom Fonts and GDPR
  • More
    • 🕶️Show/hide for non-logged in users
    • 🌑Show/hide on the Dark Mode
    • Server recommendations
    • Graphics, Icons etc.
Powered by GitBook
On this page
  • Learn how to add self-hosted Google/Custom Font ->
  • Learn more about self-hosted fonts.
  • How to find Google Font files?
  • Step by step

Was this helpful?

  1. Theme Settings

Google/Custom Fonts and GDPR

Site administration -> Appearance -> Monocolor -> Advanced settings -> Font files

PreviousDefault Moodle Footer LinksNextShow/hide for non-logged in users

Last updated 1 year ago

Was this helpful?

Learn more about self-hosted fonts.

1. Files to upload -> Advanced -> fontfiles

2. TTF, OTF, WOFF, WOFF2 or SVG Converter

Explanation:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Raw SCSS to add

Change 'YOURURL' to the real one eg. for local environment:

Of course, if you are using Moodle File Manager. If not, probably you know what you doing :)

  • localhost/....

  • https://url.com/...

font-face {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    src: url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Medium.eot');
    src: url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Medium.eot?#iefix') format('embedded-opentype'),
        url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Medium.woff2') format('woff2'),
        url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Medium.woff') format('woff'),
        url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    src: url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Regular.eot');
    src: url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
        url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Regular.woff2') format('woff2'),
        url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Regular.woff') format('woff'),
        url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    src: url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Bold.eot');
    src: url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
        url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Bold.woff2') format('woff2'),
        url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Bold.woff') format('woff'),
        url('YOUR_URL/pluginfile.php/1/theme_universe/fontfiles/0/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  body {
        font-family: 'Poppins', Arial, Helvetica, sans-serif;
  }

How to find Google Font files?

Go to Google or DuckDuckGo and search e.g "google fonts poppins github"

Step by step

  1. Get your custom/Google font. The layout is based on 3 font weights. Regular (400), Medium (500 or 600), Bold (700, 800 or 900). a. If you are using italic style, then you have to upload italic font variants for all font weights.

  2. Sometimes, users don't want to use medium weight. If it is your case, remember to set the Font weight: Medium to 400 (Monocolor -> Customization -> Google Font -> Font weight: Medium)

  3. Set the Font Name (Monocolor -> Customization -> Google Font - Font Name (Body))

  4. Upload the font package (Monocolor -> Advanced -> Font files)

  5. Save changes

Learn more How to use @font-face in CSS ->

https://css-tricks.com/snippets/css/using-font-face-in-css/
Add Raw SCSS code ->
Learn how to add self-hosted Google/Custom Font ->
How to add self-hosted variable fonts to your websitebnijenhuis
Logo
Online @font-face generatorTransfonter
Logo