Font style matcher
▻https://meowni.ca/font-style-matcher
“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. This tool helps you do exactly that.”
subfont
▻https://www.npmjs.com/package/subfont
A command line tool to statically analyse your page in order to generate the most optimal web font subsets, then inject them into your page.
Speed up your time to first meaningful paint by reducing the web font payload and critical path to the font files.
Subfont will:
– Automatically figure out what characters are used from each font
– Create an exact subset of used characters of each font
– Add the font subsets to your pages with browser preload hints for reduced time to first meaningful paint
– Give the subsetted fonts new names and prepend them in front of the original fonts in your font-family definitions (enables missing glyph fallback)
– Async load your original @font-face declaring CSS at the bottom of your page, moving it off the critical path
Perso c’est pas ma priorité, mais je vois souvent passer des demandes à ce sujet.
Moving to a System #Font Stack in 2017
▻https://woorkup.com/system-font
With the font-family property with web fonts, you typically have your primary font and one or two fallback fonts. With system fonts, you have to include all of the different operating systems, and therefore you have to stack quite a few more fonts. This is why it is called a “system font stack.”
Davantage d’exemples intéressants (Medium, Github…) dans cet article cité ici : ▻https://seenthis.net/messages/528287
Celui de WP donc :
body {
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
pas stupide, mais en gros ça revient à annuler la fonte par défaut des navigateurs… #idée_pour_firefox :)
The 100 best free #fonts | Creative Bloq
▻http://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380
We’ve scoured the web to present you with a fine and varied selection of free fonts. Including scripts, serifs, and a range of ligatures, these fonts will give you greater flexibility in your designs, and add to your arsenal of design tools.
This list represents the 100 best free fonts we’ve found in a variety of styles. We have many other articles covering specialist font types including handwriting fonts, graffiti fonts, web fonts and more, but we have sectioned our main list under these styles:
Google Web Fonts Typographic Project
▻https://femmebot.github.io/google-type
There are over 800 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites. Part of the 25x52 initiative, this collaborative, ongoing project offers inspiration for using Google’s font library.
ttfautohint
▻http://www.freetype.org/ttfautohint
ttfautohint’s goal is a 99% automated hinting process for web fonts, acting as a platform for finely hand-tuned hinting.
via ▻https://pixelsvsbytes.com/2013/11/how-to-create-perfect-web-fonts-in-3-steps
Disponible dans les options du générateur de #fontsquirrel, ce qui permet d’avoir un bien meilleur rendu sur windows avec certaines typos.
The Mitt Romney Web Font Problem—zachleat.com
▻http://www.zachleat.com/web/mitt-romney-webfont-problem
I wanted to highlight a particular variant of #FOIT, which I’ll forever refer to as the Mitt Romney Web Font Problem. This specific problem occurs when you use multiple weights and styles of the same typeface together. Tags: FOIT #fonte #CSS #UX #clevermarks
Faster Font Loading with Font Events — Jonathan Suh
▻https://jonsuh.com/blog/font-loading-with-font-events
#FOIT is a result of the browser timing out by displaying text in a default font after attempting to load a web font. During its attempt to load the web font, the browser hides the text for a period of time, usually a few seconds but is known to go up as high as 30 seconds.
(…)
This is where #Font_Load_Events come in, which is designed to do just that. Bram Stein created Font Face Observer, a lightweight (2.7KB minified, 1.1KB gzipped) polyfill for the font event API to allow you to detect if and when a font has been loaded.
Self-Hosting Google Web #Fonts | Mario Ranftl
▻http://ranf.tl/2014/12/23/self-hosting-google-web-fonts
The effort to host Google web fonts on your own server is immense! (...) I decided to publish a little service called google-webfonts-helper.
The service uses Google’s font API to retrieve a list of all available web fonts and fetches links to the .eot, .woff, .ttf and .svg files by parsing their hosted CSS files (and faking the User-Agent to get them) … creates an archive which can be downloaded
►https://google-webfonts-helper.herokuapp.com/fonts
via @sonntag
Une alternative maintenue par ici ▻https://webfontloader.altmann.de
ref ▻https://github.com/majodev/google-webfonts-helper/issues/98#issuecomment-996543758
A More Modern Scale for Web Typography | Design in the browser with web fonts and real content — Typecast
▻http://typecast.com/blog/a-more-modern-scale-for-web-typography
it’s not just the absolute sizes of your type and spacings that must change as screen sizes shrink; the proportions between them must change as well. So I’ve come up with a responsive relative scale to help you achieve a more readable page regardless of device or resolution.
Home | Design in the browser with web fonts and real content — Typecast
►http://typecast.com
Design in the browser with web fonts and real content. Tags: #webdesign #tool #webfonts
TypeWonder - Beta
▻http://typewonder.com
Helps you to test web fonts on any web site on the fly ! Enter the site url and preview instantly the fonts with-out any hassle !
#typo
Continental - A Symbol Font for Europe
▻http://sathomas.me/continental/#examples
“Continental is a specialized web font. It doesn’t contain the typical letters and characters of a standard font; instead, its symbols are maps, specifically maps of the countries of Europe. Continental makes it easy to include these maps within web pages. Include the font like any other web font, and then use standard HTML and CSS to create maps.”
Beautiful web type
▻http://hellohappy.org/beautiful-web-type
A showcase of the best typefaces from the Google web #fonts directory.
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.
Ditching the Shoehorn: Designing #Type That Works on #ePubs, Mobi and the Web | #Design in the browser with web fonts and real content — Typecast
▻http://typecast.com/blog/ditching-the-shoehorn-designing-type-that-works-on-epubs-mobi-and-the-web
Designing typography that works across multiple platforms is no small task. Today, Stewart Curry of Woopie shares what he’s learned in the publishing trenches.
Designing For The Reading Experience | Smashing Magazine
▻http://www.smashingmagazine.com/2013/02/18/designing-reading-experience
With the rise of Web fonts as well as affordable hosted Web font services and ready-made kits, typography is reclaiming its title as design queen, ruler of all graphic and Web design.
Freebie: Extended Entypo Glyph Set (EPS, PDF, PSD, Typeface, Web Font)
►http://www.smashingmagazine.com/2012/11/03/free-glyph-set-entypo-eps-pdf-psd-web-font
After endless suplications from the design community Daniel Bruce finally finished his update of the Entypo Glyph Set — a free set of universal 284 carefully crafted pictograms for regular design projects. The icons are available as EPS, PDF and Photoshop PSD files as well as desktop typefaces (TrueType, OpenType) and Web fonts.
FTPM - Font Package Manager
►http://heldr.github.com/ftpm
FTPM is a Font helper built on top of Google Web Fonts and Node.js. Allows you to manage system fonts, generate web font files, CSS from Google Web Fonts and CSS using data-uri embeds.
Nouvelle spécification typo CSS3
►http://www.w3.org/TR/css3-fonts
This CSS3 module describes how font properties are specified and how font resources are loaded dynamically. The contents of this specification are a consolidation of content previously divided into CSS3 Fonts and CSS3 Web Fonts modules.
font-face Solutions & Suggestions
►http://webdesignerwall.com/general/font-face-solutions-suggestions
So what are the options for implementing web fonts? I’m going to review the three main methods of incorporating #@font-face and explain the pros and cons of each method.
#css3
Google Webfonts V2
Nouvelle interface graphique en test de Google Webfonts
►http://www.google.com/webfonts/v2
Elle est présentée sur leur blog :
“The Google Web Fonts team has been hard at work designing a new font browsing experience for www.google.com/webfonts. Today, this new interface is available for you to try! Just click here, or you can click the New Version link at the top of our current product. The interface has a lot of the features you’ve requested, including the ability to preview your own custom text, the ability to compare fonts side-by-side, as well as an indication of page load times.”
►http://googlewebfonts.blogspot.com/2011/06/new-face-of-google-web-fonts.html
#font-face #typographie #webfonts
Je découvre (avec horreur) que 95% de ces polices ne contiennent pas le œ, ni le Œ, et pas le Ÿ non plus. 25 ans après, on continue donc à subir les conséquences d’ISO 8859-1.
De plus, aucune ne semble contenir le symbole €.
Oui, aucune ne contient le signe euro, pour les autres caractères seules les polices qui ont le jeu Latin Extended les ont (ce qui ne fait pas lourd, et c’est loin d’être les plus chouettes). Typekit’s not dead.
Web font services - An Overview - by sprungmarker.de
►http://sprungmarker.de/wp-content/uploads/webfont-services
This is just a personal driven overview of web font services and should not be understood as an authoritative attempt to classify the services - as it was mentioned to me. I needed an overview and there was none, so I made one. :) I provide a change log so far and I will try to keep informations up to date.
The Font-Face Rule And Useful Web Font Tricks
►http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks
The possibility of embedding any font you like into websites via @font-face is an additional stylistic device which promises to abolish the monotony of the usual system fonts. It surely would be all too easy if there was only one Web font format out there. Instead, there’s quite a variety, as you will get to know in this article.
This quick introduction to @font-face will lead you towards a guide through the @font-face kit generator. If you want to make Web use of your already licensed desktop fonts, read up on how to embed them from your own server. Topped up with some helpful tips, tricks and workarounds, this article will hopefully provide some useful insights.
The #Font-Face Rule and Useful Web Font Tricks - Smashing Magazine
►http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks
Most browsers won’t show any text before all Web fonts are imported. Firefox, however, displays the text using a system font and renders the text again, when the embedded Web fonts are completely loaded. This technique results in a “flash of unstyled text” that sometimes leads to side-effects. Web designers can control this behaviour by using #Google’s Webfont Loader.