PUBLIC MARKS with tag @font-face

sur Alsacreations / Janvier 2019

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.

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.

Custom & Crisp Icon Font Generator

Generate custom icon webfonts from the comfort of the command line

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"

the iconic font designed for use with Twitter Bootstrap

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

Mfglabs icons

Fico is a font with 52* simple, commonly used icons and glyphs, served on the web via @font-face.

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.

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.

A showcase of the best typefaces from the Google web fonts directory.

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.

Fico is a font with 52* simple, commonly used icons and glyphs, served on the web via @font-face. scalable perfect for responsive designs with media queries