/**
* orf universal fonts - variable fonts
*/
:root {
/* otherwise, opsz is set to font size in pixel, which triggers headline style in larger sizes */
font-optical-sizing: none;
/* hardcode opsz to fix safari bug: https://bugs.webkit.org/show_bug.cgi?id=247987 */
font-variation-settings: 'opsz' 16;
/* make sure real font is used everytime */
font-synthesis: none;
/* custom prop to use fallback stack */
--font-orf-universal: "ORF Universal", -apple-system, BlinkMacSystemFont, Arial, Roboto, sans-serif;
--font-orf-universal-condensed: "ORF Universal Condensed", "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, "ORF Fallback Roboto Condensed";
--font-orf-universal-sc: "ORF Universal SC", "ORF Fallback SC", sans-serif;
--font-orf-universal-logo: ORF Universal Logo, var(--font-orf-universal);
}
/* in ff, needs to be explicitly deactivated */
input, textarea, button, select {
font-optical-sizing: inherit;
}
/* fallback font that also works with font-stretch: condensed */
@font-face {
font-family: ORF Fallback;
font-stretch: normal;
src: local(Avenir Next), local(Arial), local(Roboto);
}
@font-face {
font-family: ORF Fallback;
font-stretch: condensed;
src: local(Avenir Next Condensed), local(Arial Narrow), local(Roboto Condensed);
/* arial narrow not working on ios; avenir next condensed is only similar regular-weight condensed available; helvetica only medium/bold;
roboto is for android (but not working); also, in Chrome and Firefox, auto bold/italic is not working (unless when falling back to generic classes)
*/
}
@font-face {
font-family: ORF Fallback Condensed;
font-stretch: condensed;
src: local(ArialNarrow); /* ie11 only wants one local() */
src: local(Avenir Next Condensed), local(ArialNarrow), local(Roboto Condensed);
}
/* for Firefox/Android (which doesn't understand sans-serif-condensed) to auto-select condensed; put after sans-serif-condensed (Chrome needs that) */
@font-face {
font-family: ORF Fallback Roboto Condensed;
font-stretch: condensed;
src: local(Roboto);
}
/* fallback for SC that displays similar size */
@font-face {
font-family: ORF Fallback SC;
src: local(Avenir Next), local(Arial), local(Roboto);
size-adjust: 85%;
}
/* orf universal variable font */
@font-face {
font-family: 'ORF Universal';
/* 300 = light, 400 = normal, 500 = medium, 700 = bold; see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
font-weight: 300 700;
/* 75% = condensed, 87,5% = semi-condensed, 100% = regular; see: https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch */
font-stretch: 75% 140%; /* specific for ORF Universal: 125% == semi-extended; 140% == extended */
src: local('\263A'),
url("//orf.at/fonts/ORFUniversal/Variable/Web/WOFF2/ORFUniversalVF_W_WghtWdthOpsz.woff2") format("woff2-variations");
}
@font-face {
font-family: 'ORF Universal Condensed';
/* 300 = light, 400 = normal, 500 = medium, 700 = bold; see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
font-weight: 300 700;
/* 75% = condensed, 87,5% = semi-condensed, 100% = regular; see: https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch */
font-stretch: 75%;
src: local('\263A'),
url("//orf.at/fonts/ORFUniversal/Variable/Web/WOFF2/ORFUniversalVF_W_WghtWdthOpsz.woff2") format("woff2-variations");
}
/* italic is separate file */
@font-face {
font-family: 'ORF Universal';
/* 300 = light, 400 = normal, 500 = medium, 700 = bold; see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
font-weight: 300 700;
/* 75% = condensed, 87,5% = semi-condensed, 100% = regular; see: https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch */
font-stretch: 75% 140%; /* specific for ORF Universal: 125% == semi-extended; 140% == extended */
font-style: italic;
src: local('\263A'),
url("//orf.at/fonts/ORFUniversal/Variable/Web/WOFF2/ORFUniversalVF_Italic_W_WghtWdthOpsz.woff2") format("woff2-variations");
}
@font-face {
font-family: 'ORF Universal SC';
/* 300 = light, 400 = normal, 500 = medium, 700 = bold; see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
font-weight: 300 700;
src: local('\263A'),
url("//orf.at/fonts/ORFUniversalSC/Variable/Web/WOFF2/ORFUniversalSCVF_W_WghtOpsz.woff2") format("woff2-variations");
}
@font-face {
font-family: 'ORF Universal Logo';
/* 300 = light, 400 = normal, 500 = medium, 700 = bold; see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
font-weight: 500;
src: local('\263A'),
url("//orf.at/fonts/ORFUniversalLogo/Web/WOFF2/ORFUniversalLogo_W_Md.woff2") format("woff2");
}