/* Poppins-Black.ttf Poppins-BlackItalic.ttf Poppins-Bold.ttf Poppins-BoldItalic.ttf Poppins-ExtraBold.ttf Poppins-ExtraBoldItalic.ttf Poppins-ExtraLight.ttf Poppins-ExtraLightItalic.ttf Poppins-Italic.ttf Poppins-Light.ttf Poppins-LightItalic.ttf Poppins-Medium.ttf Poppins-MediumItalic.ttf Poppins-Regular.ttf Poppins-SemiBold.ttf Poppins-SemiBoldItalic.ttf Poppins-Thin.ttf Poppins-ThinItalic.ttf */ /* Poppins font-face declarations. We map weights as follows: Thin -> 100 ExtraLight -> 200 Light -> 300 Regular -> 400 Medium -> 500 SemiBold -> 600 Bold -> 700 ExtraBold -> 800 Black -> 900 Each weight has a normal and italic declaration where an italic file exists. font-display: swap is used for better rendering behavior. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url('Poppins-Thin.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; font-display: swap; src: url('Poppins-ThinItalic.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url('Poppins-ExtraLight.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200; font-display: swap; src: url('Poppins-ExtraLightItalic.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('Poppins-Light.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('Poppins-LightItalic.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('Poppins-Regular.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('Poppins-Italic.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('Poppins-Medium.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url('Poppins-MediumItalic.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('Poppins-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('Poppins-SemiBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('Poppins-Bold.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('Poppins-BoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('Poppins-ExtraBold.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url('Poppins-ExtraBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('Poppins-Black.ttf') format('truetype'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url('Poppins-BlackItalic.ttf') format('truetype'); } /* Usage example: body { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; } */