Sass：使用Material Web Components设置字体族

Hey there! Let's get that custom font working with Material Web Components. I see you tried setting the $mdc-typography-font-family variable but it didn't stick, and you're curious about overriding the mdc-typography-base mixin—let's break this down.

First: Why the Variable Might Not Have Worked #

The !default flag on the MDC variable means it only uses your value if the variable hasn't already been defined. If you imported the MDC styles before setting your variable, the default font family was already locked in. That's a super common gotcha!

Option 1: Fix the Variable Import Order (Simplest) #

If you want to stick with using the variable, just make sure you define it before importing any MDC Sass files. Here's how:

// 1. First, load your custom font (if it's not a system font)
@font-face {
  font-family: 'Comfortaa';
  src: url('/path/to/your/Comfortaa-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

// 2. Define the variable BEFORE importing MDC styles
$mdc-typography-font-family: Comfortaa, sans-serif;

// 3. Now import the MDC typography module (or your core MDC styles)
@import "@material/typography/mdc-typography";

Option 2: Override the mdc-typography-base Mixin #

If you need more control (or prefer directly modifying the base mixin), you can redefine the mixin yourself before importing MDC styles. This lets you tweak not just the font family, but other base typography properties too:

// 1. Load your custom font first (same as above)
@font-face {
  font-family: 'Comfortaa';
  src: url('/path/to/your/Comfortaa-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

// 2. Override the mdc-typography-base mixin
@mixin mdc-typography-base {
  font-family: Comfortaa, sans-serif; // Your custom font here
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  text-rendering: optimizeLegibility;
  // Add any other base typography tweaks you want here
}

// 3. Import MDC styles after your mixin override
@import "@material/typography/mdc-typography";

Quick Checks to Ensure It Works #

• Double-check that your font path is correct (use browser dev tools to verify the font is loading without 404 errors).
• Make sure no other styles are overriding the font family later in your stylesheet (use dev tools to inspect elements and see which font is being applied).

内容的提问来源于stack exchange，提问作者Ludwig