Code Pro Light

\n all fonts\n val.town\n

\n\n

\n {popularCombos.map((combo, index) => (\n setCustomText(combo.text)}\n >\n {combo.name}\n \n ))}\n

\n\n

\n {fontOptions.map((fontOption, index) => (\n setFont(fontOption)}\n >\n {fontOption}\n \n ))}\n

\n\n

\n {colorThemes.map((colorTheme, index) => (\n setTheme(colorTheme)}\n style={{ backgroundColor: colorTheme.bg, color: colorTheme.text }}\n >\n {colorTheme.name}\n \n ))}\n

\n\n

{customText}

\n\n

\n setCustomText(e.target.value)}\n style={{ backgroundColor: theme.bg, color: theme.text }}\n />\n

\n\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Code Pro Light\n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\n@font-face {\n font-family: 'Code Pro Light';\n src: url('https://example.com/fonts/CodeProLight.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'ET Book';\n src: url('https://example.com/fonts/ETBook.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'IBM Plex Mono';\n src: url('https://fonts.gstatic.com/s/ibmplexmono/v7/1.0.0/IBMPlexMono-Regular.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Inter';\n src: url('https://fonts.gstatic.com/s/inter/v3/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Roboto';\n src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxK.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Lora';\n src: url('https://fonts.gstatic.com/s/lora/v17/0QI6MX1D_JOuGQbT0gvTJPa787weuxJBkq0.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Playfair Display';\n src: url('https://fonts.gstatic.com/s/playfairdisplay/v22/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtM.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Montserrat';\n src: url('https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Open Sans';\n src: url('https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2') format('woff2');\n}\n\n@font-face {\n font-family: 'Fira Sans';\n src: url('https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5Vvl4jL.woff2') format('woff2');\n}\n\n*, *:before, *:after {\n box-sizing: inherit;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\nhtml {\n box-sizing: border-box;\n}\n\nbody {\n max-width: 680px;\n margin: 100px auto;\n font-family: \"Code Pro Light\", sans-serif;\n}\n\nheader {\n letter-spacing: 2px;\n font-size: 19px;\n padding: 10px 20px;\n font-weight: 400;\n border-bottom: 2.5px solid #555;\n position: relative;\n}\n\n.header-number {\n position: absolute;\n right: 20px;\n}\n\n.pill-container {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 10px;\n margin: 20px 0;\n}\n\n.pill {\n border: none;\n padding: 8px 16px;\n border-radius: 20px;\n cursor: pointer;\n font-family: inherit;\n font-size: 14px;\n transition: opacity 0.3s;\n}\n\n.pill:hover {\n opacity: 0.8;\n}\n\narticle {\n font-size: 170px;\n text-align: center;\n font-weight: 300;\n line-height: 0.9;\n margin-bottom: 50px;\n}\n\n.input-container {\n text-align: center;\n margin-bottom: 60px;\n}\n\n#customText {\n width: 80%;\n padding: 10px;\n font-size: 18px;\n border: 1px solid #555;\n font-family: inherit;\n}\n\n#customText:focus {\n outline: none;\n border-color: #777;\n}\n\nfooter {\n font-size: 18px;\n border-top: 2px solid #434343;\n display: table;\n width: 100%;\n table-layout: fixed;\n}\n\nfooter p {\n display: table-cell;\n line-height: 1.7;\n padding: 10px;\n}\n\nfooter p:first-child {\n font-weight: 300;\n}\n\nfooter p:nth-child(2) {\n font-weight: 400;\n}\n\nfooter p:last-child {\n font-weight: bold;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/all/allFont/code/main.tsx","extension","actionData","errors"]