diff --git a/.gitignore b/.gitignore
index 25c8fdb..c2d264a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-package-lock.json
\ No newline at end of file
+package-lock.json
+dev.html
\ No newline at end of file
diff --git a/card.js b/card.js
index f929e26..653238c 100644
--- a/card.js
+++ b/card.js
@@ -3,11 +3,16 @@ const { getScreenshot } = require('./chromium');
 const { getHtml } = require('./template');
 const { writeTempFile, pathToFileURL } = require('./file');
 
-module.exports = async function (req, res) {
+async function handler(req, res) {
     try {
-        let { type = 'png', text = 'Hello' } = parseRequest(req);
+        let {
+            type = 'png',
+            text = 'Hello',
+            fontWeight = 'bold',
+            image = 'now-black',
+        } = parseRequest(req);
         const name = decodeURIComponent(text);
-        const html = getHtml(name);
+        const html = getHtml(name, fontWeight, image);
         const filePath = await writeTempFile(name, html);
         const fileUrl = pathToFileURL(filePath);
         const file = await getScreenshot(fileUrl, type);
@@ -23,3 +28,12 @@ module.exports = async function (req, res) {
     }
 };
 
+
+if (!process.env.NOW_REGION) {
+    const { createServer } = require('http');
+    const PORT = process.env.PORT || 3000;
+    const listen = () => console.log(`Listening on ${PORT}...`);
+    createServer(handler).listen(PORT, listen);
+}
+
+module.exports = handler;
\ No newline at end of file
diff --git a/dev.js b/dev.js
deleted file mode 100644
index c863d0c..0000000
--- a/dev.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const { createServer } = require('http');
-const PORT = 3000;
-const handleServer = require('./card');
-const handleListen = () => console.log(`Listening on ${PORT}...`);
-createServer(handleServer).listen(PORT, handleListen);
\ No newline at end of file
diff --git a/fonts/Inter-UI-Bold.woff2 b/fonts/Inter-UI-Bold.woff2
new file mode 100644
index 0000000..70e5f00
Binary files /dev/null and b/fonts/Inter-UI-Bold.woff2 differ
diff --git a/fonts/Inter-UI-Regular.woff2 b/fonts/Inter-UI-Regular.woff2
new file mode 100644
index 0000000..e75fb70
Binary files /dev/null and b/fonts/Inter-UI-Regular.woff2 differ
diff --git a/package.json b/package.json
index cc03941..bdc8208 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "Generate an open graph image for twitter/facebook/etc",
   "main": "card.js",
   "scripts": {
-    "dev": "node dev.js"
+    "start": "node card.js"
   },
   "author": "styfle",
   "repository": "github:styfle/og-image",
diff --git a/parser.js b/parser.js
index 9c63d3d..cfe9261 100644
--- a/parser.js
+++ b/parser.js
@@ -1,12 +1,13 @@
 const { parse } = require('url');
 
 function parseRequest(req) {
-    const { pathname = '/' } = parse(req.url);
-    console.log('Hit ' + pathname);
+    const { pathname = '/', query = {} } = parse(req.url, true);
+    const { fontWeight, image } = query;
+    console.log('Hit ' + pathname, query);
     const arr = pathname.slice(1).split('.');
     const type = arr.pop();
     const text = arr.join('.');
-    return { type, text };
+    return { type, text, fontWeight, image };
 }
 
 module.exports = { parseRequest }
\ No newline at end of file
diff --git a/template.js b/template.js
index 5432185..c81521f 100644
--- a/template.js
+++ b/template.js
@@ -1,42 +1,62 @@
 
-const logo = 'https://assets.zeit.co/image/upload/front/assets/design/now-black.svg';
+const { readFileSync } = require('fs');
 
-const css = `
-@import url('https://rsms.me/inter/inter-ui.css');
-html { font-family: 'Inter UI', sans-serif; }
-@supports (font-variation-settings: normal) {
-  html { font-family: 'Inter UI var alt', sans-serif; }
+/**
+ * 
+ * @param {'bold' | 'normal'} fontWeight 
+ */
+function getCss(fontWeight) {
+    const regular = `${__dirname}/fonts/Inter-UI-Regular.woff2`;
+    const bold = `${__dirname}/fonts/Inter-UI-Bold.woff2`;
+    const buffer = readFileSync(fontWeight === 'bold' ? bold : regular);
+    const base64 = buffer.toString('base64');
+    return `
+    @font-face {
+        font-family: 'Inter UI';
+        font-style:  normal;
+        font-weight: ${fontWeight};
+        src: url(data:font/woff2;charset=utf-8;base64,${base64}) format('woff2');
+    }
+
+    body {
+        background: white;
+        background-image: radial-gradient(lightgray 5%, transparent 0);
+        background-size: 100px 100px;
+        height: 100vh;
+        display: flex;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .logo {
+        width: 225px;
+        height: 225px;
+    }
+
+    .spacer {
+        margin: 150px;
+    }
+    
+    .heading {
+        font-family: 'Inter UI', sans-serif;
+        font-size: 75px;
+        font-style: normal;
+        font-weight: ${fontWeight};
+    }`;
 }
 
-body {
-    background: white;
-    background-image: radial-gradient(lightgray 5%, transparent 0);
-    background-size: 100px 100px;
-    height: 100vh;
-    display: flex;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-}
-
-.logo {
-    width: 225px;
-    height: 225px;
-}
-
-.spacer {
-    margin: 150px;
-}
-  
-.heading {
-    font-size: 75px;
-    font-weight: bold;
-}`;
-
-function getHtml(text) {
+/**
+ * 
+ * @param {string} text 
+ * @param {'bold' | 'normal'} fontWeight 
+ * @param {'now-black' | 'now-white' | 'zeit-black-triangle' | 'zeit-white-triangle'} image 
+ */
+function getHtml(text, fontWeight, image) {
+    const logo = `https://assets.zeit.co/image/upload/front/assets/design/${image}.svg`;
     return `<html>
     <style>
-        ${css}
+        ${getCss(fontWeight)}
     </style>
     <body>
         <div>