/* self-hosting font for site speed LIVE version Mapping names to standard CSS font-weights: - light: 300 - regular: 400 - medium: 500 - semibold: 600 - bold: 700 */ /* 1. @font-face Definitions Set font-display to 'block' to prevent a flash of unstyled text */ /* atma-300 - latin */ @font-face { font-display: block; font-family: 'Atma'; font-style: normal; font-weight: 300; src: url('/fonts/atma-v18-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* atma-regular - latin */ @font-face { font-display: block; font-family: 'Atma'; font-style: normal; font-weight: 400; src: url('/fonts/atma-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* atma-500 - latin */ @font-face { font-display: block; font-family: 'Atma'; font-style: normal; font-weight: 500; src: url('/fonts/atma-v18-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* atma-600 - latin */ @font-face { font-display: block; font-family: 'Atma'; font-style: normal; font-weight: 600; src: url('/fonts/atma-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* atma-700 - latin */ @font-face { font-display: block; font-family: 'Atma'; font-style: normal; font-weight: 700; src: url('/fonts/atma-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* Poppins font loading */ /* Poppins Light 300 */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: block; src: url('/fonts/poppins-v23-latin-300.woff2') format('woff2'); } /* Poppins Light 300 Italic */ @font-face { font-family: 'Poppins'; font-style: italic; /* Specify italic style */ font-weight: 300; font-display: block; src: url('/fonts/poppins-v23-latin-300italic.woff2') format('woff2'); } /* Poppins Regular 400 */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: block; src: url('/fonts/poppins-v23-latin-regular.woff2') format('woff2'); } /* Poppins Medium 500 */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: block; src: url('/fonts/poppins-v23-latin-500.woff2') format('woff2'); } /* Poppins Semi-bold 600 */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: block; src: url('/fonts/poppins-v23-latin-600.woff2') format('woff2'); } /* Poppins Bold 700 */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: block; src: url('/fonts/poppins-v23-latin-700.woff2') format('woff2'); } /* Poppins Extra-bold 800 */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: block; src: url('/fonts/poppins-v23-latin-800.woff2') format('woff2'); } /* 2. Base Styles (Fallback Fonts) apply immediately on page load before fonts are ready. */ /* A general body fallback */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Define classes for elements that will use the custom fonts */ .font-atma { /* Atma's fallback stack: rounded and informal */ font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', cursive, sans-serif; } .font-poppins { /* Poppins' fallback stack: the robust system UI stack */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* 3. Final Styles (Web Fonts) */ /* These rules ONLY apply after the '.fonts-loaded' class is added to the tag by JavaScript. */ .fonts-loaded .font-atma { font-family: 'Atma', 'Comic Sans MS', 'Arial Rounded MT Bold', cursive, sans-serif; } .fonts-loaded .font-poppins { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }