Skip to main content

Adding a custom font

@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');
    }
    
  1. Add a folder under the child theme (yootheme-child) named “fonts”.
  2. Upload font files to the “fonts” folder.

Leave a Reply

Your email address will not be published. Required fields are marked *