/* Self-hosted webfonts — no Google Fonts, no CDN, nothing external to go down. All woff2, latin subset, font-display:swap so text is never invisible while a font is fetching. The display face is Canela. It is already first in the --display stack in styles.css, so headings pick it up automatically the moment the licensed files land in this folder — see the CANELA drop-in slot below. Until then the stack falls through to Inter, which is what is bundled here. Body copy stays on Inter either way. */ /* --------------------------------------------------------------------------- CANELA — LIVE Two families are used, as Commercial Type intends: "Canela" (display cut) — headings, statements, statistics, marquee, brand lockup, big footer type. "Canela Text" (text cut) — body copy, nav links, form fields, lists. Trial OTFs, loaded with format("opentype"). Swap the src urls to the licensed .woff2 files when the web licence lands — nothing else changes. IBM Plex Mono is deliberately kept for the uppercase micro-labels, numerals and buttons: it is the contrast that keeps an all-serif page from flattening. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- INSTRUMENT SANS — the body face Variable, wght 400–700 in one file (plus a matching italic), so every body weight the site uses comes from two requests. Paired with Canela on the headings: serif display, neutral sans text. --------------------------------------------------------------------------- */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; src: url("InstrumentSans-Variable.ttf") format("truetype-variations"); font-display: swap; } @font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; src: url("InstrumentSans-Italic-Variable.ttf") format("truetype-variations"); font-display: swap; } @font-face { font-family: "Canela"; font-style: normal; font-weight: 300; src: url("Canela-Light-Trial.otf") format("opentype"); font-display: swap; } @font-face { font-family: "Canela"; font-style: normal; font-weight: 400; src: url("Canela-Regular-Trial.otf") format("opentype"); font-display: swap; } @font-face { font-family: "Canela"; font-style: normal; font-weight: 500; src: url("Canela-Medium-Trial.otf") format("opentype"); font-display: swap; } @font-face { font-family: "Canela"; font-style: italic; font-weight: 300; src: url("Canela-LightItalic-Trial.otf") format("opentype"); font-display: swap; } @font-face { font-family: "Canela"; font-style: italic; font-weight: 400; src: url("Canela-RegularItalic-Trial.otf") format("opentype"); font-display: swap; } @font-face { font-family: "Canela Text"; font-style: normal; font-weight: 300; src: url("CanelaText-Light-Trial.otf") format("opentype"); font-display: swap; } @font-face { font-family: "Canela Text"; font-style: normal; font-weight: 400; src: url("CanelaText-Regular-Trial.otf") format("opentype"); font-display: swap; } @font-face { font-family: "Canela Text"; font-style: normal; font-weight: 500; src: url("CanelaText-Medium-Trial.otf") format("opentype"); font-display: swap; } @font-face { font-family: "Canela Text"; font-style: normal; font-weight: 600; src: url("CanelaText-Bold-Trial.otf") format("opentype"); font-display: swap; } @font-face { font-family: "Canela Text"; font-style: italic; font-weight: 400; src: url("CanelaText-RegularItalic-Trial.otf") format("opentype"); font-display: swap; } /* Inter stays loaded as the fallback in both stacks. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 300; src: url("inter-latin-300-normal.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; src: url("inter-latin-400-normal.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; src: url("inter-latin-500-normal.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; src: url("inter-latin-600-normal.woff2") format("woff2"); font-display: swap; } /* The cursive accent. Yellowtail, chosen because it matches the brush weight and slant of the "Built In" logo more closely than any other free script. */ @font-face { font-family: "BI Cursive"; font-style: normal; font-weight: 400; src: url("yellowtail-latin-400-normal.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; src: url("ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; src: url("ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-display: swap; } /* --------------------------------------------------------------------------- CANELA — DROP-IN SLOT Canela is a licensed typeface from Commercial Type. It is not free and it cannot legally be redistributed, so the files are NOT in this repository. --display in styles.css already names Canela first, so the site switches over the moment these two things are true: 1. The .woff2 files are sitting in this folder. 2. The @font-face block immediately below is uncommented. 3. The CANELA METRICS block in styles.css :root is uncommented. WHAT TO BUY: a WEB licence from commercialtype.com/catalog/canela, priced by monthly pageview tier. A desktop licence — the one a designer buys to use Canela in Figma or InDesign — does NOT cover web embedding. They are separate purchases and this trips people up constantly. Buying web gets you the .woff2 files directly from Commercial Type. Fontstand also rents Canela, but rental is desktop-only and will not help here. MINIMUM FILE: Canela-Regular.woff2. Light and Italic are nice to have. Point the three live Canela @font-face blocks at the woff2 files as they arrive: Canela-Regular.woff2 (weight 400), Canela-Light.woff2 (300) and Canela-RegularItalic.woff2 (italic 400). Nothing else changes. Do not use a copy from a "free font download" site. Those are unlicensed and put both the agency and the client at risk. --------------------------------------------------------------------------- ALTERNATE DISPLAY FACES — all present in this folder. To change the site's character, point the "BI Display" rule above at one of these and set --display-tracking / --display-lh in styles.css to the matching values. inter-latin-500-normal.woff2 tracking -.035em lh .98 (current — all-sans) dm-serif-display-latin-400-normal.woff2 tracking -.02em lh 1.02 weight 400 instrument-serif-latin-400-normal.woff2 tracking -.02em lh 1.00 weight 400 marcellus-latin-400-normal.woff2 tracking -.01em lh 1.02 cormorant-garamond-latin-500-normal.woff2 tracking -.02em lh 1.00 eb-garamond-latin-500-normal.woff2 tracking -.015em lh 1.02 playfair-display-latin-500-normal.woff2 tracking -.025em lh 1.00 Cursive alternates, also in this folder: kaushan-script-latin-400-normal.woff2 lighter, more angular brush pacifico-latin-400-normal.woff2 rounder, more casual sacramento-latin-400-normal.woff2 fine signature script, much lighter To use one, add a @font-face block for family "BI Display" weight 400 pointing at that file, and set --display: "BI Display", serif; in styles.css. ------------------------------------------------------------------------- */