/** * 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"); }