streetgeek: quirky text

pages/streetgeek-1.html

@@ -5,6 +5,15 @@
     src: url("assets/font/aerosoldier.otf");
 }
 
+@font-face {
+    font-family: "COMPUTER Robot";
+    src: url("assets/font/computer-robot.ttf");
+}
+
+span.computer {
+    font-family: "COMPUTER Robot", monospace;
+}
+
 #streetgeek1-page {
     display: flex;
     flex-direction: column;
@@ -149,11 +158,11 @@
 
 <p>
     You might be wondering why I spent more time than usual at this time of the morning thinking
-    about what I'm wearing. Today, I am meeting my friend <i>ByteLord</i> for lunch at the vegan
-    restaurant <i>Cha-Ya</i> on Valencia. <i>ByteLord</i> is a one-of-a-kind genius level programmer
+    about what I'm wearing. Today, I am meeting my friend <span class="computer">ByteLord</span> for lunch at the vegan
+    restaurant <i>Cha-Ya</i> on Valencia. <span class="computer">ByteLord</span> is a one-of-a-kind genius level programmer
     that I met on an IRC channel one evening. This guy slings code so neat and clean, he puts Linus
     Torvalds and that guy who made the <i>McMaster-Carr</i> catalog website to shame. I had never
-    met <i>ByteLord</i> A.F.K. before. Therefore, needless to say, I felt intimidated and eager to
+    met <span class="computer">ByteLord</span> A.F.K. before. Therefore, needless to say, I felt intimidated and eager to
     please.
 </p>
 
@@ -161,14 +170,14 @@
 
 <p>
     I got to <i>Cha-Ya</i> a little bit early and ordered a green tea while waiting for
-    <i>ByteLord</i> to arrive. I spilled a little bit of this on my shirt as well. Unfortunately
+    <span class="computer">ByteLord</span> to arrive. I spilled a little bit of this on my shirt as well. Unfortunately
     now, mixed with the coffee stain from earlier, the combination gave off a toilet smell that was
-    quite unpleasant. I started praying that <i>ByteLord</i> had a cold and wouldn't be able to
+    quite unpleasant. I started praying that <span class="computer">ByteLord</span> had a cold and wouldn't be able to
     smell anything. Luckily the stains were still mostly invisible on my black t-shirt.
 </p>
 
 <p>
-    When <i>ByteLord</i> walked in the front door, I almost mistook him for one of those cool
+    When <span class="computer">ByteLord</span> walked in the front door, I almost mistook him for one of those cool
     hip-hopper guys. He was decked out from head to toe and looked <i>on fleek</i>.
 </p>
 

pages/streetgeek-2.html

@@ -5,6 +5,24 @@
     src: url("assets/font/aerosoldier.otf");
 }
 
+@font-face {
+    font-family: "COMPUTER Robot";
+    src: url("assets/font/computer-robot.ttf");
+}
+
+@font-face {
+    font-family: "TS Block Bold";
+    src: url("assets/font/ts-block-bold.ttf");
+}
+
+span.computer {
+    font-family: "COMPUTER Robot", monospace;
+}
+
+span.cyberwheel {
+    font-family: "TS Block Bold";
+}
+
 #streetgeek2-page {
     display: flex;
     flex-direction: column;
@@ -182,19 +200,19 @@
 </div>
 
 <p>
-    Besides the comfortable textiles, I was impressed with <i>ByteLord</i>'s choice of accessories.
+    Besides the comfortable textiles, I was impressed with <span class="computer">ByteLord</span>'s choice of accessories.
     A wallet chain, which I hadn't seen anyone wear since the mid 2000's, added a metallic balance
     to the lower half of his appearance. His neck was adorned with a necklace that didn't appear to
     serve any functional purpose, but matched the wallet chain quite nicely. Finally, he was wearing
     rather large, television-sized eyeglass frames. Frankly, I had never given much thought to
-    accessories in an outfit, unless they have some kind of microchip in them. But <i>ByteLord</i>
+    accessories in an outfit, unless they have some kind of microchip in them. But <span class="computer">ByteLord</span>
     had arranged them in such a way to make the outfit look effortless, yet stylish.
 </p>
 
 <p>
     We ordered <i>zaru soba</i> with <i>vegetable tempura</i> and spoke about various topics from
     cyberspace. After we finished talking about the guy that supposedly defaced fellow editor P. M.
-    Cho's website, we started talking about fashion. I was surprised to hear that <i>ByteLord</i>
+    Cho's website, we started talking about fashion. I was surprised to hear that <span class="computer">ByteLord</span>
     was quite into fashion on a deeply philosophical level. He explained to me that what you wear in
     meatspace is like the <i>graphical shell</i> for a person. A hacker should present himself to
     others in the same way that a computer program presents itself to users. You wouldn't want to
@@ -202,7 +220,7 @@
     command line interface.
 </p>
 
-<p> I paid for the <i>zaru soba</i> and <i>ByteLord</i> sent me some <i>SMARTCOIN</i> for his
+<p> I paid for the <i>zaru soba</i> and <span class="computer">ByteLord</span> sent me some <span class="cyberwheel">SMARTCOIN</span> for his
     portion. We parted ways, each walking opposite directions on Valencia street. After our meeting,
     I couldn't help but notice and observe all of the outfits people were wearing that day in the
     Mission. Thousands of distinct <i>graphical shells</i> all populating the virtual desktop that