/* ========================================================================== Fonts ========================================================================== Self-hosted (assets/fonts/ folder) instead of linked from a third-party CDN. Loading a font stylesheet from a third-party origin in blocks first paint on the DNS lookup + TLS handshake to that origin - on a slow connection that alone is enough to cause a "blank white page for a second" symptom, on top of adding a dependency on that origin being reachable at all. Serving the same files from our own origin removes both problems. Two text typefaces, used site-wide for two different purposes (see --font-heading/--font-body in site.css and their usage throughout): - Roboto (variable, weights 300-900): body copy - actual paragraphs of readable prose (article/post content, the home bio, card subtitles, descriptive notes). - League Gothic (variable on the width axis): everything else - headings, menu items, buttons, the titlebar, dates/meta lines, the sidebar name. A tall, condensed display face that reads well at a glance for short UI text, not meant for long-form reading. ========================================================================== */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/roboto-variable.woff2") format("woff2"); } @font-face { font-family: "Roboto"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("../fonts/roboto-variable-italic.woff2") format("woff2"); } @font-face { font-family: "League Gothic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/league-gothic-variable.ttf") format("truetype-variations"); } /* Icon font used by (Material Symbols, ligature-based - the element name="menu" is rendered by writing the literal text "menu" in this font, which maps it to the menu glyph). Only the default outlined style/weight/fill/grade axis is needed since every m3e-icon in this project uses the defaults. */ @font-face { font-family: "Material Symbols Outlined"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/material-symbols-outlined.woff2") format("woff2"); }