Adding a custom font
Written by isoadmin on . Posted in CSS.
@font-face {
font-family: 'MetropolisRegular';
font-style: normal;
font-weight: normal;
src: url(../fonts/Metropolis-Regular.woff) format('woff') ,
url(../fonts/Metropolis-Regular.woff2) format('woff2') ,
url(../fonts/Metropolis-Regular.eot) ;
}
@font-face {
font-family: 'MetropolisRegularItalic';
font-style: normal;
font-weight: normal;
src: url(../fonts/Metropolis-RegularItalic.woff) format('woff') ,
url(../fonts/Metropolis-RegularItalic.woff2) format('woff2') ,
url(../fonts/Metropolis-RegularItalic.eot);
}
@font-face {
font-family: 'MetropolisLight';
font-style: normal;
font-weight: normal;
src: url(../fonts/Metropolis-Light.woff) format('woff'),
url(../fonts/Metropolis-Light.woff2) format('woff2'),
url(../fonts/Metropolis-Light.eot) format('eot');
}
@font-face {
font-family: 'MetropolisLightItalic';
font-style: normal;
font-weight: normal;
src: url(../fonts/Metropolis-LightItalic.woff) format('woff'),
url(../fonts/Metropolis-LightItalic.woff2) format('woff2'),
url(../fonts/Metropolis-LightItalic.eot) format('eot');
}
@font-face {
font-family: 'MetropolisBold';
font-style: normal;
font-weight: normal;
src: url(../fonts/Metropolis-Bold.woff) format("woff") ,
url(../fonts/Metropolis-Bold.woff2) format("woff2");
}
@font-face {
font-family: 'MetropolisBoldItalic', sans-serif;
font-style: normal;
font-weight: normal;
src: url(../fonts/Metropolis-BoldItalic.woff) format('woff'),
url(../fonts/Metropolis-BoldItalic.woff2) format('woff2'),
url(../fonts/Metropolis-BoldItalic.eot) format('eot');
}
- Add a folder under the child theme (yootheme-child) named “fonts”.
- Upload font files to the “fonts” folder.