├── src ├── utils │ ├── typography.d.ts │ └── typography.js ├── pages │ ├── 404.tsx │ ├── index.scss │ └── index.tsx ├── data │ ├── code.ts │ ├── themes.ts │ ├── fonts.ts │ └── languages.ts ├── components │ ├── layout.tsx │ ├── FontPreview.scss │ └── FontPreview.tsx └── html.js ├── static ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── apple-touch-icon.png ├── images │ └── preview.jpeg ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── fonts │ ├── cascadia │ │ ├── Cascadia.woff │ │ ├── Cascadia.woff2 │ │ └── font.css │ ├── monoid │ │ ├── Monoid-Bold.ttf │ │ ├── Monoid-Bold.woff2 │ │ ├── Monoid-Italic.ttf │ │ ├── Monoid-Regular.ttf │ │ ├── Monoid-Retina.ttf │ │ ├── Monoid-Italic.woff2 │ │ ├── Monoid-Regular.woff2 │ │ ├── monoisome-regular.woff2 │ │ └── font.css │ ├── conta │ │ ├── conta-regular.woff │ │ ├── conta-regular.woff2 │ │ └── font.css │ ├── lilex │ │ ├── lilex-regular.woff │ │ ├── lilex-regular.woff2 │ │ └── font.css │ ├── mononoki │ │ ├── mononoki-Bold.woff │ │ ├── mononoki-Bold.woff2 │ │ ├── mononoki-Italic.woff │ │ ├── mononoki-Italic.woff2 │ │ ├── mononoki-Regular.woff │ │ ├── mononoki-Regular.woff2 │ │ ├── mononoki-BoldItalic.woff │ │ ├── mononoki-BoldItalic.woff2 │ │ └── font.css │ ├── classic-console │ │ ├── clacon.woff2 │ │ └── font.css │ ├── hasklig │ │ ├── hasklig-regular.woff │ │ ├── hasklig-regular.woff2 │ │ └── font.css │ ├── iosevka │ │ ├── iosevka-regular.woff │ │ ├── iosevka-regular.woff2 │ │ └── font.css │ ├── input-mono │ │ ├── InputMono-Regular.woff2 │ │ └── font.css │ ├── julia-mono │ │ ├── JuliaMono-Regular.woff2 │ │ └── font.css │ ├── iosevka-slab │ │ ├── iosevka-slab-regular.woff │ │ ├── iosevka-slab-regular.woff2 │ │ └── font.css │ ├── jetbrains-mono │ │ ├── JetBrainsMono-Regular.woff │ │ ├── JetBrainsMono-Regular.woff2 │ │ └── font.css │ ├── consolas-ligaturized │ │ ├── ConsolasLigaturized.ttf │ │ ├── ConsolasLigaturized.woff │ │ ├── ConsolasLigaturized.woff2 │ │ └── font.css │ ├── fantasque-sans-mono │ │ ├── fantasque-sans-mono-regular.woff │ │ ├── fantasque-sans-mono-regular.woff2 │ │ └── font.css │ └── dank-mono │ │ └── font.css └── site.webmanifest ├── .eslintrc.js ├── tsconfig.json ├── .github ├── workflows │ └── ci.yml └── FUNDING.yml ├── gatsby-config.js ├── README.md ├── netlify.toml ├── package.json └── .gitignore /src/utils/typography.d.ts: -------------------------------------------------------------------------------- 1 | export declare const rhythm: (a: number) => number; 2 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /static/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/favicon-16x16.png -------------------------------------------------------------------------------- /static/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/favicon-32x32.png -------------------------------------------------------------------------------- /static/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/apple-touch-icon.png -------------------------------------------------------------------------------- /static/images/preview.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/images/preview.jpeg -------------------------------------------------------------------------------- /static/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/android-chrome-192x192.png -------------------------------------------------------------------------------- /static/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/android-chrome-512x512.png -------------------------------------------------------------------------------- /static/fonts/cascadia/Cascadia.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/cascadia/Cascadia.woff -------------------------------------------------------------------------------- /static/fonts/monoid/Monoid-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/monoid/Monoid-Bold.ttf -------------------------------------------------------------------------------- /static/fonts/cascadia/Cascadia.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/cascadia/Cascadia.woff2 -------------------------------------------------------------------------------- /static/fonts/conta/conta-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/conta/conta-regular.woff -------------------------------------------------------------------------------- /static/fonts/conta/conta-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/conta/conta-regular.woff2 -------------------------------------------------------------------------------- /static/fonts/lilex/lilex-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/lilex/lilex-regular.woff -------------------------------------------------------------------------------- /static/fonts/lilex/lilex-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/lilex/lilex-regular.woff2 -------------------------------------------------------------------------------- /static/fonts/monoid/Monoid-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/monoid/Monoid-Bold.woff2 -------------------------------------------------------------------------------- /static/fonts/monoid/Monoid-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/monoid/Monoid-Italic.ttf -------------------------------------------------------------------------------- /static/fonts/monoid/Monoid-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/monoid/Monoid-Regular.ttf -------------------------------------------------------------------------------- /static/fonts/monoid/Monoid-Retina.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/monoid/Monoid-Retina.ttf -------------------------------------------------------------------------------- /static/fonts/monoid/Monoid-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/monoid/Monoid-Italic.woff2 -------------------------------------------------------------------------------- /static/fonts/monoid/Monoid-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/monoid/Monoid-Regular.woff2 -------------------------------------------------------------------------------- /static/fonts/mononoki/mononoki-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/mononoki/mononoki-Bold.woff -------------------------------------------------------------------------------- /static/fonts/classic-console/clacon.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/classic-console/clacon.woff2 -------------------------------------------------------------------------------- /static/fonts/hasklig/hasklig-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/hasklig/hasklig-regular.woff -------------------------------------------------------------------------------- /static/fonts/hasklig/hasklig-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/hasklig/hasklig-regular.woff2 -------------------------------------------------------------------------------- /static/fonts/iosevka/iosevka-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/iosevka/iosevka-regular.woff -------------------------------------------------------------------------------- /static/fonts/iosevka/iosevka-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/iosevka/iosevka-regular.woff2 -------------------------------------------------------------------------------- /static/fonts/monoid/monoisome-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/monoid/monoisome-regular.woff2 -------------------------------------------------------------------------------- /static/fonts/mononoki/mononoki-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/mononoki/mononoki-Bold.woff2 -------------------------------------------------------------------------------- /static/fonts/mononoki/mononoki-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/mononoki/mononoki-Italic.woff -------------------------------------------------------------------------------- /static/fonts/mononoki/mononoki-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/mononoki/mononoki-Italic.woff2 -------------------------------------------------------------------------------- /static/fonts/mononoki/mononoki-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/mononoki/mononoki-Regular.woff -------------------------------------------------------------------------------- /static/fonts/mononoki/mononoki-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/mononoki/mononoki-Regular.woff2 -------------------------------------------------------------------------------- /static/fonts/input-mono/InputMono-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/input-mono/InputMono-Regular.woff2 -------------------------------------------------------------------------------- /static/fonts/julia-mono/JuliaMono-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/julia-mono/JuliaMono-Regular.woff2 -------------------------------------------------------------------------------- /static/fonts/mononoki/mononoki-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/mononoki/mononoki-BoldItalic.woff -------------------------------------------------------------------------------- /static/fonts/mononoki/mononoki-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/mononoki/mononoki-BoldItalic.woff2 -------------------------------------------------------------------------------- /static/fonts/classic-console/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Classic Console"; 3 | src: local('*'), url(clacon.woff2) format('woff2'); 4 | } 5 | -------------------------------------------------------------------------------- /static/fonts/iosevka-slab/iosevka-slab-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/iosevka-slab/iosevka-slab-regular.woff -------------------------------------------------------------------------------- /static/fonts/iosevka-slab/iosevka-slab-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/iosevka-slab/iosevka-slab-regular.woff2 -------------------------------------------------------------------------------- /static/fonts/jetbrains-mono/JetBrainsMono-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/jetbrains-mono/JetBrainsMono-Regular.woff -------------------------------------------------------------------------------- /static/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2 -------------------------------------------------------------------------------- /static/fonts/consolas-ligaturized/ConsolasLigaturized.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/consolas-ligaturized/ConsolasLigaturized.ttf -------------------------------------------------------------------------------- /static/fonts/consolas-ligaturized/ConsolasLigaturized.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/consolas-ligaturized/ConsolasLigaturized.woff -------------------------------------------------------------------------------- /static/fonts/consolas-ligaturized/ConsolasLigaturized.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/consolas-ligaturized/ConsolasLigaturized.woff2 -------------------------------------------------------------------------------- /static/fonts/fantasque-sans-mono/fantasque-sans-mono-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/fantasque-sans-mono/fantasque-sans-mono-regular.woff -------------------------------------------------------------------------------- /static/fonts/fantasque-sans-mono/fantasque-sans-mono-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gaafar/dev-fonts/HEAD/static/fonts/fantasque-sans-mono/fantasque-sans-mono-regular.woff2 -------------------------------------------------------------------------------- /static/fonts/input-mono/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Input Mono'; 3 | src: url('InputMono-Regular.woff2') format('woff2'); 4 | font-weight: normal; 5 | font-style: normal; 6 | } -------------------------------------------------------------------------------- /static/fonts/julia-mono/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Julia Mono'; 3 | src: url('JuliaMono-Regular.woff2') format('woff2'); 4 | font-weight: normal; 5 | font-style: normal; 6 | } -------------------------------------------------------------------------------- /static/fonts/cascadia/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Cascadia"; 3 | src: url("Cascadia.woff2") format("woff2"), 4 | url("Cascadia.woff") format("woff"); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | -------------------------------------------------------------------------------- /static/fonts/conta/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Conta'; 3 | src: url('conta-regular.woff2') format('woff2'), 4 | url('conta-regular.woff') format('woff'); 5 | font-weight: normal; 6 | font-style: normal; 7 | 8 | } -------------------------------------------------------------------------------- /static/fonts/lilex/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Lilex'; 3 | src: url('lilex-regular.woff2') format('woff2'), 4 | url('lilex-regular.woff') format('woff'); 5 | font-weight: normal; 6 | font-style: normal; 7 | 8 | } -------------------------------------------------------------------------------- /static/fonts/hasklig/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Hasklig'; 3 | src: url('hasklig-regular.woff2') format('woff2'), 4 | url('hasklig-regular.woff') format('woff'); 5 | font-weight: normal; 6 | font-style: normal; 7 | 8 | } -------------------------------------------------------------------------------- /src/pages/404.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Layout from '../components/layout'; 3 | 4 | export default () => ( 5 | 6 |

