Metropolis
Download free Metropolis font for website or Photoshop
Black
ExtraBold
Bold
SemiBold
Medium
Regular
Light
ExtraLight
Thin
BlackItalic
ExtraBoldItalic
BoldItalic
SemiBoldItalic
MediumItalic
Italic
LightItalic
ExtraLightItalic
ThinItalic
Typography
Aa
91
Characters
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Numbers
1234567890`?'"!(%)[#]{@}/&\<-+^*>|$~
Typescale
H1 - Display 01
H2 - Display 02
H3 - Headline
H4 - Subhead
H5 - Body
H6 - Body small
@font-face {
font-family: "MetropolisBlack";
src: url("../fonts/Metropolis/MetropolisBlack/MetropolisBlack.eot");
src: url("../fonts/Metropolis/MetropolisBlack/MetropolisBlack.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisBlack/MetropolisBlack.woff") format("woff"),
url("../fonts/Metropolis/MetropolisBlack/MetropolisBlack.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisExtraBold";
src: url("../fonts/Metropolis/MetropolisExtraBold/MetropolisExtraBold.eot");
src: url("../fonts/Metropolis/MetropolisExtraBold/MetropolisExtraBold.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisExtraBold/MetropolisExtraBold.woff") format("woff"),
url("../fonts/Metropolis/MetropolisExtraBold/MetropolisExtraBold.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisBold";
src: url("../fonts/Metropolis/MetropolisBold/MetropolisBold.eot");
src: url("../fonts/Metropolis/MetropolisBold/MetropolisBold.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisBold/MetropolisBold.woff") format("woff"),
url("../fonts/Metropolis/MetropolisBold/MetropolisBold.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisSemiBold";
src: url("../fonts/Metropolis/MetropolisSemiBold/MetropolisSemiBold.eot");
src: url("../fonts/Metropolis/MetropolisSemiBold/MetropolisSemiBold.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisSemiBold/MetropolisSemiBold.woff") format("woff"),
url("../fonts/Metropolis/MetropolisSemiBold/MetropolisSemiBold.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisMedium";
src: url("../fonts/Metropolis/MetropolisMedium/MetropolisMedium.eot");
src: url("../fonts/Metropolis/MetropolisMedium/MetropolisMedium.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisMedium/MetropolisMedium.woff") format("woff"),
url("../fonts/Metropolis/MetropolisMedium/MetropolisMedium.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisRegular";
src: url("../fonts/Metropolis/MetropolisRegular/MetropolisRegular.eot");
src: url("../fonts/Metropolis/MetropolisRegular/MetropolisRegular.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisRegular/MetropolisRegular.woff") format("woff"),
url("../fonts/Metropolis/MetropolisRegular/MetropolisRegular.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisLight";
src: url("../fonts/Metropolis/MetropolisLight/MetropolisLight.eot");
src: url("../fonts/Metropolis/MetropolisLight/MetropolisLight.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisLight/MetropolisLight.woff") format("woff"),
url("../fonts/Metropolis/MetropolisLight/MetropolisLight.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisExtraLight";
src: url("../fonts/Metropolis/MetropolisExtraLight/MetropolisExtraLight.eot");
src: url("../fonts/Metropolis/MetropolisExtraLight/MetropolisExtraLight.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisExtraLight/MetropolisExtraLight.woff") format("woff"),
url("../fonts/Metropolis/MetropolisExtraLight/MetropolisExtraLight.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisThin";
src: url("../fonts/Metropolis/MetropolisThin/MetropolisThin.eot");
src: url("../fonts/Metropolis/MetropolisThin/MetropolisThin.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisThin/MetropolisThin.woff") format("woff"),
url("../fonts/Metropolis/MetropolisThin/MetropolisThin.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisBlackItalic";
src: url("../fonts/Metropolis/MetropolisBlackItalic/MetropolisBlackItalic.eot");
src: url("../fonts/Metropolis/MetropolisBlackItalic/MetropolisBlackItalic.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisBlackItalic/MetropolisBlackItalic.woff") format("woff"),
url("../fonts/Metropolis/MetropolisBlackItalic/MetropolisBlackItalic.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisExtraBoldItalic";
src: url("../fonts/Metropolis/MetropolisExtraBoldItalic/MetropolisExtraBoldItalic.eot");
src: url("../fonts/Metropolis/MetropolisExtraBoldItalic/MetropolisExtraBoldItalic.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisExtraBoldItalic/MetropolisExtraBoldItalic.woff") format("woff"),
url("../fonts/Metropolis/MetropolisExtraBoldItalic/MetropolisExtraBoldItalic.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisBoldItalic";
src: url("../fonts/Metropolis/MetropolisBoldItalic/MetropolisBoldItalic.eot");
src: url("../fonts/Metropolis/MetropolisBoldItalic/MetropolisBoldItalic.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisBoldItalic/MetropolisBoldItalic.woff") format("woff"),
url("../fonts/Metropolis/MetropolisBoldItalic/MetropolisBoldItalic.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisSemiBoldItalic";
src: url("../fonts/Metropolis/MetropolisSemiBoldItalic/MetropolisSemiBoldItalic.eot");
src: url("../fonts/Metropolis/MetropolisSemiBoldItalic/MetropolisSemiBoldItalic.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisSemiBoldItalic/MetropolisSemiBoldItalic.woff") format("woff"),
url("../fonts/Metropolis/MetropolisSemiBoldItalic/MetropolisSemiBoldItalic.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisMediumItalic";
src: url("../fonts/Metropolis/MetropolisMediumItalic/MetropolisMediumItalic.eot");
src: url("../fonts/Metropolis/MetropolisMediumItalic/MetropolisMediumItalic.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisMediumItalic/MetropolisMediumItalic.woff") format("woff"),
url("../fonts/Metropolis/MetropolisMediumItalic/MetropolisMediumItalic.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisItalic";
src: url("../fonts/Metropolis/MetropolisItalic/MetropolisItalic.eot");
src: url("../fonts/Metropolis/MetropolisItalic/MetropolisItalic.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisItalic/MetropolisItalic.woff") format("woff"),
url("../fonts/Metropolis/MetropolisItalic/MetropolisItalic.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisLightItalic";
src: url("../fonts/Metropolis/MetropolisLightItalic/MetropolisLightItalic.eot");
src: url("../fonts/Metropolis/MetropolisLightItalic/MetropolisLightItalic.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisLightItalic/MetropolisLightItalic.woff") format("woff"),
url("../fonts/Metropolis/MetropolisLightItalic/MetropolisLightItalic.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisExtraLightItalic";
src: url("../fonts/Metropolis/MetropolisExtraLightItalic/MetropolisExtraLightItalic.eot");
src: url("../fonts/Metropolis/MetropolisExtraLightItalic/MetropolisExtraLightItalic.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisExtraLightItalic/MetropolisExtraLightItalic.woff") format("woff"),
url("../fonts/Metropolis/MetropolisExtraLightItalic/MetropolisExtraLightItalic.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "MetropolisThinItalic";
src: url("../fonts/Metropolis/MetropolisThinItalic/MetropolisThinItalic.eot");
src: url("../fonts/Metropolis/MetropolisThinItalic/MetropolisThinItalic.eot?#iefix")format("embedded-opentype"),
url("../fonts/Metropolis/MetropolisThinItalic/MetropolisThinItalic.woff") format("woff"),
url("../fonts/Metropolis/MetropolisThinItalic/MetropolisThinItalic.ttf") format("truetype");
font-style: normal;
font-weight: normal;
font-display: swap;
}