mhpreiman
1/12/2017 - 4:43 AM

fonts

fonts

defining a font-face.md
content_copyfile_download
  • Rendered
  • Source
@font-face {
    font-family: 'fira_coderegular';
    src: url('firacode-regular-webfont.woff2') format('woff2'),     /*first-defined font is tested first - if unsupported, moves on to the next one*/
         url('firacode-regular-webfont.woff') format('woff');
    font-weight: 400;     /*or 'normal'*/
    font-style: normal;
}
fonts.md
content_copyfile_download
  • Rendered
  • Source

Safe web fonts   15 Best Web Safe Fonts   A complete collection of web safe CSS font stacks   All of the fonts you'll ever need   30 Gorgeous Web Safe Fonts  

* Improve rendering in fonts with [`text-rendering`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering) - *but only* in logos or other important headings for larger screens where it's actually important. Also see `smoother font.css` below. * Google fonts - use CDN instead of local (they're [compressed and cached](https://stackoverflow.com/questions/35065185/server-stored-fonts-vs-google-fonts)) * Smaller, faster fonts with [subsetting](http://thenewcode.com/878/Slash-Page-Load-Times-With-CSS-Font-Subsetting)
Style fonts with **font-feature-settings** [🏵](https://css-tricks.com/almanac/properties/f/font-feature-settings/)[🏵](https://www.sitepoint.com/cross-browser-web-fonts-part-3/) with advanced typographic settings such as small caps, ligatures, and [swashes](https://www.google.ee/search?q=what+are+font+swashes&rlz=1C1AVNE_enEE716EE716&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiPrZaPxLvRAhUjG5oKHURdAfQQ_AUICCgB&biw=1920&bih=950). In OpenType fonts (OTF).  Only for special cases [ligatures](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)   [🏵](https://raw.githubusercontent.com/mhpreiman/files/64d51b25dbcac814cc6dabbd99a626ae4d112ace/useCase%20Diagram.jpg) Examples (scroll d)

Kerning
Kerning fonts with javascript plugin. Combine with kern.js to do it visually.

smoother font.css
content_copyfile_download
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-webkit-font-smoothing: antialiased !important;

/* avoid optimizeLebigility - too many issues */


/* stackoverflow.com/a/22990803 */
some font effects.md
content_copyfile_download
  • Rendered
  • Source

font-family: "Bauhaus 93";
text-shadow: 0 0 10px #fff,
        0 0 20px #66ccff,
        0 0 30px #66ffff,
        0 0 40px #ff00de,
        0 0 70px #0099ff,
        0 0 80px #33ffcc,
        0 0 100px #ff00de;