You are here!

7 |

But nothing found for you #404

8 | 9 | ); 10 | -------------------------------------------------------------------------------- /static/fonts/jetbrains-mono/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'JetBrains Mono'; 3 | src: url('JetBrainsMono-Regular.woff2') format('woff2'), 4 | url('JetBrainsMono-Regular.woff2') format('woff'); 5 | font-weight: normal; 6 | font-style: normal; 7 | 8 | } -------------------------------------------------------------------------------- /static/fonts/iosevka/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Iosevka Web'; 3 | font-display: swap; 4 | font-weight: 400; 5 | font-stretch: normal; 6 | font-style: normal; 7 | src: url('iosevka-regular.woff2') format('woff2'), url('iosevka-regular.woff') format('woff'); 8 | } 9 | -------------------------------------------------------------------------------- /static/fonts/fantasque-sans-mono/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Fantasque Sans Mono'; 3 | src: url('fantasque-sans-mono-regular.woff2') format('woff2'), 4 | url('fantasque-sans-mono-regular.woff') format('woff'); 5 | font-weight: 400; 6 | font-style: normal; 7 | } 8 | -------------------------------------------------------------------------------- /static/fonts/iosevka-slab/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Iosevka Slab Web'; 3 | font-display: swap; 4 | font-weight: 400; 5 | font-stretch: normal; 6 | font-style: normal; 7 | src: url('iosevka-slab-regular.woff2') format('woff2'), url('iosevka-slab-regular.woff') format('woff'); 8 | } 9 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | 'airbnb-typescript' 4 | ], 5 | parserOptions: { 6 | project: './tsconfig.json', 7 | }, 8 | env: { 9 | browser: true, 10 | node: true, 11 | }, 12 | rules: { 13 | 'import/prefer-default-export': 0 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /static/fonts/consolas-ligaturized/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Consolas ligaturized"; 3 | src: url("ConsolasLigaturized.woff2") format("woff2"), 4 | url("ConsolasLigaturized.woff") format("woff"), 5 | url("ConsolasLigaturized.ttf") format("truetype"); 6 | font-weight: normal; 7 | font-style: normal; 8 | } 9 | -------------------------------------------------------------------------------- /src/data/code.ts: -------------------------------------------------------------------------------- 1 | // show brackets, braces, parens, equality ligs, && ||, arrow, gte 2 | 3 | export const code = `fonts.forEach(font => { 4 | const { id, name, likes } = font; 5 | if ( 6 | likes >= 30 7 | || (likes === 50 && likes != 0) 8 | || favorites[id] 9 | ) { 10 | coolFonts++; 11 | console.log(\`\${name} is cool!\`); 12 | } 13 | });`; 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "./src/**/*", 4 | "gatsby-config.js", 5 | ], 6 | "compilerOptions": { 7 | "target": "esnext", 8 | "module": "commonjs", 9 | "lib": ["dom", "es2017"], 10 | // "allowJs": true, 11 | // "checkJs": true, 12 | "jsx": "react", 13 | "strict": true, 14 | "esModuleInterop": true, 15 | "experimentalDecorators": true, 16 | "emitDecoratorMetadata": true, 17 | "noEmit": true, 18 | "skipLibCheck": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | strategy: 11 | matrix: 12 | node-version: [12.x] 13 | 14 | steps: 15 | - uses: actions/checkout@v1 16 | - name: Use Node.js ${{ matrix.node-version }} 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | - name: Build 21 | run: | 22 | yarn 23 | yarn ci 24 | yarn build -------------------------------------------------------------------------------- /static/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Dev Fonts", 3 | "short_name": "Dev Fonts", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-384x384.png", 12 | "sizes": "384x384", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#292d3e", 17 | "background_color": "#292d3e", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /src/components/layout.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { rhythm } from '../utils/typography'; 4 | 5 | // eslint-disable-next-line react/prop-types 6 | const MainLayout: React.FC = ({ children }) => ( 7 |
17 | {children} 18 |
19 | ); 20 | 21 | export default MainLayout; 22 | -------------------------------------------------------------------------------- /src/components/FontPreview.scss: -------------------------------------------------------------------------------- 1 | .font-header { 2 | margin-bottom: 0.8em; 3 | margin-top: 2em; 4 | } 5 | 6 | .font-name { 7 | margin-bottom: 0 !important; 8 | } 9 | 10 | .codemirror-wrapper { 11 | position: relative; 12 | 13 | .codemirror-buttons { 14 | display: none; 15 | } 16 | 17 | &:hover { 18 | .codemirror-buttons { 19 | display: initial; 20 | } 21 | } 22 | } 23 | 24 | .codemirror-buttons { 25 | z-index: 10; 26 | position: absolute; 27 | bottom: 6px; 28 | right: 6px; 29 | } 30 | 31 | .font-compare { 32 | margin-right: .7em; 33 | } 34 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | siteName: 'Dev Fonts', 4 | exampleUrl: 'https://devfonts.gaif.dev/', 5 | }, 6 | plugins: [ 7 | 'gatsby-plugin-typescript', 8 | 'gatsby-plugin-react-helmet', 9 | 'gatsby-plugin-sass', 10 | // `gatsby-plugin-antd`, 11 | { 12 | resolve: 'gatsby-plugin-typography', 13 | options: { 14 | pathToConfigModule: 'src/utils/typography.js', 15 | omitGoogleFont: true, 16 | }, 17 | }, 18 | { 19 | resolve: 'gatsby-plugin-google-analytics', 20 | options: { 21 | trackingId: 'UA-163309379-1', 22 | }, 23 | }, 24 | ], 25 | }; 26 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: Gaafar 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /src/pages/index.scss: -------------------------------------------------------------------------------- 1 | @import '~antd/dist/antd.dark.css'; 2 | /* @import '~antd/dist/antd.compact.css'; */ 3 | 4 | a, .ant-btn { 5 | text-shadow: none; 6 | color: rgba(255, 255, 255, 0.85); 7 | } 8 | 9 | .no-after::after { 10 | content: '' !important; 11 | } 12 | 13 | body { 14 | background-color: #1b1e2b; 15 | } 16 | 17 | ////////////////////// 18 | $margin: .5rem; 19 | 20 | .filter-wrapper { 21 | .ant-badge { 22 | margin-left: $margin; 23 | } 24 | } 25 | 26 | .compare-switch { 27 | margin: $margin 0.4em; 28 | } 29 | 30 | .row-spacer { 31 | margin: $margin 0; 32 | } 33 | 34 | .links-row { 35 | .anticon { 36 | font-size: 25px; 37 | } 38 | 39 | a { 40 | margin: 0 5px; 41 | } 42 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # dev-fonts 2 | 3 | List of the best fonts for coding with live preview [devfonts.gafi.dev](https://devfonts.gafi.dev) 4 | 5 | ## Features 6 | * Live preview of all fonts with your code samples 7 | * Select specific fonts to compare 8 | * Choose editor themes 9 | * Choose your language for syntax highlights 10 | 11 | ## Built with 12 | * Gatsby 13 | * Code Mirror editor 14 | * Ant Design 15 | * Inspired by (code stolen from) https://carbon.now.sh/ 16 | * Hosted on Netlify 17 | 18 | ## Missing a font? 19 | You can open an issue to request adding a new font or open a PR by adding the font under `src/data/fonts.ts` and `static/fonts` 20 | * Include only woff2 (smaller download size). Use font squirrel with basic settings for conversion if needed https://www.fontsquirrel.com/tools/webfont-generator 21 | * Using a font from an official, reliable CDN is preferred. If not available, then add it in `static/fonts`. 22 | * Use `sort: 2` for fonts with ligatures, `sort: 3` for others 23 | * Do not change other files or file formatting apart from adding the new font 24 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [[headers]] 2 | for = "/" 3 | [headers.values] 4 | Cache-Control = "public, max-age=600" 5 | 6 | [[headers]] 7 | for = "*.manifest" 8 | [headers.values] 9 | Cache-Control = "public, max-age=600" 10 | 11 | [[headers]] 12 | for = "*.png" 13 | [headers.values] 14 | Cache-Control = "public, max-age=600" 15 | 16 | [[headers]] 17 | for = "*.jpeg" 18 | [headers.values] 19 | Cache-Control = "public, max-age=600" 20 | 21 | [[headers]] 22 | for = "*.js" 23 | [headers.values] 24 | # default public, max-age=14400, must-revalidate 25 | Cache-Control = "public, max-age=14400, stale-while-revalidate=604800" 26 | 27 | [[headers]] 28 | for = "*.css" 29 | [headers.values] 30 | # default public, max-age=14400, must-revalidate 31 | Cache-Control = "public, max-age=14400, stale-while-revalidate=604800" 32 | 33 | [[headers]] 34 | for = "*.woff" 35 | [headers.values] 36 | Cache-Control = "public, max-age=14400, stale-while-revalidate=604800" 37 | 38 | [[headers]] 39 | for = "*.woff2" 40 | [headers.values] 41 | Cache-Control = "public, max-age=14400, stale-while-revalidate=604800" -------------------------------------------------------------------------------- /static/fonts/mononoki/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "mononoki Regular"; 3 | src: url("mononoki-Regular.woff2") format("woff2"), /* Super Modern Browsers */ 4 | url("mononoki-Regular.woff") format("woff"); /* Pretty Modern Browsers */ 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | @font-face { 9 | font-family: "mononoki Bold"; 10 | src: url("mononoki-Bold.woff2") format("woff2"), /* Super Modern Browsers */ 11 | url("mononoki-Bold.woff") format("woff"); /* Pretty Modern Browsers */ 12 | font-weight: bold; 13 | font-style: normal; 14 | } 15 | @font-face { 16 | font-family: "mononoki Italic"; 17 | src: url("mononoki-Italic.woff2") format("woff2"), /* Super Modern Browsers */ 18 | url("mononoki-Italic.woff") format("woff"); /* Pretty Modern Browsers */ 19 | font-weight: normal; 20 | font-style: normal; 21 | } 22 | @font-face { 23 | font-family: "mononoki BoldItalic"; 24 | src: url("mononoki-BoldItalic.woff2") format("woff2"), /* Super Modern Browsers */ 25 | url("mononoki-BoldItalic.woff") format("woff"); /* Pretty Modern Browsers */ 26 | font-weight: normal; 27 | font-style: normal; 28 | } 29 | -------------------------------------------------------------------------------- /static/fonts/monoid/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Monoid Regular"; 3 | src: url("Monoid-Regular.eot"); 4 | /* IE9 Compat Modes */ 5 | src: url("Monoid-Regular.eot?#iefix") format("embedded-opentype"), 6 | /* IE6-IE8 */ url("Monoid-Regular.woff2") format("woff2"), 7 | /* Super Modern Browsers */ url("Monoid-Regular.woff") format("woff"), 8 | /* Pretty Modern Browsers */ url("Monoid-Regular.ttf") format("truetype"); 9 | /* Safari, Android, iOS */ 10 | font-weight: normal; 11 | font-style: normal; 12 | } 13 | @font-face { 14 | font-family: "Monoid Bold"; 15 | src: url("Monoid-Bold.eot"); 16 | /* IE9 Compat Modes */ 17 | src: url("Monoid-Bold.eot?#iefix") format("embedded-opentype"), 18 | /* IE6-IE8 */ url("Monoid-Bold.woff2") format("woff2"), 19 | /* Super Modern Browsers */ url("Monoid-Bold.woff") format("woff"), 20 | /* Pretty Modern Browsers */ url("Monoid-Bold.ttf") format("truetype"); 21 | /* Safari, Android, iOS */ 22 | font-weight: bold; 23 | font-style: normal; 24 | } 25 | @font-face { 26 | font-family: "Monoid Italic"; 27 | src: url("Monoid-Italic.eot"); 28 | /* IE9 Compat Modes */ 29 | src: url("Monoid-Italic.eot?#iefix") format("embedded-opentype"), 30 | /* IE6-IE8 */ url("Monoid-Italic.woff2") format("woff2"), 31 | /* Super Modern Browsers */ url("Monoid-Italic.woff") format("woff"), 32 | /* Pretty Modern Browsers */ url("Monoid-Italic.ttf") format("truetype"); 33 | /* Safari, Android, iOS */ 34 | font-weight: normal; 35 | font-style: normal; 36 | } 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dev-fonts", 3 | "version": "1.0.0", 4 | "description": "Gatsby example site demonstrating how to use TypeScript with Gatsby", 5 | "author": "fabien0102 ", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "gatsby develop", 9 | "develop": "gatsby develop", 10 | "build": "gatsby build", 11 | "ts": "tsc --noEmit", 12 | "lint": "eslint . --ignore-path .gitignore --ext .ts,.tsx,.js,.jsx", 13 | "ci": "yarn ts && yarn lint" 14 | }, 15 | "dependencies": { 16 | "@ant-design/icons": "^4.0.6", 17 | "antd": "^4.1.2", 18 | "gatsby": "^2.20.16", 19 | "gatsby-plugin-antd": "^2.2.0", 20 | "gatsby-plugin-google-analytics": "^2.2.2", 21 | "gatsby-plugin-react-helmet": "^3.2.1", 22 | "gatsby-plugin-sass": "^2.2.1", 23 | "gatsby-plugin-typescript": "^2.3.1", 24 | "gatsby-plugin-typography": "^2.4.1", 25 | "lodash": "^4.17.21", 26 | "node-sass": "^4.13.1", 27 | "react": "^16.12.0", 28 | "react-dom": "^16.13.1", 29 | "react-helmet": "^6.0.0", 30 | "react-typography": "^0.16.19", 31 | "typography": "^0.16.19", 32 | "typography-theme-bootstrap": "^0.16.19" 33 | }, 34 | "devDependencies": { 35 | "@types/codemirror": "^0.0.91", 36 | "@types/node": "^13.11.1", 37 | "@types/react": "^16.9.34", 38 | "@types/react-dom": "^16.9.6", 39 | "@types/react-helmet": "^5.0.15", 40 | "@typescript-eslint/eslint-plugin": "^2.24.0", 41 | "@typescript-eslint/parser": "^2.27.0", 42 | "eslint": "^6.8.0", 43 | "eslint-config-airbnb-typescript": "^7.2.1", 44 | "eslint-config-prettier": "^6.10.1", 45 | "eslint-plugin-import": "^2.20.1", 46 | "eslint-plugin-jsx-a11y": "^6.2.3", 47 | "eslint-plugin-prettier": "^3.1.2", 48 | "eslint-plugin-react": "^7.19.0", 49 | "eslint-plugin-react-hooks": "^2.5.0", 50 | "prettier": "^2.0.4", 51 | "typescript": "^3.7.2" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/html.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | 5 | export default function HTML(props) { 6 | return ( 7 | 8 | 9 | 10 | 11 | 15 |