Space Moodle Theme
  • Space 2.5.x
  • Changelog
    • Discover the Space version 2.5.0
  • Requirements
  • Getting started
    • Support Page
    • Theme Installation/Update
    • Translations
    • Demo content
    • Export and import Moodle site configurations
    • RTL Interface
    • Paid Courses
    • Global Styles
      • Typography
      • UI Elements
      • Headings/Text Modifications
  • Theme Settings
    • General
    • Dark Mode
      • 🌑Show/hide on the Dark Mode
    • SEO
    • Customization
      • Google Fonts
      • Colors
    • Login page
      • Hide Fields on Sign-up Page
    • ⭐Front Page Blocks
      • 🕶️Show/hide for non-logged in users
      • Block Order
      • Block #0 - Default Moodle Front Page Blocks
      • Hero
        • Block #1
        • Block #2 (Hero Video)
        • Block #21
      • FAQ
        • Block #4
        • Re-usage FAQ Snippet
      • Grid Content
        • Grid Content #1
        • Grid Content #2
        • Grid Content #3
        • Grid Content #4
        • Grid Content #5
        • Grid Content #6
        • Grid Content #7
        • Grid Content #8
        • Grid Content #9
      • Content
        • Content #1
        • Content #2
        • Content #3
        • Block #5 - Logotypes
      • Categories & Icons List
        • Categories List #1
        • Categories List #2
        • Logotypes List #1
        • Course List
        • Icons List
      • Stats
        • Stats #1
        • Stats #2
      • Team
        • Team #1
        • Team #2
        • Team #3
      • Testimonials
        • Testimonials #1
        • Testimonials #2
        • Testimonials #3
      • How to add more item to blocks?
    • Top Bar
    • Course Page/Card
      • Course Card
      • Course List
    • Sidebar
    • Sidebar navigation
    • Footer
    • Custom alert
    • Advanced settings
    • Google/Custom Fonts and GDPR
    • Default Moodle Footer Links
  • More
    • Server recommendations
    • Graphics, Icons etc.
Powered by GitBook
On this page
  • Learn more about self-hosted fonts.
  • Explanation:
  • Raw SCSS to add
  • Recommended CSS attributes:
  • How to find Google Font files?
  • Step by step

Was this helpful?

  1. Theme Settings

Google/Custom Fonts and GDPR

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

PreviousAdvanced settingsNextDefault Moodle Footer Links

Last updated 1 year ago

Was this helpful?

Learn more about self-hosted fonts.

1. Files to upload -> Advanced -> Font Files

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:

  • localhost/....

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

(Light Weight Text) font-weight:100|200|300; (Regular Weight Text) font-weight:400; (Medium Weight Text) font-weight:500|600; (Bold Weight Text) font-weight:700|800|900;


Recommended CSS attributes:

For Regular Text: font-style: normal; font-weight:400; For Regular Italic: font-style: italic; font-weight:400; For Medium Text: font-style: normal; font-weight:500; For Medium Italic: font-style: italic; font-weight:500; For Bold Text: font-style: normal; font-weight:700; For Bold Italic: font-style: italic; font-weight:700;

  • eot - format('embedded-opentype')

  • woff2 - format('woff2')

  • woff - format('woff')

  • ttf - format('truetype')

  • svg - format('svg')

@font-face {
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  src: url("YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Regular.eot");
  src: url("YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Regular.eot?#iefix")
      format("embedded-opentype"),
    url("YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Regular.woff2")
      format("woff2"),
    url("YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Regular.woff")
      format("woff"),
    url("YOUR_URL/pluginfile.php/1/theme_space/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_space/fontfiles/0/Poppins-Medium.eot");
  src: url("YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Medium.eot?#iefix")
      format("embedded-opentype"),
    url("YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Medium.woff2")
      format("woff2"),
    url("YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Medium.woff")
      format("woff"),
    url("YOUR_URL/pluginfile.php/1/theme_space/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_space/fontfiles/0/Poppins-Bold.eot");
  src: url("YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Bold.eot?#iefix")
      format("embedded-opentype"),
    url("YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Bold.woff2")
      format("woff2"),
    url("YOUR_URL/pluginfile.php/1/theme_space/fontfiles/0/Poppins-Bold.woff")
      format("woff"),
    url("/pluginfile.php/1/theme_space/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 (Customization -> Google Font -> Font weight: Medium)

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

  4. Upload the font package (Space -> 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