We've built an example project that you can use as a boilerplate for your own site.
This method gives you complete control over the appearance of your site. The idea is to fetch data using our GraphQL API and render the result into your own HTML templates. Then add our Fontdue.js widgets to add the Cart, and optionally other interactive components.
We chose Python for this example since many type designers incorporate the language into their type design and production work. The Flask web framework is popular and a proven solution for building small websites, but it's possible to use your favorite web programming environment to build your site template (let us know if you'd like to see guides using other tools).
This guide is a work in progress, please get in touch to let us know what's missing
Install the example
This guide is intended for experienced developers. If you're a type designer interested in building your own site from scratch, we recommend either finding a web developer to work with or inquiring with us about our customization service.
- Go to fontdue/example-flask and click Use this template, and then clone your new repo to your computer.
- Follow the README file from the project to install the dependencies and get the server running.
- Enable Cross-origin API access for
Take a moment to explore the structure of the project. It will look a bit like this:
.flaskenv Pipfile Pipfile.lock README.md index.py vercel.json app/ __init__.py config.py graphql.py routes.py utils.py queries/ font.graphql index.graphql layout.graphql page.graphql static/ app.css templates/ 404.html font.html helpers.html index.html layout.html page.html
The project setup roughly follows the first few steps of The Flask Mega-Tutorial with a few of our own additions. If you're not familiar with Flask, you may find that tutorial useful.
Environment variables. Change
FONTDUE_URL to your own Fontdue site URL
Defines the for your site, as well as logic for querying data and which HTML templates to render
This is a custom Flask route decorator we included to make it easy to perform the GraphQL queries. The decorator looks for queries defined in the
queries directory and performs the query each time a user visits the page.
The names of files in the
queries directory match some of the
templates. It's not strictly necessary, but it makes it easy to see which queries populate which templates.
font.graphql query defines a
$slug variable. The decorator will pass any route parameters to the query as variables, which we defined on the font route:
You may specify more than one query for each route. The second parameter defines the name of the keyword argument that gets passed to your route handler. The default keyword argument containing the data is
data. You can see we've defined a query called
layout which is the data required for the site layout (container) template. Another use-case would be querying for a list of
pages to populate site navigation.
We put a simple CSS file here for demonstration. You may write CSS and JS this way or use modern tooling such as Webpack, PostCSS, SASS, and so on. That's an exercise left to the reader.
Flask uses Jinja for templating. This is a great resource for the template syntax:
Template Designer Documentation - Jinja Documentation (2.11.x)
This document describes the syntax and semantics of the template engine and will be most useful as reference to those creating Jinja templates. As the template engine is very flexible, the configuration from the application can be slightly different from the code presented here in terms of delimiters and behavior of undefined values.
Deploy to Vercel
We chose Vercel for this example because they make it easy to deploy Python services to their Serverless network.
Import your project to Vercel (choose the GitHub integration)
Choose the root directory
Under Build and Output Settings, uncheck Override on all fields.
Add an environment variable
FONTDUE_URL which is the full URL of your Fontdue site, e.g.
(Don't include a trailing slash)
Then click Deploy