:root {
    --ff-primary: ibm_plex_seriftext, helvetica, sans-serif;
    --ff-bold-primary: ibm_plex_serifsemibold, sans-serif;
    --ff-secondary: ibm_plex_sanslight, times, serif;
    --ff-bold-secondary: ibm_plex_sanssemibold, times, serif;
    --ff-monospace: courier, monospace 
}

@font-face {
    font-family: 'ibm_plex_sansthin';
    src: url('plex/ibmplexsans-thin-webfont.woff2') format('woff2'),
         url('plex/ibmplexsans-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ibm_plex_sanslight';
    src: url('plex/ibmplexsans-light-webfont.woff2') format('woff2'),
         url('plex/ibmplexsans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ibm_plex_sansregular';
    src: url('plex/ibmplexsans-regular-webfont.woff2') format('woff2'),
         url('plex/ibmplexsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ibm_plex_sansmedium';
    src: url('plex/ibmplexsans-medium-webfont.woff2') format('woff2'),
         url('plex/ibmplexsans-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ibm_plex_sanssemibold';
    src: url('plex/ibmplexsans-semibold-webfont.woff2') format('woff2'),
         url('plex/ibmplexsans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ibm_plex_sansbold';
    src: url('plex/ibmplexsans-bold-webfont.woff2') format('woff2'),
         url('plex/ibmplexsans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* serif text */
@font-face {
    font-family: 'ibm_plex_seriftext';
    src: url('plex/ibmplexserif-text-webfont.woff2') format('woff2'),
         url('plex/ibmplexserif-text-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ibm_plex_serifregular';
    src: url('plex/ibmplexserif-regular-webfont.woff2') format('woff2'),
         url('plex/ibmplexserif-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ibm_plex_seriflight';
    src: url('plex/ibmplexserif-light-webfont.woff2') format('woff2'),
         url('plex/ibmplexserif-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ibm_plex_serifsemibold';
    src: url('plex/ibmplexserif-semibold-webfont.woff2') format('woff2'),
         url('plex/ibmplexserif-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}