Editor :

<head>
  <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;600&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=B612+Mono&family=Share+Tech+Mono&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Cousine&display=swap" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap" rel="stylesheet"/>
  <style>
    body { font: normal 400px 14px 'Arial','Helvetica',sans-serif;}
    .demoFont > div {padding:10px 10px; margin:5px 0; border:2px inset #ddd}
    .demoFont > div p {color: green}.demoFont > div b{color: #880000}.blue{color:blue}
    .demoFont > div span:before{content:'\02c2'}.demoFont > div span:after{content:'\02c3'}
    .demoFont > div b:before{content:'\2033'}.demoFont > div b:after{content:'\2033'}
  .consola {font-family: 'Inconsolata', monospace!important;font-weight:bold;}
  .space {font-family: 'Space Mono', monospace!important;font-weight:bold;}
  .azeret{font-family: 'Azeret Mono', monospace!important;}
  .hat {font-family: 'Azeret Mono', monospace!important;}
  .b612 {font-family: 'B612 Mono', monospace!important;font-weight:bold;}
  .syne {font-family: 'Syne Mono', monospace!important;font-weight:bold;}
  .nova {font-family: 'Nova Mono', monospace!important;font-weight:bold;}
  .cousine {font-family: 'Cousine', monospace!important;font-weight:bold;}
  .VT323 {font-family: 'VT323', monospace;font-size:20px!important}
  .tech {font-family: 'Share Tech Mono', monospace!important;font-weight:bold;}
  .fira  {font-family: 'Fira Code', monospace!important;font-weight:bold;}
  </style>
</head>
<body class='demoFont'>
  <div class='consola'>
    <h2>Font Family <b>Inconsolata</b></h2>
    <p>1234567890 <abc/> {def} (ghi) "jkl" 'mno' pqrstuvwxyz</p>
    <div class='blue'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  </div>
  <div class='space'>
    <h2>Font Family <b>Space Mono</b></h2>
    <p>1234567890 <span>abc/</span> {def} (ghi) "jkl" 'mno' pqrstuvwxyz</p>
    <div class='blue'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  </div>
  <div class='azeret'>
    <h2>Font Family <b>Azeret Mono</b></h2>
    <p>1234567890 <span>abc/</span> {def} (ghi) "jkl" 'mno' pqrstuvwxyz</p>
    <div class='blue'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  </div>
  <div class='hat'>
    <h2>Font Family <b>Red Hat Mono</b></h2>
    <p>1234567890 <span>abc/</span> {def} (ghi) "jkl" 'mno' pqrstuvwxyz</p>
    <div class='blue'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  </div>
  <div class='b612'>
    <h2>Font Family <b>B612</b></h2>
    <p>1234567890 <span>abc/</span> {def} (ghi) "jkl" 'mno' pqrstuvwxyz</p>
    <div class='blue'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  </div>
  <div class='syne'>
    <h2>Font Family <b>Syne Mono</b></h2>
    <p>1234567890 <span>abc/</span> {def} (ghi) "jkl" 'mno' pqrstuvwxyz</p>
    <div class='blue'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  </div>
  <div class='nova'>
    <h2>Font Family <b>Nova Mono</b></h2>
    <p>1234567890 <span>abc/</span> {def} (ghi) "jkl" 'mno' pqrstuvwxyz</p>
    <div class='blue'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  </div>
  <div class='cousine'>
    <h2>Font Family <b>Cousine</b></h2>
    <p>1234567890 <span>abc/</span> {def} (ghi) "jkl" 'mno' pqrstuvwxyz</p>
    <div class='blue'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  </div>
  <div class='VT323'>
    <h2>Font Family <b>VT323</b></h2>
    <p>1234567890 <span>abc/</span> {def} (ghi) "jkl" 'mno' pqrstuvwxyz</p>
    <div class='blue'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  </div>
  <div class='tech'>
    <h2>Font Family <b>Share Tech Mono</b></h2>
    <p>1234567890 <span>abc/</span> {def} (ghi) "jkl" 'mno' pqrstuvwxyz</p>
    <div class='blue'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  </div>
  <div class='fira'>
    <h2>Font Family <b>Fira Code</b></h2>
    <p>1234567890 <span>abc/</span> {def} (ghi) "jkl" 'mno' pqrstuvwxyz</p>
    <div class='blue'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  </div>
</body>

Hasil :

Coding Blogger Nomor otomatis di HTML

HTML Demo

Font Monospace Family