This is a direct follow up to the post on web typography that I wrote last month. I’ve been trying to include a web font in my live prototype but it seemed challenging to do so in Axure, after all this is not a dedicated html and CSS editor, the challenges is further covered in this post.
I think it’s nice to able to use the actual web font in the prototype site because it will demonstrate to any team developer what I am actually heading for when it comes to the headline typography, not all fonts appear identically although the size is identical. It all depends on the body of the typeface. It is also an advantage to see how the typeface plays out in the interface, and how many characters I can plan to include in the planned space of the headline. I also think it suits the lo-fi version to have some authentic typography as long as I don’t add visual styles to the headlines. The purpose is only to show the typeface and the type sizes defined with the authentic html attributes.
Just to share some of the frustration I was going trough trying to make this work, here is a small sample from one of the many posts I had to make over at the Axure support forum. It wasn’t just one suggestion to how this could be solved but in this case it was only one correct answer.
I had to try it but it did not work. When I switch the font names with the Google code (in this case from Days+One to Oswald) it didn’t show up. Not on my local machine where I have the font installed or the other “neutral” machine. I switched back to the Days One font that I have set as my text panel widget and I was back to that font in the interface. To experiment I just put a single text widget with the Oswald font on my page and switched the font code name to Oswald in the script file, then I launched a new site and it showed up. So I guess its not as easy as to just switch the font code names in that script file, seems to me that I actually need to set every single text widget to the font I’m referring to in the Google web font script. That makes experimenting site wide with web fonts in the prototype very tedious. I guess having all my Headline fonts as masters will make it a little easier, still not as quick as just having to change the font code reference.
For those who wonders how the script runs here it is: