PronounsPage/assets/fonts.scss

@use "sass:list";
@use "./variables";

@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

// We're using google-webfonts-helper https://gwfh.mranftl.com/fonts to self-host fonts

/* quicksand-regular - latin-ext_latin */
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/quicksand-v21-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Quicksand'),
    url('/fonts/quicksand-v21-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/quicksand-v21-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/quicksand-v21-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/fonts/quicksand-v21-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/quicksand-v21-latin-ext_latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */
}
/* quicksand-700 - latin-ext_latin */
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/quicksand-v21-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
    src: local('Quicksand'),
    url('/fonts/quicksand-v21-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/quicksand-v21-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/quicksand-v21-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
    url('/fonts/quicksand-v21-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/quicksand-v21-latin-ext_latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */
}

/* nunito-regular - latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
    url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-regular.svg#Nunito') format('svg'); /* Legacy iOS */
}
/* nunito-700 - latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.woff') format('woff'), /* Modern Browsers */
    url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/nunito-v16-latin-ext_latin_cyrillic-ext_cyrillic-700.svg#Nunito') format('svg'); /* Legacy iOS */
}

/* zen-maru-gothic-regular - latin_japanese */
@font-face {
    font-family: 'Zen Maru Gothic';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.woff') format('woff'), /* Modern Browsers */
    url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/zen-maru-gothic-v4-latin_japanese-regular.svg#ZenMaruGothic') format('svg'); /* Legacy iOS */
}
/* zen-maru-gothic-700 - latin_japanese */
@font-face {
    font-family: 'Zen Maru Gothic';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/zen-maru-gothic-v4-latin_japanese-700.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('/fonts/zen-maru-gothic-v4-latin_japanese-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/zen-maru-gothic-v4-latin_japanese-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/zen-maru-gothic-v4-latin_japanese-700.woff') format('woff'), /* Modern Browsers */
    url('/fonts/zen-maru-gothic-v4-latin_japanese-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/zen-maru-gothic-v4-latin_japanese-700.svg#ZenMaruGothic') format('svg'); /* Legacy iOS */
}

/* nanum-gothic-regular - latin_korean */
@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/nanum-gothic-v17-latin_korean-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('/fonts/nanum-gothic-v17-latin_korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/nanum-gothic-v17-latin_korean-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/nanum-gothic-v17-latin_korean-regular.woff') format('woff'), /* Modern Browsers */
    url('/fonts/nanum-gothic-v17-latin_korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/nanum-gothic-v17-latin_korean-regular.svg#NanumGothic') format('svg'); /* Legacy iOS */
}
/* nanum-gothic-700 - latin_korean */
@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/nanum-gothic-v17-latin_korean-700.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('/fonts/nanum-gothic-v17-latin_korean-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/nanum-gothic-v17-latin_korean-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/nanum-gothic-v17-latin_korean-700.woff') format('woff'), /* Modern Browsers */
    url('/fonts/nanum-gothic-v17-latin_korean-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/nanum-gothic-v17-latin_korean-700.svg#NanumGothic') format('svg'); /* Legacy iOS */
}

/* noto-sans-tc-regular - chinese-traditional_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/noto-sans-tc-v36-chinese-traditional_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('/fonts/noto-sans-tc-v36-chinese-traditional_latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* noto-sans-tc-700 - chinese-traditional_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/noto-sans-tc-v36-chinese-traditional_latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('/fonts/noto-sans-tc-v36-chinese-traditional_latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* noto-sans-sc-regular - chinese-simplified_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/noto-sans-sc-v37-chinese-simplified_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('/fonts/noto-sans-sc-v37-chinese-simplified_latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* noto-sans-sc-700 - chinese-simplified_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/noto-sans-sc-v37-chinese-simplified_latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('/fonts/noto-sans-sc-v37-chinese-simplified_latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

@font-face {
    font-family: 'sitelen-pona-pona';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/sitelen-pona-pona.otf') format("opentype")
}

@font-face {
    font-family: 'linjapimejapona';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/linjapimejapona.ttf') format("truetype")
}

/* rubik-300 - arabic_latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/rubik-v28-arabic_latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-700 - arabic_latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/rubik-v28-arabic_latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* baloo-bhaijaan-2-regular - arabic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Baloo Bhaijaan 2';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/baloo-bhaijaan-2-v19-arabic_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('/fonts/baloo-bhaijaan-2-v19-arabic_latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* baloo-bhaijaan-2-700 - arabic_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Baloo Bhaijaan 2';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/baloo-bhaijaan-2-v19-arabic_latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('/fonts/baloo-bhaijaan-2-v19-arabic_latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

.shavian {
    --font-text: 'Noto Sans Shavian';
    font-family: list.join(var(--font-text), $font-fallback);
}

.sitelen {
    --font-text: 'linjapimejapona';
    font-family: list.join(var(--font-text), $font-fallback);
    .cartouche {
        padding: .1em;
        margin-inline-start: .15em;
        margin-inline-end: .15em;
        border: .075em solid #000;
        border-radius: .2em;
        font-size: 0.9em;
    }
}