menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

Roboto font

Roboto is the standard font used by Material Design, and the font file is built into the MDUI framework.

Roboto includes 6 different font weights: 100, 300, 400, 500, 700, 900, and two font styles: normal and italic.

Related Reading

Material Design Guidelines: Style-Font

Roboto demo

Thin

code
Example
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ÄäÖöÜüß 
font-weight:100;

Thin Italic

code
Example
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ÄäÖöÜüß 
font-weight: 100;
font-style: italic;

Light

code
Example
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ÄäÖöÜüß 
font-weight: 300;

Light Italic

code
Example
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ÄäÖöÜüß 
font-weight: 300;
font-style: italic;

Regular

code
Example
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ÄäÖöÜüß 
font-weight: 400;

Regular Italic

code
Example
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ÄäÖöÜüß 
font-weight: 400;
font-style: italic;

Medium

code
Example
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ÄäÖöÜüß 
font-weight:500;

Medium Italic

code
Example
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ÄäÖöÜüß 
font-weight: 500;
font-style: italic;

Bold

code
Example
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ÄäÖöÜüß 
font-weight:700;

Bold Italic

code
Example
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ÄäÖöÜüß 
font-weight: 700;
font-style: italic;

Black

code
Example
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ÄäÖöÜüß 
font-weight:900;

Black Italic

code
Example
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ÄäÖöÜüß 
font-weight: 900;
font-style: italic;

Remove Roboto

If you don't want to use Roboto, just use a custom font to overwrite the default font.

body {
  font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, sans-serif;
}
arrow_back Previous
colour
arrow_forward Next
Grid layout
Set document theme

Theme color

Main color

Accent color