This is an example implementation to showcase how TypeRoof can live update fonts that have changed e.g. within a font editor or on your hard-drive. The idea is for font editors to pick this up and to provide the feature built in for their users.
For font editor implementers or if you are interested in technical details, see the technical documentation at: Developer Kit – Live font changes
If your font editor does not yet implement font updates in TypeRoof directly or if you just want to try it out in another scenario you can use these scripts to monitor fonts in a local folder/directory on your computer and send update messages to TypeRoof, the Run with WebSocket example is better suited for this case, as the polling example has cross-orign limitations and the polling adapter reqiures a (hard-coded) list of known file names to poll.
You need to do this only in order to use the websocket-font-update-server.py
and file_rotation.py scripts.
This installation procedure recommends to use a python virtual environment in order to keep the system/user python installation unaffected.
# Initialize a python virtual environmnet in the TypeRoof/live directory.
$ ~/path/to/TypeRoof/live> python3 -m venv venv
$ (venv)~/path/to/TypeRoof/live>
# Activate the virtual environment.
$ ~/path/to/TypeRoof/live> . venv/bin/activate
$ (venv)~/path/to/TypeRoof/live>
# Install the dependencies into the virtual environment.
$ (venv)~/path/to/TypeRoof/live> pip install -r requirements.txtIn order to connect any source of font changes and TypeRoof we load a
web-page, called an Adapter, that in turn opens TypeRoof as a
pop-up or in an iframe. That relation enables the usage of the window.postMessage
API to send messages with font updates from the Adapter to TypeRoof.
For the pop-up/new tab versions At the first time you open an adapter pop-ups will be blocked in your browser. You’ll have to allow pop-ups and then reload the page of the adapter again to successfully establish the connection.
In the window of the adapter page you’ll also be able to observe the currently provided fonts and how they change.
For the iframe versions these open an <iframe> and make it cover the
full document, theres’s no new window, the separation between the adapter
and the app is hidden.
There are two or three individual steps involved:
This will start a WebSocket-server at ws://localhost:8765/ where the
page adapter-websocket-to-typeroof.html (see Part 2)
can connect to.
You’ll need a directory to observe for font-changes, to test this, go to
Part 3: File Rotation first and run the file
rotation which will create the fonts directory.
# With the activated virtual environment.
$ (venv)~/path/to/TypeRoof/live> ./websocket-font-update-server.py fonts/See Adapters Usage.
The adapter is also online at our web site and since WebSockets don’t require special cross-site allowance in the browser (the server is required to check), the online adapter is able to connect to the server started in WebSocket Part 1: Server.
Alternatively, you can start a simple web-server to deliver the file:
# You don't need the virtual environment for this
$ ~/path/to/TypeRoof/live> python3 -m http.server 8000
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
There are two or three individual steps involved:
Start a simple web-server. NOTE: there are cross-origin restrictions involved with this technique, which is why the adapter and the polling must come from the same origin or the server would have to send Cross-Origin Resource Sharing (CORS) headers.
# You don't need the virtual environment for this
$ ~/path/to/TypeRoof/live> python3 -m http.server 8000
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
See Adapters Usage.
Since the web server is already started you only need to open http://0.0.0.0:8000/adapter-polling-to-typeroof.html in your browser.
The main purpose of this adapter is to serve as an example, thus there are some assumptions hard-coded into this adapter:
live-font.ttfYou can change these assumptions in the JavaScript of the adapter, but for general usage the Run with WebSocket example might be working out of the box.
See All Adapters Usage.
This is optional as a demo. To observe file changes created e.g. by a font-editor, Part 1 and Part 2 are sufficient.
If you don’t have a source directory for a changing font file that you want to see updated in TypeRoof, i.e. a font updated by an editor or build process, this script can “rotate” all font files from a source directory into a single file in a target directory and thus trigger file-change events.
# With the activated virtual environment.
# Rotate the files in "../lib/assets/fonts/*" as "live-font.ttf" in "the"
# ./fonts directory every two seconds. NOTE especially the `-f` flag
# that is meant as safeguard to prevent accidental change to essential
# data.
$ (venv)~/path/to/TypeRoof/live> ./file_rotation.py -f -s 2 -t live-font.ttf ./fonts/ ../lib/assets/fonts/*
# There's an online help in the tool:
$ (venv)~/path/to/TypeRoof/live> ./file_rotation.py
usage: file_rotation.py [-h] [-t TARGET_FILE_NAME] [-f] [-s SECONDS] target_dir source_files [source_files ...]
Rotate font files between target dir and the source directories.
positional arguments:
target_dir Target directory name, will be created. Use --force if it exist and its contents can be overridden.
source_files Paths to each source files. Each file path will function as a source for the contents in target dir in rotation.
options:
-h, --help show this help message and exit
-t TARGET_FILE_NAME, --target-file TARGET_FILE_NAME
Target file name, must not contain the slash character"/" (default: SampleFont.ttf)
-f, --force If target_dir exists, allow to change its contents.
-s SECONDS, --seconds SECONDS
number of seconds between rotations (default: 7)