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'">Distinctio quia commodi et.</h3>
<h3 style="font-family: 'Metropolis Regular Italic'">Quidem cupiditate dolor id deserunt ipsam.</h3>
<h3 style="font-family: 'Metropolis Extra Light'">Maiores hic eaque illo quo qui id ullam.</h3>
<h3 style="font-family: 'Metropolis Light'">Veritatis deserunt dolore aliquam et.</h3>
<h3 style="font-family: 'Metropolis Thin'">Nihil earum voluptates qui sint.</h3>
<h3 style="font-family: 'Metropolis Extra Light Italic'">Autem quia rerum non commodi eum laborum.</h3>
<h3 style="font-family: 'Metropolis Light Italic'">Aperiam illo et debitis optio mollitia alias.</h3>
<h3 style="font-family: 'Metropolis Thin Italic'">Vel iusto est placeat nobis quis aut nobis eius.</h3>
<h3 style="font-family: 'Metropolis Medium'">Consequatur incidunt nam optio doloribus.</h3>
<h3 style="font-family: 'Metropolis Semi Bold'">Voluptatem illum sequi maiores.</h3>
<h3 style="font-family: 'Metropolis Bold'">Et blanditiis aut inventore repellat quo sed est.</h3>
<h3 style="font-family: 'Metropolis Bold Italic'">Voluptas ducimus dicta dolore ut expedita.</h3>
<h3 style="font-family: 'Metropolis Medium Italic'">Quia minus et repudiandae blanditiis recusandae.</h3>
<h3 style="font-family: 'Metropolis Semi Bold Italic'">Recusandae quibusdam saepe nostrum et.</h3>
<h3 style="font-family: 'Metropolis Extra Bold'">Aut autem omnis ea tempore.</h3>
<h3 style="font-family: 'Metropolis Extra Bold Italic'">Velit aut veniam ut expedita fugit.</h3>
<h3 style="font-family: 'Metropolis Black'">Minus voluptas expedita aut ut voluptatem error.</h3>
<h3 style="font-family: 'Metropolis Black Italic'">Sequi et enim debitis.</h3>

Preview

License

Copyright © 2016 by Chris Simpson.