Metropolis Font Family

Use "Metropolis" font as a Webfont

You can create beautiful websites with great typography using the @font-face kit of Metropolis font. Webfont and @font-face supported all up-to-date browsers can use comfortably.

@font-face is very easy to use, click here to download Metropolis webfont kit. The following example will guide you to the css and html codes.

Ensuring the maximum cross browser typography support, WOFF (Web OpenFont Format) works with all up-to-date browsers. You can check the versions by clicking here.

Using this font on your website is your own legal responsibility. You can check the license information of the font.

@font-face kit

@font-face {
    font-family: 'Metropolis Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Regular'), url('Metropolis-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Regular Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Regular Italic'), url('Metropolis-RegularItalic.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Extra Light';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Extra Light'), url('Metropolis-ExtraLight.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Light';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Light'), url('Metropolis-Light.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Thin'), url('Metropolis-Thin.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Extra Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Extra Light Italic'), url('Metropolis-ExtraLightItalic.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Light Italic'), url('Metropolis-LightItalic.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Thin Italic'), url('Metropolis-ThinItalic.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Medium'), url('Metropolis-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Semi Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Semi Bold'), url('Metropolis-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Bold'), url('Metropolis-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Bold Italic'), url('Metropolis-BoldItalic.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Medium Italic'), url('Metropolis-MediumItalic.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Semi Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Semi Bold Italic'), url('Metropolis-SemiBoldItalic.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Extra Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Extra Bold'), url('Metropolis-ExtraBold.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Extra Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Extra Bold Italic'), url('Metropolis-ExtraBoldItalic.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Black';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Black'), url('Metropolis-Black.woff') format('woff');
}
@font-face {
    font-family: 'Metropolis Black Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Black Italic'), url('Metropolis-BlackItalic.woff') format('woff');
}

sample html

<h3 style="font-family: 'Metropolis Regular'">Deleniti sed nemo omnis accusamus numquam minus.</h3>
<h3 style="font-family: 'Metropolis Regular Italic'">Blanditiis voluptates ex quod doloremque.</h3>
<h3 style="font-family: 'Metropolis Extra Light'">Inventore impedit quia mollitia commodi nemo.</h3>
<h3 style="font-family: 'Metropolis Light'">Quam eum dolorum quos.</h3>
<h3 style="font-family: 'Metropolis Thin'">Quia quo debitis qui.</h3>
<h3 style="font-family: 'Metropolis Extra Light Italic'">Vel deleniti aut fuga at et est est.</h3>
<h3 style="font-family: 'Metropolis Light Italic'">Beatae consequatur nemo nostrum nemo.</h3>
<h3 style="font-family: 'Metropolis Thin Italic'">Totam eos occaecati in delectus.</h3>
<h3 style="font-family: 'Metropolis Medium'">Rerum nulla aliquid et ut.</h3>
<h3 style="font-family: 'Metropolis Semi Bold'">Atque omnis sit sed a.</h3>
<h3 style="font-family: 'Metropolis Bold'">Magni ut quo ea sit ad et nostrum.</h3>
<h3 style="font-family: 'Metropolis Bold Italic'">Amet suscipit voluptate dicta est et.</h3>
<h3 style="font-family: 'Metropolis Medium Italic'">Cumque sapiente et ab ut.</h3>
<h3 style="font-family: 'Metropolis Semi Bold Italic'">Quia consectetur quam nostrum est vel est.</h3>
<h3 style="font-family: 'Metropolis Extra Bold'">Rerum aut ea provident. Perspiciatis non iste a.</h3>
<h3 style="font-family: 'Metropolis Extra Bold Italic'">Qui ad voluptatem non excepturi.</h3>
<h3 style="font-family: 'Metropolis Black'">Rerum dolor in distinctio qui.</h3>
<h3 style="font-family: 'Metropolis Black Italic'">Sunt molestiae rerum eaque molestiae.</h3>

Preview

License

Copyright © 2016 by Chris Simpson.