Skip to main content


Our MWF glyph font is used by many of our components to display iconic content. Preset glyph options are available based on component requirements. This is intentional, to prevent arbitrary usage of glyphs on HTML elements and enable design consistency across all MWF sites.

Font family

The font family used below contains a subset of glyphs from Microsoft Design Language, ensuring all MWF sites share the same cohesive and consistent experience. For cross browser support we include 3 formats in the MWF distribution, directly inside our CSS:

  • MWFMDL2.woff
  • MWFMDL2.ttf
  • MWFMDL2.svg

Using glyphs

Components that support glyphs will render the glyphs based on predefined option names rather than hexidecimal value. Glyph names always begin with "c-glyph" for consistent placement followed by "glyph-" and a friendly name. To implement, simply copy and paste the "Code and preview" example for your desired markup and replace the glyph name with your preferred option.

For an example implementation visit Action trigger.

For a complete list of glyphs, visit Glyph designs.

SVG glyphs

Many of the cases where page authors want to apply glyphs directly should be solved by using an SVG image to allow for different glyphs and sizes than was designed.