PageSourceSearch

https://fontpicks.com/basic-fonts

html fontpicks.com collected 2026-10-04 11:24:41 UTC 83,748 bytes, 1,199 lines download raw bytes

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                    &copy; 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.