1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="content-language" content="en-us"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <meta name="description" content="Basic fonts are the simplest, easy to read fonts. In our case - this category consist of free serif and sans serif fonts."> 8 9 <meta name="twitter:card" content="summary" /> 10 <meta name="twitter:creator" content="@fontpicks" /> 11 <meta name="twitter:site" content="@fontpicks" /> 12 <meta name="twitter:domain" content="fontpicks.com" /> 13 <meta name="twitter:title" content="Basic fonts" /> 14 <meta name="twitter:description" content="Basic fonts are the simplest, easy to read fonts. In our case - this category consist of free serif and sans serif fonts." /> 15 <meta name="twitter:image" content="https://fontpicks.com/img/fp-default.gif" /> 16 17 <meta name="msapplication-TileColor" content="#2b5797"> 18 <meta name="theme-color" content="#ffffff"> 19 20 <meta property="article:publisher" content="https://www.facebook.com/fontpicks" /> 21 <meta property="og:locale" content="en_US" /> 22 <meta property="og:type" content="article" /> 23 <meta property="og:site_name" content="Fontpicks" /> 24 <meta property="og:title" content="Basic fonts" /> 25 <meta property="og:url" content="https://fontpicks.com/basic-fonts" /> 26 <meta property="og:image" content="https://fontpicks.com/img/fp-default.gif" /> 27 <meta property="og:image:width" content="800" /> 28 <meta property="og:image:height" content="600" /> 29 30 <link rel="canonical" href="https://fontpicks.com/basic-fonts" /> 31 32 <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon.png"> 33 <link rel="icon" href="/favicon.svg" type="image/svg+xml"> 34 <link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png"> 35 <link rel="manifest" href="/manifest.json"> 36 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> 37 38 <link rel="stylesheet" href="/css/fontpicks.min.css?24032026" /> 39 40 <link rel="preconnect" href="https://fonts.googleapis.com"> 41 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 42 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"> 43 44
44<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1022153874214545" crossorigin="anonymous"></script>
44 45
45<script src="/js/script-bundle.min.js?29102025" defer></script>
45 46
46<script>window.onpopstate = function(event) {location.reload();}</script>
46 47 <title>FontPicks</title> 48 </head> 49 50 <body> 51 <div class="relative" x-data="{menu_open:false, menu_click:false, sub:false, is_touch: false}"> 52 53 <!-- main menu --> 54 55 <div class="relative z-20 bg-white shadow"> 56 57 <div class="flex justify-between h-20 px-4 mx-auto max-w-7xl sm:px-6 lg:px-8 md:justify-start"> 58 59 <div class="flex items-center flex-shrink-0 pr-2 md:pr-10"> 60 <a href="/" class="flex h-10" aria-label="Home"> 61 <svg class="h-full" viewBox="0 0 1916 1916"> 62 <g> 63 <path style="fill:#FF006C" d="M956.09 0c528.05,0 956.1,428.06 956.1,956.09 0,34.33 -1.85,68.24 -5.38,101.63l0 858.02 -931.45 0 0 -3.8c-6.4,0.13 -12.83,0.25 -19.27,0.25 -528.04,0 -956.09,-428.07 -956.09,-956.1 0,-528.04 428.06,-956.09 956.09,-956.09z"/> 64 <path style="fill:#FEFEFE" d="M1538.69 1418.85c84.21,0 152.47,68.26 152.47,152.47 0,84.2 -68.26,152.47 -152.47,152.47 -84.2,0 -152.47,-68.27 -152.47,-152.47 0,-84.21 68.27,-152.47 152.47,-152.47z"/> 65 <path style="fill:#242424" d="M413.33 1461.69c0,72.69 57.5,130.23 130.23,130.23 72.72,0 130.23,-57.5 130.23,-130.23l0 -235.91 189.84 0c61.61,0 111.86,-50.24 111.86,-111.85l0 -13.07c0,-61.6 -50.27,-111.85 -111.86,-111.85l-189.84 0 0 -354.34 189.84 0c61.61,0 111.86,-50.24 111.86,-111.85l0 -13.07c0,-61.6 -50.27,-111.85 -111.86,-111.85l-320.07 0c-72.69,0 -130.23,57.54 -130.23,130.22l0 933.57z"/> 66 <path style="fill:#fff" d="M1117.49 1223.34l0.9 0c265.52,0 478.62,-142.06 478.62,-416.04l0 -3.38c0,-241.85 -170.81,-409.28 -453.26,-409.28l-26.27 0c-61.61,0 -111.86,50.24 -111.86,111.85l0 11.38c0,61.61 50.24,111.86 111.86,111.86l4.29 0c130.22,0 211.4,62.58 211.4,179.28l0 3.37c0,101.48 -76.1,179.28 -206.32,179.28l-9.36 0c-61.61,0 -111.86,50.24 -111.86,111.85l0 8.01c0,61.6 50.24,111.85 111.86,111.85z"/> 67 </g> 68 </svg> 69 <svg class="hidden h-full lg:inline-flex" viewBox="1916 0 7700 1916"> 70 <g> 71 <path d="M2419.34 1473.68c0,72.72 57.51,130.23 130.23,130.23 72.73,0 130.23,-57.51 130.23,-130.23l0 -338.25 456.63 0c65.96,0 118.39,-52.42 118.39,-118.38 0,-65.96 -52.43,-118.39 -118.39,-118.39l-456.63 0 0 -251.99 532.74 0c65.96,0 118.39,-52.42 118.39,-118.38 0,-65.96 -52.43,-118.39 -118.39,-118.39l-662.97 0c-72.72,0 -130.23,57.51 -130.23,130.23l0 933.57z"/> 72 <path d="M3529.42 1614.05c282.44,0 492.15,-211.41 492.15,-471.86l0 -3.38c0,-260.45 -208.02,-468.47 -488.77,-468.47 -282.44,0 -492.15,211.4 -492.15,471.86l0 3.38c0,260.45 208.02,468.47 488.77,468.47zm3.38 -221.55c-142.06,0 -238.47,-116.7 -238.47,-250.3l0 -3.38c0,-133.61 87.94,-246.92 235.08,-246.92 142.06,0 238.47,116.69 238.47,250.3l0 3.38c0,133.6 -87.95,246.92 -235.08,246.92z"/> 73 <path d="M4086.46 1475.37c0,71.03 57.51,128.54 128.54,128.54 71.04,0 128.54,-57.51 128.54,-128.54l0 -387.3c0,-121.77 62.58,-184.34 160.67,-184.34 98.09,0 155.59,62.58 155.59,184.34l0 387.3c0,71.03 57.5,128.54 128.54,128.54 71.04,0 128.54,-57.51 128.54,-128.54l0 -468.48c0,-208.01 -113.31,-336.55 -307.81,-336.55 -130.22,0 -206.33,69.33 -265.52,145.44l0 -10.14c0,-71.03 -57.5,-128.54 -128.54,-128.54 -71.03,0 -128.54,57.51 -128.54,128.54l0 669.74z"/> 74 <path d="M5250.77 1608.98c55.82,0 99.79,-6.76 147.14,-25.36 35.52,-13.53 65.96,-50.74 65.96,-96.4 0,-59.19 -49.05,-106.56 -106.56,-106.56 -5.07,0 -21.98,1.69 -30.44,1.69 -57.5,0 -82.86,-28.75 -82.86,-87.94l0 -387.3 113.3 0c60.89,0 109.93,-49.05 109.93,-109.93 0,-60.88 -49.04,-109.93 -109.93,-109.93l-113.3 0 0 -113.31c0,-71.03 -57.51,-128.54 -128.54,-128.54 -71.04,0 -128.54,57.51 -128.54,128.54 0,271.19 0,370.92 0,762.75 0,209.72 106.55,272.29 263.83,272.29z"/> 75 <path style="fill:#FF006C" d="M5584.83 1473.68c0,72.72 57.5,130.23 130.23,130.23 72.72,0 130.22,-57.51 130.22,-130.23l0
75-235.08 197.88 0c265.52,0 478.61,-142.06 478.61,-416.05l0 -3.38c0,-241.84 -170.81,-409.28 -453.25,-409.28l-353.46 0c-72.73,0 -130.23,57.51 -130.23,130.23l0 933.57zm260.45 -466.79l0 -361.92 201.26 0c130.23,0 211.41,62.58 211.41,179.28l0 3.38c0,101.47 -76.1,179.26 -206.33,179.26l-206.33 0z"/> 76 <path style="fill:#FF006C" d="M6566.08 474.16c0,74.42 62.59,121.77 143.76,121.77 81.18,0 143.76,-47.34 143.76,-121.77l0 -3.37c0,-74.42 -62.58,-120.08 -143.76,-120.08 -81.17,0 -143.76,45.66 -143.76,120.08l0 3.37zm15.22 1001.22c0,71.03 57.51,128.54 128.54,128.54 71.04,0 128.54,-57.51 128.54,-128.54l0 -669.74c0,-71.03 -57.5,-128.54 -128.54,-128.54 -71.03,0 -128.54,57.51 -128.54,128.54l0 669.74z"/> 77 <path style="fill:#FF006C" d="M7371.48 1614.05c148.83,0 245.24,-47.35 321.34,-116.7 21.98,-20.29 37.2,-47.34 37.2,-81.18 0,-60.87 -47.34,-109.93 -108.24,-109.93 -30.44,0 -55.81,13.54 -69.34,23.68 -49.04,38.9 -101.47,62.58 -169.12,62.58 -140.37,0 -230,-111.62 -230,-250.3l0 -3.38c0,-133.61 91.32,-246.92 219.86,-246.92 67.65,0 115.01,21.98 160.67,57.5 15.22,11.84 40.59,25.37 74.41,25.37 64.27,0 116.7,-50.74 116.7,-115.01 0,-43.98 -23.68,-74.42 -40.6,-87.95 -76.1,-64.27 -172.51,-101.47 -309.49,-101.47 -277.36,0 -475.24,213.09 -475.24,471.86l0 3.38c0,258.75 199.56,468.47 471.86,468.47z"/> 78 <path style="fill:#FF006C" d="M7796.27 1475.37c0,71.03 57.5,128.53 128.54,128.53 71.03,0 128.54,-57.5 128.54,-128.53l0 -147.14 103.16 -93.02 224.94 309.49c30.44,42.29 60.88,59.19 111.62,59.19 64.27,0 120.07,-47.35 120.07,-116.69 0,-28.75 -10.14,-52.43 -32.13,-82.87l-241.84 -326.41 202.95 -174.2c35.52,-33.83 59.19,-67.65 59.19,-111.62 0,-59.2 -43.97,-115.01 -113.31,-115.01 -45.66,0 -76.1,21.98 -113.31,57.5l-321.33 304.43 0 -561.5c0,-71.03 -57.51,-128.54 -128.54,-128.54 -71.04,0 -128.54,57.51 -128.54,128.54l0 997.84z"/> 79 <path style="fill:#FF006C" d="M9038.27 1610.67c196.19,0 346.7,-91.32 346.7,-292.58l0 -3.38c0,-165.74 -147.14,-226.63 -273.98,-268.91 -98.09,-33.83 -184.34,-57.5 -184.34,-108.24l0 -3.38c0,-35.52 32.13,-62.58 94.71,-62.58 54.12,0 123.46,21.99 196.18,57.5 16.92,8.46 28.76,11.85 47.36,11.85 57.5,0 103.16,-43.98 103.16,-101.48 0,-43.97 -23.67,-77.8 -60.88,-96.4 -87.95,-43.97 -186.03,-69.33 -280.74,-69.33 -182.66,0 -331.48,103.16 -331.48,287.5l0 3.38c0,175.89 143.76,235.08 270.6,272.29 99.78,30.44 187.73,49.05 187.73,104.85l0 3.38c0,40.59 -33.83,67.65 -108.24,67.65 -72.73,0 -158.99,-27.07 -245.24,-81.18 -13.53,-8.46 -32.13,-13.53 -50.74,-13.53 -57.5,0 -101.47,43.97 -101.47,101.47 0,40.6 21.98,71.04 49.04,87.95 109.93,71.03 230.01,103.16 341.64,103.16z"/> 80 </g> 81 </svg> 82 </a> 83 </div> 84 85 <div class="hidden md:flex-1 md:flex md:space-x-12"> 86 <nav class="flex space-x-10 font-medium text-gray-500"> 87 <a href="/latest-fonts" @mouseover="menu_open=false" class="flex items-center transition whitespace-nowrap hover:text-gray-900 focus:text-gray-900"> 88 Latest fonts 89 </a> 90 <div class="relative flex"> 91 <button type="button" @mouseover="menu_open=true" class="inline-flex items-center space-x-2 font-medium transition group hover:text-gray-900 focus:outline-none focus:text-gray-900"> 92 <span>Categories</span> 93 94 <svg class="w-5 h-5 transition group-hover:text-gray-500 group-focus:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> 95 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> 96 </svg> 97 </button> 98 </div> 99 <a href="/authors" @mouseover="menu_open=false" class="flex items-center transition hover:text-gray-900 focus:outline-none"> 100 Authors 101 </a> 102 </nav> 103 </div> 104 105 <div class="flex items-center ml-2 space-x-8 sm:ml-8"> 106 <div x-data="{ 107 to : '/search/', 108 si : '', 109 search(){ 110 if(this.si.length>0) window.location.replace(this.to + this.si.replace(/\s/g,'+')) 111 } 112 }" 113 class="w-full max-w-lg lg:max-w-xs"> 114 <label for="search" class="sr-only">Search</label> 115 <div class="relative"> 116 <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> 117 <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"> 118 <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /> 119 </svg> 120 </div> 121 <input id="search" x-model="si" x-on:keydown.enter="search" @focus="menu_open = menu_click = false" class="block w-full py-2 pl-10 pr-3 placeholder-gray-500 bg-white border border-gray-300 rounded-md focus:outline-none focus:placeholder-gray-400 focus:ring-main focus:border-main" placeholder="Search" type="search"> 122 </div> 123 </div> 124 </div> 125 126 <div class="flex items-center ml-2 -mr-2 md:hidden"> 127 <button type="button" aria-label="Menu" @touchstart="is_touch = !is_touch" @click="menu_click = !menu_click; menu_open = menu_click; sub = false" class="inline-flex items-center justify-center p-2 text-gray-400 transition duration-150 ease-in-out rounded-md hover:text-gray-500 hover:bg-gray-100 focus:outline-none"> 128 <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 129 <path x-show="icon1 = !menu_click ? true : false" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> 130 <path x-show="icon2 = menu_click ? true : false" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> 131 </svg> 132 </button> 133 </div> 134 135 </div> 136 137 </div> 138 139 <!-- Category menu --> 140 141 <div class="relative z-10"> 142 <div x-show="menu_open" @mouseleave="!is_touch ? menu_open = menu_click : ''" x-on:resize.window="window.innerWidth > 639 ? menu_open = menu_click = is_touch = false : ''" class="absolute inset-x-0 transform bg-white shadow-lg" x-transition:enter="transition-transform ease-in-out duration-200" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1" style="display: none;"> 143 <div class="relative mx-auto max-w-7xl"> 144 145 <nav class="flex flex-col p-4 pb-6 bg-white md:flex-row md:py-8 sm:px-6 lg:px-8"> 146 147 <div class="px-3 py-2 mb-3 font-medium text-center uppercase md:hidden"> 148 Categories 149 </div> 150 151 <div class="md:border-r md:border-gray-200 md:mr-6 md:pr-6"> 152 153 <div class="flex"> 154 <h3 class="flex-1"> 155 <a href="/basic-fonts" class="flex items-center px-3 py-2 font-medium leading-5 text-white uppercase transition rounded-md bg-main hover:bg-main-dark">Basic</a> 156 </h3> 157 <button type="button" @click="sub = (sub === 1 ? false : 1)" class="inline-flex items-center px-2 ml-2 bg-white border border-transparent roun
157ded-md text-main-dark focus:outline-none md:hidden"> 158 <svg class="w-5 h-5 transition" :class="{ 'rot-arrow': sub === 1 }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 159 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> 160 </svg> 161 </button> 162 </div> 163 164 <ul :class="{'hidden': sub === 1 ? false : true}" class="hidden mt-6 text-base menu1 md:block md:text-sm lg:text-base"> 165 <li> 166 <a href="/basic-fonts/sans-serif-fonts"> 167 Sans Serif 168 </a> 169 </li> 170 <li> 171 <a href="/basic-fonts/serif-fonts"> 172 Serif 173 </a> 174 </li> 175 </ul> 176 </div> 177 178 <div class="mt-6 md:mt-0 md:border-r md:border-gray-200 md:mr-6 md:pr-6"> 179 180 <div class="flex"> 181 <h3 class="flex-1"> 182 <a href="/fancy-fonts" class="flex items-center px-3 py-2 font-medium leading-5 text-white uppercase transition rounded-md bg-main hover:bg-main-dark">Fancy</a> 183 </h3> 184 <button type="button" @click="sub = (sub === 2 ? false : 2)" class="inline-flex items-center px-2 ml-2 bg-white border border-transparent rounded-md text-main-dark focus:outline-none md:hidden"> 185 <svg class="w-5 h-5 transition" :class="{ 'rot-arrow': sub === 2 }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 186 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> 187 </svg> 188 </button> 189 </div> 190 191 <ul :class="{'hidden': sub === 2 ? false : true}" class="hidden mt-6 text-base menu1 md:text-sm lg:text-base md:grid md:grid-flow-col md:gap-x-2 md:grid-rows-8 lg:grid-rows-6 xl:grid-rows-4"> 192 <li> 193 <a href="/fancy-fonts/comic-fonts"> 194 Comic 195 </a> 196 </li> 197 <li> 198 <a href="/fancy-fonts/cartoon-fonts"> 199 Cartoon 200 </a> 201 </li> 202 <li> 203 <a href="/fancy-fonts/groovy-fonts"> 204 Groovy 205 </a> 206 </li> 207 <li> 208 <a href="/fancy-fonts/techno-fonts"> 209 Techno 210 </a> 211 </li> 212 <li> 213 <a href="/fancy-fonts/typewriter-fonts"> 214 Typewriter 215 </a> 216 </li> 217 <li> 218 <a href="/fancy-fonts/distorted-eroded-fonts"> 219 Distorted / Eroded 220 </a> 221 </li> 222 <li> 223 <a href="/fancy-fonts/stencil-army-fonts"> 224 Stencil / Army 225 </a> 226 </li> 227 <li> 228 <a href="/fancy-fonts/retro-fonts"> 229 Retro 230 </a> 231 </li> 232 <li> 233 <a href="/fancy-fonts/gothic-fonts"> 234 Gothic 235 </a> 236 </li> 237 <li> 238 <a href="/fancy-fonts/decorative-fonts"> 239 Decorative 240 </a> 241 </li> 242 <li> 243 <a href="/fancy-fonts/fire-ice-fonts"> 244 Fire / Ice 245 </a> 246 </li> 247 <li> 248 <a href="/fancy-fonts/horror-fonts"> 249 Horror 250 </a> 251 </li> 252 <li> 253 <a href="/fancy-fonts/western-fonts"> 254 Western 255 </a> 256 </li> 257 <li> 258 <a href="/fancy-fonts/holiday-fonts"> 259 Holiday 260 </a> 261 </li> 262 <li> 263 <a href="/fancy-fonts/various-fonts"> 264 Various 265 </a> 266 </li> 267 </ul> 268 269 </div> 270 271 <div class="mt-6 md:mt-0 md:border-r md:border-gray-200 md:mr-6 md:pr-6"> 272 273 <div class="flex"> 274 <h3 class="flex-1"> 275 <a href="/script-fonts" class="flex items-center px-3 py-2 font-medium leading-5 text-white uppercase transition rounded-md bg-main hover:bg-main-dark">Script</a> 276 </h3> 277 <button type="button" @click="sub = (sub === 3 ? false : 3)" class="inline-flex items-center px-2 ml-2 bg-white border border-transparent roun
277ded-md text-main-dark focus:outline-none md:hidden"> 278 <svg class="w-5 h-5 transition" :class="{ 'rot-arrow': sub === 3 }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 279 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> 280 </svg> 281 </button> 282 </div> 283 284 <ul :class="{'hidden': sub === 3 ? false : true}" class="hidden mt-6 text-base menu1 md:text-sm lg:text-base md:grid md:grid-flow-col md:gap-x-2 md:grid-rows-8 lg:grid-rows-6 xl:grid-rows-4"> 285 <li> 286 <a href="/script-fonts/calligraphy-fonts"> 287 Calligraphy 288 </a> 289 </li> 290 <li> 291 <a href="/script-fonts/brush-fonts"> 292 Brush 293 </a> 294 </li> 295 <li> 296 <a href="/script-fonts/handwritten-fonts"> 297 Handwritten 298 </a> 299 </li> 300 <li> 301 <a href="/script-fonts/graffiti-fonts"> 302 Graffiti 303 </a> 304 </li> 305 <li> 306 <a href="/script-fonts/old-school-fonts"> 307 Old School 308 </a> 309 </li> 310 <li> 311 <a href="/script-fonts/trash-fonts"> 312 Trash 313 </a> 314 </li> 315 <li> 316 <a href="/script-fonts/various-fonts"> 317 Various 318 </a> 319 </li> 320 </ul> 321 322 </div> 323 324 <div class="flex-grow mt-6 md:mt-0"> 325 326 <div class="flex"> 327 <h3 class="flex-1"> 328 <a href="/miscellaneous-fonts" class="flex items-center px-3 py-2 font-medium leading-5 text-white uppercase transition rounded-md bg-main hover:bg-main-dark">Misc</a> 329 </h3> 330 <button type="button" @click="sub = (sub === 4 ? false : 4)" class="inline-flex items-center px-2 ml-2 bg-white border border-transparent rounded-md text-main-dark focus:outline-none md:hidden"> 331 <svg class="w-5 h-5 transition" :class="{ 'rot-arrow': sub === 4 }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 332 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> 333 </svg> 334 </button> 335 </div> 336 337 <ul :class="{'hidden': sub === 4 ? false : true}" class="hidden mt-6 text-base menu1 md:block md:text-sm lg:text-base"> 338 <li> 339 <a href="/miscellaneous-fonts/foreign-fonts"> 340 Foreign 341 </a> 342 </li> 343 <li> 344 <a href="/miscellaneous-fonts/various-fonts"> 345 Various 346 </a> 347 </li> 348 </ul> 349 350 </div> 351 352 <div class="mt-6 space-y-6 md:hidden"> 353 354 <a href="/latest-fonts" class="block px-3 py-2 font-medium leading-5 text-center uppercase bg-gray-100 rounded-md">Latest fonts</a> 355 <a href="/authors" class="block px-3 py-2 font-medium leading-5 text-center uppercase bg-gray-100 rounded-md">Authors</a> 356 357 </div> 358 359 </nav> 360 361 </div> 362 </div> 363 </div> 364 365 </div> 366 367 <div class="absolute top-0 w-full h-bg -z-1 bg-gradient-to-b from-gray-200 via-white to-w
367hite"></div> 368 369<div class="pt-8 sm:px-4"> 370 <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8"> 371 372 373 <nav class="flex mb-1" aria-label="Breadcrumb"> 374 <ol class="flex items-center space-x-2 sm:space-x-2"> 375 <li> 376 <div> 377 <a href="/" class="text-gray-500 hover:text-gray-900"> 378 <svg class="flex-shrink-0 w-4 h-4 sm:h-5 sm:w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 379 <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" /> 380 </svg> 381 <span class="sr-only">Home</span> 382 </a> 383 </div> 384 </li> 385 <li> 386 <div class="flex items-center"> 387 <svg class="flex-shrink-0 w-4 h-4 text-gray-400 sm:h-5 sm:w-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"> 388 <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" /> 389 </svg> 390 <a href="/basic-fonts" class="ml-2 text-xs font-medium text-gray-500 sm:ml-4 sm:text-sm hover:text-gray-900">Basic fonts</a> 391 </div> 392 </li> 393 </ol> 394 </nav> 395 396 397 <h1 class="py-6 text-2xl font-extrabold leading-7 text-center sm:text-4xl lg:text-5xl">Basic fonts</h1> 398 </div> 399</div> 400 401<div x-data="navi()" x-init="$watch('f', () => { t = ''; p = 1; burl() }); $watch('t', () => { if(f=='popular') { p = 1; burl() } }); $watch('p', () => { burl() })" class="relative p-4 pb-8 mx-auto max-w-7xl sm:pt-8 sm:px-6 lg:px-8"> 402 <div > 403 <div class="sm:hidden"> 404 <label for="tab1" class="sr-only">Select a tab</label> 405 <select id="tab1" x-model="f" class="block w-full border-gray-300 rounded-md focus:ring-main focus:border-main"> 406 <option :selected="f == ''" value="">Recent</option> 407 <option :selected="f == 'popular'" value="popular">Popular</option> 408 <option :selected="f == 'updated'" value="updated">Updated</option> 409 <!--<option :selected="f == 'commercial'" value="commercial">Commercial</option>--> 410 </select> 411 </div> 412 <div x-show="f == 'popular'" class="mt-2 sm:hidden" > 413 <label for="tab2" class="sr-only">Select a tab</label> 414 <select id="tab2" x-model="t" class="block w-full border-gray-300 rounded-md focus:ring-main focus:border-main"> 415 <option :selected="t == ''" value="">Week</option> 416 <option :selected="t == 'month'" value="month">Month</option> 417 <option :selected="t == 'all'" value="all">All time</option> 418 </select> 419 </div> 420 <div class="hidden sm:flex sm:justify-between sm:flex-col sm:divide-y md:flex-row md:divide-none"> 421 <nav class="space-x-4" aria-label="Tabs"> 422 <button @click="f = ''" :class="{'but_on': !f, 'but_off': f}" class="px-3 py-1.5 font-medium rounded-md focus:outline-none" aria-current="page"> 423 Latest 424 </button> 425 <button @click="f = 'popular'" :class="{'but_on': f === 'popular', 'but_off': f !== 'popular'}" class="px-3 py-1.5 font-medium rounded-md focus:outline-none"> 426 Popular 427 </button> 428 <button @click="f = 'updated'" :class="{'but_on': f === 'updated', 'but_off': f !== 'updated'}" class="px-3 py-1.5 font-medium rounded-md focus:outline-none"> 429 Updated 430 </button> 431 <!--<button @click="f = 'commercial'" :class="{'but_on': f === 'commercial', 'but_off': f !== 'commercial'}" class="px-3 py-1.5 font-medium rounded-md focus:outline-none"> 432 Commercial 433 </button>--> 434 </nav> 435 <nav x-show="f == 'popular'" style="display:none" class="space-x-4 sm:pt-4 sm:mt-4 md:p-0 md:m-0" aria-label="Timeframe"> 436 <button @click="t = ''" :class="{'but_on': !t, 'but_off': t}" class="px-3 py-1.5 font-medium rounded-md focus:outline-none" aria-current="page"> 437 Week 438 </button> 439 <button @click="t = 'month'" :class="{'but_on': t === 'month', 'but_off': t !== 'month'}" class="px-3 py-1.5 font-medium rounded-md focus:outline-none"> 440 Month 441 </button> 442 <button @click="t = 'all'" :class="{'but_on': t === 'all', 'but_off': t !== 'all'}" class="px-3 py-1.5 font-medium rounded-md focus:outline-none"> 443 All time 444 </button> 445 </nav> 446 </div> 447 </div> 448 449 <div class="mt-6 rounded-lg min-h-10 bg-gradient-to-b from-gray-100 to-white md:min-h-22"> 450 451 <div x-show="loader" class="absolute top6h right-14 sm:top30n sm:right-6 lg:right-8 spinner"> 452 <div class="bg-gray-300 bounce1"></div> 453 <div class="bg-gray-300 bounce2"></div> 454 <div class="bg-gray-300 bounce3"></div> 455 </div> 456 <div x-show="loader" class="absolute inset-0 z-10 opacity-0"></div> 457 458 <template x-if="data"> 459 <ul class="grid gap-y-2 sm:grid-cols-2 sm:gap-x-2 lg:grid-cols-3 lg:gap-x-5"> 460 <template x-for="font in Object.values(data.fonts)" :key="font"> 461 <li class="p-4 rounded-lg moveit"> 462 <div class="space-y-6"> 463 <div class="bg-gray-200 rounded-lg aspect-w-3 aspect-h-2 im:out"> 464 <a :href="'/' + font.cs + '.html'"> 465 <picture> 466 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" :data-srcset="'/images/' + font.i + '-medium.avif'"> 467 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" :data-srcset="'/images/' + font.i + '-medium.webp'"> 468 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" :data-src="'/images/' + font.i + '-medium.jpg'"> 469 </picture> 470 </a> 471 </div> 472 <div> 473 <div class="font-medium el:push"> 474 <h2><a :href="'/' + font.cs + '.html'" x-text="font.cn" class="text-base sm:text-lg lg:text-xl text-main hover:text-main-dark"></a></h2> 475 <p class="mt-1.5 md:mt-1 text-sm text-gray-500 lg:text-base">by <a :href="'/author/' + font.as" x-text="font.an" class="hover:text-gray-700"></a></p> 476 </div> 477 </div> 478 </div> 479 </li> 480 </template> 481 </ul> 482 </template> 483 484 <ul x-show="!data.fonts" class="grid gap-y-2 sm:grid-cols-2 sm:gap-x-2 lg:grid-cols-3 lg:gap-x-5"> 485 <li class="p-4 rounded-lg moveit"> 486 <div class="space-y-6"> 487 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 488 <a href="/tca-thecoa-font.html"> 489 <picture> 490 <source type="image/avif" srcset="/images/t/c/tca_thecoa-medium.avif"> 491 <source type="image/webp" srcset="/images/t/c/tca_thecoa-medium.webp"> 492 <img class="object-cover w-full rounded-lg shadow-cool" src="/images/t/c/tca_thecoa-medium.jpg" width="540" height="360" alt="TCA Thecoa"> 493 </picture> 494 </a> 495 </div> 496 <div> 497 <div class="font-medium el:push"> 498 <h2><a href="/tca-thecoa-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">TCA Thecoa font</a></h2> 499 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/thecoa-foundry" class="hover:text-gray-700">Thecoa Foundry</a></p> 500 </div> 501 </div> 502 </div> 503</li> 504 505 <li class="p-4 rounded-lg moveit"> 506 <div class="space-y-6"> 507 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 508 <a href="/svetze-font.html"> 509 <picture> 510 <source type="image/avif" srcset="/images/s/v/svetze-medium.avif"> 511 <source type="image/webp" srcset="/images/s/v/svetze-medium.webp"> 512 <img class="object-cover w-full rounded-lg shadow-cool" src="/images/s/v/svetze-medium.jpg" width="540" height="360" alt="Svetze"> 513 </picture> 514 </a> 515 </div> 516 <div> 517 <div class="font-medium el:push"> 518 <h2><a href="/svetze-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Svetze font</a></h2> 519 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/akhmad-reza-fauzi" class="hover:text-gray-700">Akhmad Reza Fauzi</a></p> 520 </div> 521 </div> 522 </div> 523</li> 524 525 <li class="p-4 rounded-lg moveit"> 526 <div class="space-y-6"> 527 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 528 <a href="/gafeniv-font.html"> 529 <picture> 530 <source type="image/avif" srcset="/images/g/a/gafeniv-medium.avif"> 531 <source type="image/webp" srcset="/images/g/a/gafeniv-medium.webp"> 532 <img class="object-cover w-full rounded-lg shadow-cool" src="/images/g/a/gafeniv-medium.jpg" width="540" height="360" alt="Gafeniv"> 533 </picture> 534 </a> 535 </div> 536 <div> 537 <div class="font-medium el:push"> 538 <h2><a href="/gafeniv-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Gafeniv font</a></h2> 539 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/irvan-r" class="hover:text-gray-700">Rvandtype</a></p> 540 </div> 541 </div> 542 </div> 543</li> 544 545 <li class="p-4 rounded-lg moveit"> 546 <div class="space-y-6"> 547 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 548 <a href="/hegarown-font.html"> 549 <picture> 550 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/h/e/hegarown-medium.avif"> 551 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/h/e/hegarown-medium.webp"> 552 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/h/e/hegarown-medium.jpg" width="540" height="360" alt="Hegarown"> 553 </picture> 554 </a> 555 </div> 556 <div> 557 <div class="font-medium el:push"> 558 <h2><a href="/hegarown-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Hegarown font</a></h2> 559 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/irvan-r" class="hover:text-gray-700">Rvandtype</a></p> 560 </div> 561 </div> 562 </div> 563</li> 564 565 <li class="p-4 rounded-lg moveit"> 566 <div class="space-y-6"> 567 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 568 <a href="/abolda-font.html"> 569 <picture> 570 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/a/b/abolda-medium.avif"> 571 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/a/b/abolda-medium.webp"> 572 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/a/b/abolda-medium.jpg" width="540" height="360" alt="Abolda"> 573 </picture> 574 </a> 575 </div> 576 <div> 577 <div class="font-medium el:push"> 578 <h2><a href="/abolda-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Abolda font</a></h2> 579 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/ilham-aji-saputro" class="hover:text-gray-700">Ilham Aji Saputro</a></p> 580 </div> 581 </div> 582 </div> 583</li> 584 585 <li class="p-4 rounded-lg moveit"> 586 <div class="space-y-6"> 587 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 588 <a href="/tussilago-font.html"> 589 <picture> 590 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/t/u/tussilago-medium.avif"> 591 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/t/u/tussilago-medium.webp"> 592 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/t/u/tussilago-medium.jpg" width="540" height="360" alt="Tussilago"> 593 </picture> 594 </a> 595 </div> 596 <div> 597 <div class="font-medium el:push"> 598 <h2><a href="/tussilago-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Tussilago font</a></h2> 599 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/typodermic-fonts" class="hover:text-gray-700">Typodermic Fonts</a></p> 600 </div> 601 </div> 602 </div> 603</li> 604 605 <li class="p-4 rounded-lg moveit"> 606 <div class="space-y-6"> 607 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 608 <a href="/machille-font.html"> 609 <picture> 610 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/m/a/machille-medium.avif"> 611 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/m/a/machille-medium.webp"> 612 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/m/a/ma
612chille-medium.jpg" width="540" height="360" alt="Machille"> 613 </picture> 614 </a> 615 </div> 616 <div> 617 <div class="font-medium el:push"> 618 <h2><a href="/machille-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Machille font</a></h2> 619 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/akhmad-reza-fauzi" class="hover:text-gray-700">Akhmad Reza Fauzi</a></p> 620 </div> 621 </div> 622 </div> 623</li> 624 625 <li class="p-4 rounded-lg moveit"> 626 <div class="space-y-6"> 627 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 628 <a href="/monimer-serif-font.html"> 629 <picture> 630 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/m/o/monimer_serif-medium.avif"> 631 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/m/o/monimer_serif-medium.webp"> 632 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/m/o/monimer_serif-medium.jpg" width="540" height="360" alt="Monimer Serif"> 633 </picture> 634 </a> 635 </div> 636 <div> 637 <div class="font-medium el:push"> 638 <h2><a href="/monimer-serif-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Monimer Serif font</a></h2> 639 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/mans-greback" class="hover:text-gray-700">Mans Greback</a></p> 640 </div> 641 </div> 642 </div> 643</li> 644 645 <li class="p-4 rounded-lg moveit"> 646 <div class="space-y-6"> 647 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 648 <a href="/folker-font.html"> 649 <picture> 650 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/f/o/folker-medium.avif"> 651 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/f/o/folker-medium.webp"> 652 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/f/o/folker-medium.jpg" width="540" height="360" alt="Folker"> 653 </picture> 654 </a> 655 </div> 656 <div> 657 <div class="font-medium el:push"> 658 <h2><a href="/folker-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Folker font</a></h2> 659 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/mega-type" class="hover:text-gray-700">Mega Type</a></p> 660 </div> 661 </div> 662 </div> 663</li> 664 665 <li class="p-4 rounded-lg moveit"> 666 <div class="space-y-6"> 667 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 668 <a href="/spheris-font.html"> 669 <picture> 670 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/s/p/spheris-medium.avif"> 671 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/s/p/spheris-medium.webp"> 672 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/s/p/spheris-medium.jpg" width="540" height="360" alt="Spheris"> 673 </picture> 674 </a> 675 </div> 676 <div> 677 <div class="font-medium el:push"> 678 <h2><a href="/spheris-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Spheris font</a></h2> 679 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/fernando-haro" class="hover:text-gray-700">deFharo</a></p> 680 </div> 681 </div> 682 </div> 683</li> 684 685 <li class="p-4 rounded-lg moveit"> 686 <div class="space-y-6"> 687 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 688 <a href="/fluctuation-font.html"> 689 <picture> 690 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/f/l/fluctuation-medium.avif"> 691 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/f/l/fluctuation-medium.webp"> 692 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/f/l/fluctuation-medium.jpg" width="540" height="360" alt="Fluctuation"> 693 </picture> 694 </a> 695 </div> 696 <div> 697 <div class="font-medium el:push"> 698 <h2><a href="/fluctuation-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Fluctuation font</a></h2> 699 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/typodermic-fonts" class="hover:text-gray-700">Typodermic Fonts</a></p> 700 </div> 701 </div> 702 </div> 703</li> 704 705 <li class="p-4 rounded-lg moveit"> 706 <div class="space-y-6"> 707 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 708 <a href="/maintanker-font.html"> 709 <picture> 710 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/m/a/maintanker-medium.avif"> 711 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/m/a/maintanker-medium.webp"> 712 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/m/a/maintanker-medium.jpg" width="540" height="360" alt="Maintanker"> 713 </picture> 714 </a> 715 </div> 716 <div> 717 <div class="font-medium el:push"> 718 <h2><a href="/maintanker-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Maintanker font</a></h2> 719 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/aswangga" class="hover:text-gray-700">Salamahtype - Aswangga</a></p> 720 </div> 721 </div> 722 </div> 723</li> 724 725 <li class="p-4 rounded-lg moveit"> 726 <div class="space-y-6"> 727 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 728 <a href="/getla-font.html"> 729 <picture> 730 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/g/e/getla-medium.avif"> 731 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/g/e/getla-medium.webp"> 732 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/g/e/getla-medium.jpg" width="540" height="360" alt="Getla"> 733 </picture> 734 </a> 735 </div> 736 <div> 737 <div class="font-medium el:push"> 738 <h2><a href="/getla-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Getla font</a></h2> 739 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/gilang-ternadho" class="hover:text-gray-700">Gilang Ternadho</a></p> 740 </div> 741 </div> 742 </div> 743</li> 744 745 <li class="p-4 rounded-lg moveit"> 746 <div class="space-y-6"> 747 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 748 <a href="/board-of-directors-font.html"> 749 <picture> 750 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/b/o/board_of_directors-medium.avif"> 751 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/b/o/board_of_directors-medium.webp"> 752 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/b/o/board_of_directors-medium.jpg" width="540" height="360" alt="Board of Directors"> 753 </picture> 754 </a> 755 </div> 756 <div> 757 <div class="font-medium el:push"> 758 <h2><a href="/board-of-directors-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Board of Directors font</a></h2> 759 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/typodermic-fonts" class="hover:text-gray-700">Typodermic Fonts</a></p> 760 </div> 761 </div> 762 </div> 763</li> 764 765 <li class="p-4 rounded-lg moveit"> 766 <div class="space-y-6"> 767 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 768 <a href="/reversal-font.html"> 769 <picture> 770 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/r/e/reversal-medium.avif"> 771 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/r/e/reversal-medium.webp"> 772 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/r/e/reversal-medium.jpg" width="540" height="360" alt="Reversal"> 773 </picture> 774 </a> 775 </div> 776 <div> 777 <div class="font-medium el:push"> 778 <h2><a href="/reversal-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Reversal font</a></h2> 779 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/typodermic-fonts" class="hover:text-gray-700">Typodermic Fonts</a></p> 780 </div> 781 </div> 782 </div> 783</li> 784 785 <li class="p-4 rounded-lg moveit"> 786 <div class="space-y-6"> 787 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 788 <a href="/tevlen-font.html"> 789 <picture> 790 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/t/e/tevlen-medium.avif"> 791 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/t/e/tevlen-medium.webp"> 792 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/t/e/tevlen-medium.jpg" width="540" height="360" alt="Tevlen"> 793 </picture> 794 </a> 795 </div> 796 <div> 797 <div class="font-medium el:push"> 798 <h2><a href="/tevlen-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Tevlen font</a></h2> 799 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/marclohner-com" class="hover:text-gray-700">Marc Lohner</a></p> 800 </div> 801 </div> 802 </div> 803</li> 804 805 <li class="p-4 rounded-lg moveit"> 806 <div class="space-y-6"> 807 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 808 <a href="/super-jello-font.html"> 809 <picture> 810 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/s/u/super_jello-medium.avif"> 811 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/s/u/super_jello-medium.webp"> 812 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/s/u/super_jello-medium.jpg" width="540" height="360" alt="Super Jello"> 813 </picture> 814 </a> 815 </div> 816 <div> 817 <div class="font-medium el:push"> 818 <h2><a href="/super-jello-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Super Jello font</a></h2> 819 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/super-mario-256-super-mario-256" class="hover:text-gray-700">
819fsuarez913</a></p> 820 </div> 821 </div> 822 </div> 823</li> 824 825 <li class="p-4 rounded-lg moveit"> 826 <div class="space-y-6"> 827 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 828 <a href="/nechlas-font.html"> 829 <picture> 830 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/n/e/nechlas-medium.avif"> 831 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/n/e/nechlas-medium.webp"> 832 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/n/e/nechlas-medium.jpg" width="540" height="360" alt="Nechlas"> 833 </picture> 834 </a> 835 </div> 836 <div> 837 <div class="font-medium el:push"> 838 <h2><a href="/nechlas-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Nechlas font</a></h2> 839 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/glyphminds-studios" class="hover:text-gray-700">Glyphminds Studios</a></p> 840 </div> 841 </div> 842 </div> 843</li> 844 845 <li class="p-4 rounded-lg moveit"> 846 <div class="space-y-6"> 847 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 848 <a href="/groste-font.html"> 849 <picture> 850 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/g/r/groste-medium.avif"> 851 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/g/r/groste-medium.webp"> 852 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/g/r/groste-medium.jpg" width="540" height="360" alt="Groste"> 853 </picture> 854 </a> 855 </div> 856 <div> 857 <div class="font-medium el:push"> 858 <h2><a href="/groste-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Groste font</a></h2> 859 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/gilang-ternadho" class="hover:text-gray-700">Gilang Ternadho</a></p> 860 </div> 861 </div> 862 </div> 863</li> 864 865 <li class="p-4 rounded-lg moveit"> 866 <div class="space-y-6"> 867 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 868 <a href="/metroway-font.html"> 869 <picture> 870 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/m/e/metroway-medium.avif"> 871 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/m/e/metroway-medium.webp"> 872 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/m/e/metroway-medium.jpg" width="540" height="360" alt="Metroway"> 873 </picture> 874 </a> 875 </div> 876 <div> 877 <div class="font-medium el:push"> 878 <h2><a href="/metroway-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Metroway font</a></h2> 879 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/dede-nugraha" class="hover:text-gray-700">Dede Nugraha</a></p> 880 </div> 881 </div> 882 </div> 883</li> 884 885 <li class="p-4 rounded-lg moveit"> 886 <div class="space-y-6"> 887 <div class="bg-gray-100 rounded-lg aspect-w-3 aspect-h-2 im:out"> 888 <a href="/profa-font.html"> 889 <picture> 890 <source class="lazyload" type="image/avif" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/p/r/profa-medium.avif"> 891 <source class="lazyload" type="image/webp" srcset="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-srcset="/images/p/r/profa-medium.webp"> 892 <img class="object-cover w-full rounded-lg shadow-cool lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjwvc3ZnPg==" data-src="/images/p/r/profa-medium.jpg" width="540" height="360" alt="Profa"> 893 </picture> 894 </a> 895 </div> 896 <div> 897 <div class="font-medium el:push"> 898 <h2><a href="/profa-font.html" class="text-base text-lg lg:text-xl text-main hover:text-main-dark">Profa font</a></h2> 899 <p class="mt-2 text-sm text-gray-500 md:mt-1 lg:text-base">by <a href="/author/eko-bimantara" class="hover:text-gray-700">Eko Bimantara</a></p> 900 </div> 901 </div> 902 </div> 903</li> 904 905 906 </ul> 907 908 909 </div> 910 911 <nav class="flex items-center justify-between pt-8" aria-label="Pagination"> 912 <div class="hidden sm:block"> 913 <p class="text-base text-gray-500"> 914 Showing
915 <span x-ref="from" class="font-medium">1</span> 916 to 917 <span x-ref="to" class="font-medium">21</span> 918 </p> 919 </div> 920 921 <div class="flex justify-between flex-1 sm:justify-end"> 922 <a href="" style="display:none" x-ref="prev" @click.prevent="p--" class="relative inline-flex items-center justify-center px-4 py-2 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-main"> 923 Previous 924 </a> 925 <a href="/basic-fonts/2" x-ref="next" @click.prevent="p++" class="relative inline-flex items-center justify-center px-4 py-2 ml-3 text-base font-medium text-white border border-transparent rounded-md bg-main hover:bg-main-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-main"> 926 Next 927 </a> 928 </div> 929 </nav> 930 931</div> 932 933 <footer aria-labelledby="footerHeading"> 934 <h2 id="footerHeading" class="sr-only">Footer</h2> 935 <div class="px-4 pb-8 mx-auto max-w-7xl sm:px-6 lg:px-8"> 936 <div x-data="nl()" class="py-8 border-t border-gray-200 xl:mt-0"> 937 <div x-show="data.code!=200" class="lg:flex lg:items-center lg:justify-between"> 938 <div> 939 <h3 class="mb-2 text-sm font-semibold tracking-wider uppercase text-main-dark"> 940 Subscribe to our newsletter 941 </h3> 942 <p class="text-base text-gray-500"> 943 The latest news, articles, and resources, sent to your inbox weekly. 944 </p> 945 </div> 946 <form @submit.prevent="nlAction()" class="mt-4 sm:flex sm:max-w-md lg:mt-0"> 947 <label for="nl_email" class="sr-only">Email address</label> 948 <input id="nl_email" name="nl_email" x-model="nl_email" aria-label="Email address" type="email" required class="w-full min-w-0 px-4 py-2 text-base text-gray-900 placeholder-gray-500 bg-white border border-gray-300 rounded-md appearance-none invalid:shadow-none focus:outline-none focus:ring-main focus:border-main focus:placeholder-gray-400 sm:max-w-xs" placeholder="Enter your email"> 949 <div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0"> 950 <button type="submit" class="flex items-center justify-center w-full px-4 py-2 text-base font-medium text-white border border-transparent rounded-md bg-main hover:bg-main-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-main"> 951 Subscribe 952 </button> 953 </div> 954 </form> 955 </div> 956 <div x-show="data.code==200" style="display:none" class="w-full p-2 leading-tight text-center" x-transition:enter="transition transform ease-out duration-1000" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"> 957 <div class="text-xl font-extrabold text-main lg:text-2xl" x-text="data.ln1"></div> 958 <div class="pt-2 text-sm text-gray-500 lg:text-base" x-text="data.ln2"></div> 959 </div> 960 </div> 961 <div class="grid-cols-5 pt-8 border-t border-gray-200 sm:grid"> 962 963 <div class="hidden col-span-4 sm:grid"> 964 <h3 class="mb-6 text-sm font-semibold tracking-wider uppercase text-main-dark"> 965 Categories 966 </h3> 967 </div> 968 969 <div class="hidden sm:grid"> 970 <h3 class="mb-6 text-sm font-semibold tracking-wider uppercase text-main-dark"> 971 Company 972 </h3> 973 </div> 974 975 <div class="hidden grid-cols-2 col-span-4 menu2 sm:grid ga
975p-x-4 md:grid-cols-4"> 976 977 <div> 978 <ul class="mb-4 space-y-4"> 979 <li> 980 <a href="/basic-fonts/serif-fonts"> 981 Serif fonts 982 </a> 983 </li> 984 <li> 985 <a href="/basic-fonts/sans-serif-fonts"> 986 Sans Serif fonts 987 </a> 988 </li> 989 <li> 990 <a href="/fancy-fonts/comic-fonts"> 991 Comic fonts 992 </a> 993 </li> 994 <li> 995 <a href="/fancy-fonts/cartoon-fonts"> 996 Cartoon fonts 997 </a> 998 </li> 999 <li> 1000 <a href="/fancy-fonts/groovy-fonts"> 1001 Groovy fonts 1002 </a> 1003 </li> 1004 <li> 1005 <a href="/fancy-fonts/techno-fonts"> 1006 Techno fonts 1007 </a> 1008 </li> 1009 <li> 1010 <a href="/fancy-fonts/typewriter-fonts"> 1011 Typewriter fonts 1012 </a> 1013 </li> 1014 </ul> 1015 </div> 1016 1017 <div> 1018 <ul class="mb-4 space-y-4"> 1019 <li> 1020 <a href="/fancy-fonts/distorted-eroded-fonts"> 1021 Distorted fonts 1022 </a> 1023 </li> 1024 <li> 1025 <a href="/fancy-fonts/stencil-army-fonts"> 1026 Stencil fonts 1027 </a> 1028 </li> 1029 <li> 1030 <a href="/fancy-fonts/retro-fonts"> 1031 Retro fonts 1032 </a> 1033 </li> 1034 <li> 1035 <a href="/fancy-fonts/gothic-fonts"> 1036 Gothic fonts 1037 </a> 1038 </li> 1039 <li> 1040 <a href="/fancy-fonts/decorative-fonts"> 1041 Decorative fonts 1042 </a> 1043 </li> 1044 <li> 1045 <a href="/fancy-fonts/fire-ice-fonts"> 1046 Fire / Ice fonts 1047 </a> 1048 </li> 1049 <li> 1050 <a href="/fancy-fonts/horror-fonts"> 1051 Horror fonts 1052 </a> 1053 </li> 1054 </ul> 1055 </div> 1056 1057 <div> 1058 <ul class="mb-4 space-y-4"> 1059 <li> 1060 <a href="/fancy-fonts/western-fonts"> 1061 Western fonts 1062 </a> 1063 </li> 1064 <li> 1065 <a href="/fancy-fonts/holiday-fonts"> 1066 Holiday fonts 1067 </a> 1068 </li> 1069 <li> 1070 <a href="/script-fonts/calligraphy-fonts"> 1071 Calligraphy fonts 1072 </a> 1073 </li> 1074 <li> 1075 <a href="/script-fonts/brush-fonts""> 1076 Brush fonts 1077 </a> 1078 </li> 1079 <li> 1080 <a href="/script-fonts/handwritten-fonts"> 1081 Handwritten fonts 1082 </a> 1083 </li> 1084 <li> 1085 <a href="/script-fonts/graffiti-fonts"> 1086 Graffiti fonts 1087 </a> 1088 </li> 1089 <li> 1090 <a href="/script-fonts/old-school-fonts"> 1091 Old School fonts 1092 </a> 1093 </li> 1094 </ul> 1095 </div> 1096 1097 <div> 1098 <ul class="mb-4 space-y-4"> 1099 <li> 1100 <a href="/script-fonts/trash-fonts"> 1101 Trash fonts 1102 </a> 1103 </li> 1104 <li> 1105 <a href="/miscellaneous-fonts/foreign-fonts"> 1106 Foreign fonts 1107 </a> 1108 </li> 1109 <li> 1110 <a href="/miscellaneous-fonts/various-fonts"> 1111 Various fonts 1112 </a> 1113 </li> 1114 </ul> 1115 </div> 1116 1117 </div> 1118 1119 <div class="mb-6 sm:hidden"> 1120 <h3 class="text-sm font-semibold tracking-wider up
1120percase text-main-dark"> 1121 Company 1122 </h3> 1123 </div> 1124 1125 <div class="grid grid-cols-1"> 1126 <div> 1127 <ul class="space-y-4"> 1128 <li> 1129 <a href="/privacy" class="text-base text-gray-500 hover:text-gray-900"> 1130 Privacy 1131 </a> 1132 </li> 1133 <li> 1134 <a href="/faq" class="text-base text-gray-500 hover:text-gray-900"> 1135 Faq 1136 </a> 1137 </li> 1138 <li> 1139 <a href="/contact" class="text-base text-gray-500 hover:text-gray-900"> 1140 Contact 1141 </a> 1142 </li> 1143 </ul> 1144 </div> 1145 </div> 1146 1147 </div> 1148 1149 <div class="pt-8 mt-4 text-center border-t border-gray-200 md:flex md:items-center md:justify-between"> 1150 <div class="flex justify-center space-x-6 md:order-2"> 1151 1152 <a href="https://twitter.com/fontpicks" target="_blank" rel="noopener" class="text-gray-400 hover:text-gray-500"> 1153 <span class="sr-only">Twitter</span> 1154 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> 1155 <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> 1156 </svg> 1157 </a> 1158 <a href="https://facebook.com/fontpicks" target="_blank" rel="noopener" class="text-gray-400 hover:text-gray-500"> 1159 <span class="sr-only">Facebook</span> 1160 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> 1161 <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path> 1162 </svg> 1163 </a> 1164 <a href="https://pinterest.com/fontpicks" target="_blank" rel="noopener" class="text-gray-400 hover:text-gray-500"> 1165 <span class="sr-only">Pinterest</span> 1166 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> 1167 <path d="M12 0a12 12 0 0 0-4.82 23c-.03-.85 0-1.85.21-2.76l1.55-6.54s-.39-.77-.39-1.9c0-1.78 1.03-3.1 2.32-3.1 1.09 0 1.62.81 1.62 1.8 0 1.09-.7 2.73-1.06 4.25-.3 1.27.63 2.31 1.89 2.31 2.27 0 3.8-2.92 3.8-6.38 0-2.63-1.77-4.6-4.99-4.6a5.68 5.68
11670 0 0-5.9 5.75c0 1.05.3 1.78.78 2.35.23.27.26.37.18.67l-.25.97c-.08.3-.32.4-.6.3-1.67-.69-2.46-2.52-2.46-4.59 0-3.4 2.88-7.5 8.58-7.5 4.58 0 7.6 3.32 7.6 6.88 0 4.7-2.62 8.22-6.48 8.22-1.3 0-2.51-.7-2.93-1.5l-.84 3.3c-.26.93-.76 1.86-1.21 2.58A11.99 11.99 0 0 0 24 12 12 12 0 0 0 12 0z"/> 1168 </svg> 1169 </a> 1170 <a href="https://instagram.com/fontpicks" target="_blank" rel="noopener" class="text-gray-400 hover:text-gray-500"> 1171 <span class="sr-only">Instagram</span> 1172 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> 1173 <path d="M16.98 0a6.9 6.9 0 0 1 5.08 1.98A6.94 6.94 0 0 1 24 7.02v9.96c0 2.08-.68 3.87-1.98 5.13A7.14 7.14 0 0 1 16.94 24H7.06a7.06 7.06 0 0 1-5.03-1.89A6.96 6.96 0 0 1 0 16.94V7.02C0 2.8 2.8 0 7.02 0h9.96zm.05 2.23H7.06c-1.45 0-2.7.43-3.53 1.25a4.82 4.82 0 0 0-1.3 3.54v9.92c0 1.5.43 2.7 1.3 3.58a5 5 0 0 0 3.53 1.25h9.88a5 5 0 0 0 3.53-1.25 4.73 4.73 0 0 0 1.4-3.54V7.02a5 5 0 0 0-1.3-3.49 4.82 4.82 0 0 0-3.54-1.3zM12 5.76c3.39 0 6.2 2.8 6.2 6.2a6.2 6.2 0 0 1-12.4 0 6.2 6.2 0 0 1 6.2-6.2zm0 2.22a3.99 3.99 0 0 0-3.97 3.97A3.99 3.99 0 0 0 12 15.92a3.99 3.99 0 0 0 3.97-3.97A3.99 3.99 0 0 0 12 7.98zm6.44-3.77a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8z"/> 1174 </svg> 1175 </a> 1176 <a href="https://dribbble.com/fontpicks" target="_blank" rel="noopener" class="text-gray-400 hover:text-gray-500"> 1177 <span class="sr-only">Dribbble</span> 1178 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> 1179 <path d="M23.76 9.58A11.99 11.99 0 0 0 0 12a12.08 12.08 0 0 0 3.51 8.49 12.12 12.12 0 0 0 6.07 3.27A11.99 11.99 0 0 0 24 12a12 12 0 0 0-.24-2.42zm-1.51 2.32c-.15-.03-3.62-.78-7.14-.34a38.64 38.64 0 0 0-.9-2.01c4.04-1.66 5.69-4.03 5.7-4.06a10.2 10.2 0 0 1 2.34 6.4zm-3.48-7.6c-.03.05-1.49 2.27-5.35 3.72a52.06 52.06 0 0 0-3.83-5.98 10.23 10.23 0 0 1 9.18 2.27zM7.63 2.74a61.6 61.6 0 0 1 3.8 5.9A37.91 37.91 0 0 1 1.97 9.9c.67-3.18 2.8-5.8 5.66-7.16zM1.75 12l.01-.32c.18 0 5.25.11 10.52-1.46.3.57.58 1.15.83 1.74l-.4.12c-5.53 1.79-8.34 6.76-8.34 6.76A10.21 10.21 0 0 1 1.76 12zM12 22.25a10.2 10.2 0 0 1-6.53-2.35l.23.18s1.97-4.29 8.04-6.4l.07-.02a42.64 42.64 0 0 1 2.2 7.78 10.2 10.2 0 0 1-4.01.8zm5.73-1.75c-.1-.62-.65-3.63-2-7.32 3.31-.53 6.18.38 6.39.45a10.26 10.26 0 0 1-4.4 6.87z"/> 1180 </svg> 1181 </a> 1182 <a href="https://behance.net/fontpicks" target="_blank" rel="noopener" class="text-gray-400 hover:text-gray-500"> 1183 <span class="sr-only">Behance</span> 1184 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> 1185 <path d="M18.53 8.12c5.77 0 5.08 6.08 5.05 6.28v.01h-7.51c0 2.7 2.55 2.52 2.55 2.52 2.33 0 2.33-1.46 2.32-1.55h2.56c0 4.13-4.97 3.85-4.97 3.85-5.95 0-5.57-5.54-5.57-5.54v-.02c0-.37.2-5.55 5.57-5.55zM.23 4.42h7.55c2.3 0 4.1 1.27 4.1 3.87s-2.2 2.76-2.2 2.76c2.91 0 2.7 3.6 2.7 3.6 0 4.06-3.88 4.27-4.51 4.28H.24V4.43h7.54H.24zm7.55 8.06H3.56v3.87h4.01c.6-.01 1.74-.19 1.74-1.88 0-1.87-1.32-1.99-1.5-2h-.02zm10.8-2.24c-2.16 0-2.52 2.09-2.54 2.23h4.76v-.02c0-.25-.11-2.21-2.21-2.21zM7.79 7H3.56v3.24h3.96c.68 0 1.29-.22 1.29-1.73 0-1.38-.86-1.5-1-1.5h-.02zM21.4 5.28v1.79h-5.98V5.28h5.98z"/> 1186 </svg> 1187 </a> 1188 1189 </div> 1190 <p class="mt-8 text-base text-gray-500 md:mt-0 md:order-1"> 1191 © 2026 FontPicks.com, All rights reserved. 1192 </p> 1193 </div> 1194 1195 </footer> 1196 1197 </body> 1198 1199</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.