brick - Open-source webfont service

  •        18

In the age of the Internet, we've found ourselves in yet another typographic battle. In an effort to speed up loading times, we've compressed fonts, and along the way, we've lost the majority of the quality of rendered type. Let's change that. The fonts served by Brick are clones of the original, converted without modification to several formats for wider browser compatibility.

http://brick.im
https://github.com/alfredxing/brick

Tags
Implementation
License
Platform

   




Related Projects

webfontloader - Web Font Loader gives you added control when using linked fonts via @font-face.

  •    Javascript

Web Font Loader gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. The Web Font Loader is able to load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts. It is co-developed by Google and Typekit. To use the Web Font Loader library, just include it in your page and tell it which fonts to load. For example, you could load fonts from Google Fonts using the Web Font Loader hosted on Google Hosted Libraries using the following code.

web-font-loading-recipes - A bunch of demos for different web font loading strategies

  •    HTML

A bunch of demos for different web font loading strategies. Some of these are included on A Comprehensive Guide to Font Loading Strategies, some of them are more experimental. As web fonts are a progressive enhancement and with increasing support for the CSS Font Loading API, we can look forward to a time in which we won’t need to inline a polyfill into the header (for even faster font loading). The simplified CSS Font Loading API recipes are the defaults, but polyfilled versions are included for broader browser support. In practice this means only the polyfilled versions will show web fonts in Internet Explorer and Edge web browsers (which do not have support for the CSS Font Loading API).

fontfaceobserver - Webfont loading. Simple, small, and efficient.

  •    Javascript

Font Face Observer is a small @font-face loader and monitor (3.5KB minified and 1.3KB gzipped) compatible with any webfont service. It will monitor when a webfont is loaded and notify you. It does not limit you in any way in where, when, or how you load your webfonts. Unlike the Web Font Loader Font Face Observer uses scroll events to detect font loads efficiently and with minimum overhead. The FontFaceObserver constructor takes two arguments: the font-family name (required) and an object describing the variation (optional). The object can contain weight, style, and stretch properties. If a property is not present it will default to normal. To start loading the font, call the load method. It'll immediately return a new Promise that resolves when the font is loaded and rejected when the font fails to load.

glyphhanger - Your web font utility belt

  •    Javascript

Your web font utility belt. It shows what unicode-ranges are used on a web site (optionally for a font-family or for each font-family). It can also subset web fonts. It makes julienne fries. Available on npm.

3270font - A 3270 font in a modern format

  •    Makefile

This font is derived from the x3270 font, which, in turn, was translated from the one in Georgia Tech's 3270tool, which was itself hand-copied from a 3270 series terminal. I built it because I felt terminals deserve to be pretty. The .sfd font file contains a x3270 bitmap font that was used for guidance. If you are running Debian or Ubuntu and you don't want to mess with building your font files, you can simply apt-get install fonts-3270 (It's available from the Debian (https://packages.debian.org/sid/fonts/fonts-3270) and Ubuntu (http://packages.ubuntu.com/zesty/fonts-3270) package repos at https://packages.debian.org/sid/fonts/fonts-3270 and http://packages.ubuntu.com/xenial/fonts/fonts-3270, although the packaged version may not be the latest version, but it's good enough for most purposes. For those who don't have the luxury of a proper system-managed package, Adobe Type 1, TTF, OTF and WOFF versions are available for download on http://s3.amazonaws.com/3270font/3270_fonts_b3b4b7d.zip (although this URL may not always reflect the latest version).


metapolator - Design fonts and font families faster

  •    Javascript

Metapolator will be a web-based parametric font editor, providing a GUI for designing with UFO fonts and Metafont technologies. Metapolator is intended for type designers to design large font families faster, and for typographically sensitive graphic designers to adjust their libre fonts for their exact needs. For example, expanding a single style design into a family of weights and widths, or fine-tuning the weight and width of a font for your exact needs. Metapolator first provides a typical 'super' interpolation system that works with unlimited numbers of masters and axes, and will load and save normal UFO fonts.

nerd-fonts - :abcd: Iconic font aggregator, collection, and patcher

  •    CSS

Nerd Fonts is a project that patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular 'iconic fonts' such as Font Awesome ➶, Devicons ➶, Octicons ➶, and others.

Brick - UI Web Components for Modern Web Apps

  •    Javascript

Brick is a collection of UI components designed for the easy and quick building of web application UIs. Brick components are built using the Web Components standard to allow developers to describe the UI of their app using the HTML syntax they already know.

font-style-matcher - ⚡️🎨 Matches the x-heights and widths of two fonts

  •    HTML

If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths [1].

fontisto - The iconic font and CSS toolkit

  •    CSS

Fontisto is a full suite of 616+ pictographic icons for easy scalable vector graphics on websites, created and maintained by Kenan Gündoğan. Stay up to date with the latest release and announcements on Twitter: @fontisto. Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.

Fonts - Font files available from Google Fonts

  •    Typeface

This project contains the binary font files served by Google Fonts. The top level directories indicate the license of all files found within them. Subdirectories are named according to the family name of the fonts within. Each family subdirectory contains the .ttf font files served by Google Fonts, plus a METADATA.pb file with metadata for the family, and a DESCRIPTION.en_us.html with a description of the family in US English.

source-serif-pro - Serif typeface for setting text. Designed to complement Source Sans Pro

  •    Shell

Source Serif Pro is a set of OpenType fonts to complement the Source Sans Pro family. In addition to functional OpenType fonts, this open source repository provides all of the source files that were used to build them using the Adobe Font Development Kit for OpenType (AFDKO). To build the binary font files from source, you need to have the Adobe Font Development Kit for OpenType (AFDKO) installed. The AFDKO tools are widely used for font development today, and are part of most font editor applications.

Redacted-Font - Keep your wireframes free of distracting Lorem Ipsum.

  •    HTML

Keep your wireframes free of distracting Lorem Ipsum. Look in the fonts/ directory for the desktop fonts, and the fonts/web/ directory for the web fonts.

google-font-download - Locally host Google's web fonts

  •    Shell

This is a small shell script that allows you to download Google's web fonts to your local file system. Additionally, a CSS file that uses your local copy of the fonts is generated. You may want to use this if you want to avoid requesting resources from 3rd party servers (for example for privacy reasons or because you do not have a connection to the public internet). The script is released under the 2-clause BSD license. The SPDX identifier of this license is BSD-2-Clause. See the LICENSE file for the terms.

source-code-pro - Monospaced font family for user interface and coding environments

  •    Python

Source Code Pro is a set of OpenType fonts that have been designed to work well in user interface (UI) environments. In addition to a functional OpenType font, this open source project provides all of the source files that were used to build this OpenType font by using the AFDKO makeotf tool. To build the binary font files from source, you need to have installed the Adobe Font Development Kit for OpenType (AFDKO). The AFDKO tools are widely used for font development today, and are part of most font editor applications.

source-sans-pro - Sans serif font family for user interface environments

  •    Shell

Source Sans Pro is a set of OpenType fonts that have been designed to work well in user interface (UI) environments. In addition to a functional OpenType font, this open source project provides all of the source files that were used to build this OpenType font by using the AFDKO makeotf tool. To build the binary font files from source, you need to have installed the Adobe Font Development Kit for OpenType (AFDKO). The AFDKO tools are widely used for font development today, and are part of most font editor applications.

awesome-terminal-fonts - Tools and instructions on how to have awesome symbols in a terminal with a monospace font

  •    Shell

Referring to glyphs by codepints (eg. \uf00c) in your scripts or shell configuration it's not recommended because icon fonts like Font Awesome use code points ranges those ranges are not disciplined by the unicode consortium, every font can associate every glyphs to those codepoints. This means that Font Awesome can choose to move glyphs around freely, today \uf00c is associated to the check symbol, tomorrow it can be associated to something else. Moreover, more than one icon font can use the same codepoint for different glyphs and if we want to use them both we need to move one of them. So, if you use a codepoint to refer to a glyph after an update that codepoint can point to another glyph. To avoid this situation you can use the font maps in the ./build directory, font maps are scripts which define shell variables that give names to glyphs, by sourcing those files in your shell you can refer to glyphs by name (eg. $CODEPOINT_OF_AWESOME_CHECK).

android-DownloadableFonts

  •    Java

This sample demonstrates how to use the Downloadable Fonts feature introduced in Android O. Downloadable Fonts is a feature that allows apps to request a certain font from a provider instead of bundling it or downloading it themselves. This means, there is no need to bundle the font as an asset. The parameters ProviderAuthority, ProviderPackage are given by a font provider, in the case above uses Google Play Services as a font provider. The third parameter is a query string about the requested font. The syntax of the query is defined by the font provider.

google-webfonts-helper - A Hassle-Free Way to Self-Host Google Fonts

  •    Javascript

This service might be handy if you want to directly download all .eot, .woff, .woff2, .svg, .ttf files of a Google font (normally your User-Agent would determine the best format at Google's CSS API). Furthermore it provides charset customization and CSS snippets, hence getting your fonts ready for local hosting should be finally a breeze. The API is public, feel free to use it directly.

react-fontawesome - A React Font Awesome component.

  •    Javascript

A React component for the font-awesome icon library. Note: This component does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN versions.