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'">Non omnis omnis est architecto.</h3>
<h3 style="font-family: 'Metropolis Regular Italic'">Dolorem possimus earum id.</h3>
<h3 style="font-family: 'Metropolis Extra Light'">Architecto quia quia animi sit sequi voluptas.</h3>
<h3 style="font-family: 'Metropolis Light'">Quia ad repudiandae rerum laudantium sint sit.</h3>
<h3 style="font-family: 'Metropolis Thin'">Provident sequi corrupti voluptatem alias.</h3>
<h3 style="font-family: 'Metropolis Extra Light Italic'">Repudiandae porro et illum consectetur ipsum.</h3>
<h3 style="font-family: 'Metropolis Light Italic'">Sint est nemo id rerum.</h3>
<h3 style="font-family: 'Metropolis Thin Italic'">Repudiandae et in ipsam hic.</h3>
<h3 style="font-family: 'Metropolis Medium'">Recusandae adipisci a assumenda ex enim et dolor.</h3>
<h3 style="font-family: 'Metropolis Semi Bold'">Vel incidunt earum nostrum ut est sint autem et.</h3>
<h3 style="font-family: 'Metropolis Bold'">Reiciendis aut est cum non.</h3>
<h3 style="font-family: 'Metropolis Bold Italic'">Voluptas eaque quaerat vel.</h3>
<h3 style="font-family: 'Metropolis Medium Italic'">Sint omnis nostrum sint enim odit aut.</h3>
<h3 style="font-family: 'Metropolis Semi Bold Italic'">Fugit aspernatur ut quis eius laboriosam.</h3>
<h3 style="font-family: 'Metropolis Extra Bold'">Quos nostrum ea porro nostrum aut eius.</h3>
<h3 style="font-family: 'Metropolis Extra Bold Italic'">Maiores quia eos sed esse.</h3>
<h3 style="font-family: 'Metropolis Black'">Deleniti odit itaque veritatis tempora.</h3>
<h3 style="font-family: 'Metropolis Black Italic'">Voluptas iste fugit quisquam nisi necessitatibus.</h3>

Preview

License

Copyright © 2016 by Chris Simpson.