public marks

PUBLIC MARKS with tag @font-face

This year

CSS - @font-face - Using @font-face - CSS-Tricks

by decembre
The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS. Without the rule, our designs are limited to the fonts that are already loaded on a user's computer, which vary depending on the system being used. Here's a nice breakdown of existing system fonts.

2015

Why AMP is fast

by dzc
While this article is about optimizations in AMP, it might also be useful as a kind of todo list for optimizing a non-AMP website.

CSS - ICONS - @font-face, Accélérez vos polices d'icônes ! - Alsacreations

by decembre
Aller un peu plus loin Oui mais voila, il reste encore trop de fichiers à charger. C'est là qu'intervient le schéma Data-URI, que l'on utilisait pour les icônes images afin de supprimer une requête en intégrant directement l'image dans le fichier CSS. L'idée est la même, intégrer directement la police de caractères dans le fichier CSS. Une option disponible dans les préférences d'Icomoon : "Encode et Embed Font in CSS". On se retrouve avec un fichier CSS contenant les définitions suivantes, où les versions TTF et WOFF de la police sont directement dans le fichier CSS, la version EOT restant externe.

2014

Beautiful web type — the best typefaces from the Google web fonts directory

by Spone
There are over 600 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Below are examples of these typefaces in action. Click the examples to get the typeface from the Google web fonts directory.

2013

Font Custom

by dzc & 1 other
Generate custom icon webfonts from the comfort of the command line

Créer une police d’icônes facilement à partir d’illustrations vectorielles

by dzc & 2 others
cf. 1er commentaire : "ligatures. C'est encore plus intéressant car au lieu d'insérer un caractère unicode spécial et de le voir remplacé par une icône, on peut écrire "sauvegarder" dans un span, définir une police particulière pour le span, et voir "sauvegarder" remplacé par l'icône. C'est la police qui a un rendu particulier pour la chaine de caractère complete et pas un remplacement ou un code spécifique. L'avantage c'est que le copier/coller fonctionne (on copie vraiment "sauvegarder"), la lecture d'écran aussi, et cela ne demande aucun marquage HTML particulier"

Font Awesome

by dzc & 6 others
the iconic font designed for use with Twitter Bootstrap

Elusive icons, an icons font designed for use with Bootstrap

by dzc & 1 other
Elusive Icons is a webfont that can be used with any of your projects. Bootstrap-based, or even your custom projects! It was created by the need for an Open-Source font When downloading this font you'll also receive all the icons in .svg vector format so you can play with them

2012

Fico | a font with icons, by Lensco.be

by Spone & 1 other (via)
Fico is a font with 52* simple, commonly used icons and glyphs, served on the web via @font-face.

Modern Pictograms - The Design Office

by Spone & 1 other
Modern Pictograms is a typeface for interface designers and programmers. Designed in early 2011 for the Flatfile Wordpress theme, the pictograms stay sharp when used large or small. Install the OpenType file for Photoshop mockups and drop in the @font-face code into your CSS to embed them right in your Web page. Designed to work on web sites at sizes down to 18 pixels, but best at higher than 24 pixels.

A better way to use icon fonts — yatil. Eric Eggert about web development & design.

by Spone
There are some browser and screen reader combinations that treat CSS not only as a presentational thing, but apply meaning according to the used properties. For example some won’t read a list if you use list-style: none; in your CSS. This assumes that the meaning of your HTML is overwritten by the visual style: If it doesn’t look like a dumb bullet list, it must be no list at all. I’m not sure I conclude with that assumption, but that isn’t the main point of the article here.

Beautiful web type — the best typefaces from the Google web fonts directory

by Spone & 7 others
A showcase of the best typefaces from the Google web fonts directory.

Beautiful web type

by gregg & 7 others
A showcase of the best typefaces from the Google web fonts directory. There are currently 404 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Below are examples of these typefaces in action. Click the examples to get the typeface from the Google web fonts directory.

2011

Active users

decembre
last mark : 09/06/2017 09:54

dzc
last mark : 13/12/2015 22:49

Spone
last mark : 02/07/2014 14:04

eledo34
last mark : 16/03/2012 07:35

Nissone
last mark : 22/02/2012 13:48

gregg
last mark : 28/02/2012 11:48