Skip to content

Instantly share code, notes, and snippets.

@rg3915

rg3915/index.html

Forked from aaizemberg/index.html
Created September 16, 2024 06:47
Show Gist options
  • Save rg3915/f47389fc7ead0b052f8426b9fc37e32e to your computer and use it in GitHub Desktop.
Save rg3915/f47389fc7ead0b052f8426b9fc37e32e to your computer and use it in GitHub Desktop.
Download ZIP
xkcd font
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>xkcd font</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
<style>
@font-face {
font-family: xkcd;
src: url('https://cdn.rawgit.com/ipython/xkcd-font/master/xkcd-script/font/xkcd-script.woff') format('woff');
}
.xkcd {
font-family: xkcd;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="60"></canvas>
<br>
<script>
WebFont.load({
custom: {
families: ['xkcd']
},
active: function() {
draw();
}
});
function draw() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "2em xkcd";
ctx.fillText("Using the xkcd font (html5 canvas)",0,30);
}
</script>
<svg width="600" height="40">
<text x="0" y="30" font-family="xkcd" font-size="2em">
Using the xkcd font (SVG)
</text>
</svg>
<h1 class='xkcd'>Using the xkcd font (HTML)</h1>
<p class='xkcd'>more info: <a href='https://github.com/ipython/xkcd-font'>https://github.com/ipython/xkcd-font</a></p>
<hr>
<h2 class='xkcd'>What is Lorem Ipsum?</h2>
<p class='xkcd'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>
@rg3915
Copy link
Author

rg3915 commented Sep 16, 2024 •
edited
Loading

Try this with PicoCSS

<!DOCTYPE html>
<html data-theme="light">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>xkcd font</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
  <style>
    @font-face {
        font-family: xkcd;
        src: url('https://cdn.rawgit.com/ipython/xkcd-font/master/xkcd-script/font/xkcd-script.woff') format('woff');
    }
    .xkcd {
      font-family: xkcd;
    }
  </style>
</head>

<body class="xkcd">
  <main class="container">
    <h1 class="xkcd">Using the xkcd font (HTML)</h1>

    <p>Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem repudiandae magni, saepe qui eveniet earum harum, dolorem inventore pariatur nemo sed, aspernatur asperiores amet rem modi odit, eos quod! Sunt.</p>

    <form
      action=""
     
    >
      <label for="">Name</label>
      <input
       
        type="text"
      />
      <label for="">Options</label>
      <select>
        <option>------------</option>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
        <option>Four</option>
        <option>Five</option>
      </select>
    </form>

    <table>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Smith</td>
        <td>30</td>
        <td>London</td>
      </tr>
      <tr>
        <td>Michael</td>
        <td>Johnson</td>
        <td>35</td>
        <td>Paris</td>
      </tr>
      <tr>
        <td>Emily</td>
        <td>Davis</td>
        <td>28</td>
        <td>Tokyo</td>
      </tr>
    </table>
  </main>
</body>

</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment