/*
-----------------------
    fonts.css
    Custom font loadings
    Some of these can maybe be refactored into tailwind classes but for now this file is manageable.
-----------------------
*/

@font-face {
    font-family: 'sofia_proregular';
    src: url('/assets/fonts/sofiapro-regular-webfont.woff2') format('woff2'),
         url('/assets/fonts/sofiapro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'golden_hopesregular';
    src: url('/assets/fonts/goldenhopes-regular-webfont.woff2') format('woff2'),
         url('/assets/fonts/goldenhopes-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'teodorlight';
    src: url('/assets/fonts/teodor-light-webfont.woff2') format('woff2'),
         url('/assets/fonts/teodor-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'teodorlight_italic';
    src: url('/assets/fonts/teodor-lightitalic-webfont.woff2') format('woff2'),
         url('/assets/fonts/teodor-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.font-newsreader {
    font-family: "Newsreader", serif;
    font-optical-sizing: auto;
    font-style: normal;
 }

.font-sofia {
    font-family: 'sofia_proregular';
}

.font-hopes {
    font-family: 'golden_hopesregular';
    margin:0 0 0 5px;
}

span.font-hopes {
    /* when used as an accent in another H tag, the font needs bumping up a bit to look the same size */
    font-size:120%;
    display:inline-block;
    transform:translateY(8px);
}

.font-tedorlight {
    font-family: 'teodorlight';
}

.font-tedorlight-italic {
    font-family: 'teodorlight_italic';
}