Web fonts repository
A simple webfont hosting inspired by Google Fonts.
It runs on your server, stores and distributes webfont files and generates CSS on-the-go for embedding fonts on web pages., (*2)
- HTTP server supporting PHP ≥ 7.0
Composer (required for installation)
1. Download the source code
Run the following code in the console:, (*3)
composer create-project finesse/web-fonts-repository webfonts
webfonts is a path to a directory where the repository should be installed., (*4)
Or you can make some things manually:, (*5)
- Download the source code from GitHub and extract it.
- Open a terminal and go to the source code root.
- Install the libraries by running in the terminal:
- Prepare the repository by running in the terminal:
composer run-script post-create-project-cmd
2. File permissions
Give the user behalf which the web server runs permissions to write inside the
logs directory., (*6)
You can just run this in the console:, (*7)
# Don't do it in production!
chmod 777 logs
3. Web server
Make the directory
public be the document root of the web server.
Or just open http://localhost/public if you installed the repository to the web server root., (*8)
Make all the requests to not-existing files be handled by
If your server is Apache, it's already done., (*9)
Make the server add the
Access-Control-Allow-Origin: * HTTP-header to the font files.
Otherwise some browsers will reject using fonts from the repository.
* Apache: all you need to do is to make sure that the
mod_header.c module is on
a2enmod headers command and restart the server to turn it on).
* Nginx: use this instruction., (*10)
Put your font files (woff, woff2, ttf, otf, eot, svg) to the
public/fonts directory. You may separate them by subdirectories.
You can convert webfont files using Transfonter., (*11)
All settings go to the file
If you don't have it, copy it from the file
Whether errors details should be sent to browser. Anyway errors are written to the file
You should turn it off on production server., (*14)
How many messages should be logged to the file.
The value is one of the
You can read more about log levels here., (*15)
The list of fonts available in the repository. Simple example:, (*16)
'fonts' => [
'Open Sans' => [
'styles' => [
'300' => 'OpenSans/opensans-light.*',
'300i' => 'OpenSans/opensans-light-italic.*',
'400' => 'OpenSans/opensans-regular.*',
'400i' => 'OpenSans/opensans-regular-italic.*',
'Roboto' => [
'styles' => [
'300' => 'Roboto/roboto-light.*',
'400' => 'Roboto/roboto-regular.*',
'500' => 'Roboto/roboto-medium.*',
'700' => 'Roboto/roboto-bold.*',
fonts array keys are the font families names. The
styles arrays keys are the styles names.
The numbers in the style names are the font weights,
i stands for italic., (*17)
The font file paths are given relative to the
The file paths are the glob search patterns.
It means that the repository should consider all files matching the pattern as font files., (*18)
You can find more examples and possibilities here., (*19)
<link> tag to the HTML code of the page on which you want to embed a font:, (*20)
<link rel="stylesheet" href="http://web-fonts-repository.local/css?family=Open+Sans:400,400i,700,700i|Roboto:300,400" />
http://web-fonts-repository.local is the root URL of an installed web fonts repository., (*21)
The required fonts are specified the same way as on Google Fonts. Font families are divided by
|, families styles
are divided by
,, family name is separated from styles list using
You may omit the styles list. In this case the regular style (
400) is used., (*23)
<link rel="stylesheet" href="http://web-fonts-repository.local/css?family=Open+Sans" />
You can specify a value for the font-display
style property using
display parameter. Example:, (*24)
<link rel="stylesheet" href="http://web-fonts-repository.local/css?family=Open+Sans&display=swap" />
Then embed a font in a CSS code:, (*25)
font-family: 'Open Sans', sans-serif;
The project follows the Semantic Versioning., (*26)
It means that patch versions are fully compatible (i.e. 1.2.1 and 1.2.2), minor versions are backward compatible
(i.e. 1.2.1 and 1.3.2) and major versions are not compatible (i.e. 1.2.1 and 3.0).
The pre-release versions (0.*) are a bit different: patch versions are backward compatible and minor versions are not
MIT. See the LICENSE file for details., (*28)