Category: Design

Embedding a Google Font

Amy1 Comment

When working on websites there are occasions when the designers give you a design with some crazy fonts.  These look awesome but designers usually just reference the Google Font api website.  This is great for them but can degrade the performance of your website.  We prefer to download the fonts and run them locally.  Because I don’t do this very often I actually had to try to figure it out again.  It took a half hour to figure out so I need to write it down for next time!

When you download a webfont from Google Fonts it only gives you the .tff file.  This is useful when running on my machine but not so useful when trying to embed it into a website.

To embed it first download the .tff file from Google.

Then go to fontsquirrel and generate all the files you need.  It will create all the different types as well as an awesome page that shows examples of the font in use.  It created: .eot, .svg, .ttf, .woff, .woff2 files.

Done.  Now you have all the files you need to properly embed a Google Font in your website.

Update (1/10/2017):  When we pulled in some new fonts and pushed it to our DEV testing system we found that the new fonts were throwing errors.  After a bit of testing I found that we needed to add the following lines to our web.config file.  Here is the SO question that described the fix.

<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />

Requirements: The Expert (Video)

AmyLeave a comment

This video has been floating around for a while now. I found it hilarious. But in reality the more I think about it and the message in it the more true it seems to be. I wish it wasn’t true but it is. Pulling requirements out of users who aren’t sure what they want can be difficult, if impossible at times. It takes a skilled person to be able to design software for users like these.

Video: Design Fundamentals for Developers

AmyLeave a comment

This is a video (http://videos.visitmix.com/MIX09/02W) of a presentation by Robby Ingebretsen (http://nerdplusart.com/). The video gave a great overview of the process of design in general. Much of what I saw really resonated with the current way that I do software design as a developer. It is one that will be worth watching again someday.

The biggest takeaways that I got from the video is the series of planning documentation that he recommends for doing design and the breakdown of the types of designers that are involved in the design process.

Of all the design types the ones that resonated with me were the information architect and the user interface designer.

Quotes:
The alternative to good design is bad design, not no design at all.
…design is used to bring order from chaos and randomness…

Books:
Elements of Graphic Design by Alex White
How to think like a great Graphic Designer by Debbie Millman

ToDo:

  • Research Information Architecture
  • Break down his planning documentation and start using what I can
  • Look into training for any tools to use for the documentation