In the last post I talked about the design aspect of using CSS3 @font-face, today I would like to extend this topic to the technical side on implementing custom web fonts. 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.
Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesn’t, your custom fonts might break the layout or come out with undesired results. In this article, I will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr.
Four of my illustrations (Koi, Peacock, Abstract Pheonix, and Japan 11-03-11) are now available at Society6 for sale as print media. They are available as: sketched canvases, posters, T-shirts, hoodies, laptop and iPhone cases. Society6 offers high quality printing on fine material. Or if you are looking for inspiration, check out the website for awesome art works done by artists around the world.
Let’s face it, ask most designers what their dream project would be and I bet none would mention designing and coding HTML Email. Designing email has a special place in my heart and I am excited to communicate with people through this challenging medium. So here’s 5½ improvements you might consider making when you revamp or greenfield your next template.
Note: This article is a guest post by Josh Rubinstein.
Today I would like to share something that is slightly off topic — how to use iPhone GPS map on the road without a data or WIFI connection. To be more specific, I mean how to use the iPhone Google Map as a GPS (without a network connection on the road) by pre-caching the map. This trick is very useful if you don’t have a data plan or want to avoid the data roaming charges when you are travelling.
While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn’t work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. If you are creating a responsive design, this simple CSS trick will come in handy. View the final demo and resize your browser window to see it in action.