Category: Fonts

Using Custom Fonts With SVG in an Image Tag

When we produce a PNG image, we use an <img> tag or a CSS background, and that’s about it. It is dead simple and guaranteed to work. PNG is way simpler to use in HTML than SVG Unfortunately, the same cannot be said for SVG, despite its many advantages. Although you’re spoiled for choices when using...

Don’t just copy the @font-face out of Google Fonts URLs

I don’t think this is an epidemic or anything, but I’ve seen it done a few times and even advocated for. This is what I mean… You go to Google Fonts and pick a font like Open Sans, and it gives you either a <link> or an @import with a URL there in which to ready this font for usage on your site...

IBM Plex

Here’s a free new font for IBM Plex, a family of typefaces by the iconic company of the same name. It’s on Google Fonts if you want to use it. And we’re talking about a multifaceted font. It touts having: Roman and Italics Four subfamilies Eight weights Support for 100 languages The site promoting the f...

How New Font Technologies Will Improve The Web

    Words are the primary component of content for the web. However, until a short while ago, all we had at our disposal were but a few system fonts. Adding to that, those system typefaces weren’t necessarily coherent from operatin...

The Art Of Calligraphy: Getting Started And Lessons Learned

    Typography is a primary element of composition. Being a designer, I pay a lot of attention to its quality. Operating Photoshop is easy for me; however, to level up my skills, I am always learning to work with letters, using my ha...

30 Free Fonts With Personality And Style

    The sharing spirit in the design community is remarkable. Designers spend countless hours on side projects and without asking for anything in return, they share their creations freely with the community. Just to give something ba...

How to Speed up Google Fonts in WordPress

Today, I’m going to cover a few methods for optimizing and speeding up Google Fonts in WordPress. Images, of course, are and always will be the heaviest part of a web page, but according to HTTP Archive, as of October 2016, web fonts are just over 3% of an average page’s overall weight. Even though the weig...

Google Fonts Redesign

It’s a big redesign of a site I’m sure all of use have visited many, many times. It even resides on a new subdomain: fonts.google.com. Live typing samples in the search index for the win! There are also much nicer font specimen pages with clearer examples, cool/nerdy data visualizations, and pairing recomme...

Web Fonts for President 2016

Zach Leatherman digs under the cover of the presidential candidates’ websites and reveals that font loading is a nuanced and complicated business: Using a web font service doesn’t necessarily mean that your web site will use best practices. We must be knowledgeable about the internals of the tools we use in order t...

Free Font Release: Yrsa And Rasa Available For Download

   Editor’s Note: Today we are pleased to feature the new and free font families Yrsa and Rasa by David Březina and Anna Giedryś and their story behind the design process. Yrsa and Rasa are two open-source type families published by Rosetta with generous financial support from Google. The fonts sup...