Google Webfonts
At Miura we like to be at the cutting edge and we actively test and explore new design technologies. With the recent announcement of Google offering a Font Directory letting you browse some fonts and offering these via the Google Font API. At Miura we thought we would offer a font comparison feature, so designers and developers could test different font variations before implementing them on their sites.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
All fonts offered by Google in the directory are available for use on your website under an open source license and are served by Google servers.View font details to get the code needed to embed the font on your web site. Please also visit the Google quick start guide and FAQ page. For more help and suggestions, use their moderator page.
As Google ® Webfonts are in beta the functionality here can vary from browser to browser - while best results are to be had from Firefox 3.x, other browsers can struggle. Please contact us if you find any problems on this page.
A WORK IN PROGRESS
In the course of building this demonstration we found out a lot about the cross browser implementation:
- Best in Firefox 3.x (font style is visible in drop-down)
- Loading multiple fonts at once creates serious problems in IE, leading us to restrict the list to 5 fonts, (all of which need to have no spaces in the name e.g. 'Crimson Text' doesn't seem to work and indeed breaks all the javascript on the page ). This doesn't mean that a smaller number of fonts won't work properly.
- IE doesn't render the fonts as smoothly as Firefox and Safari
- Safari 4 will break (not allow you to make any selection) if you try to add CSS styles to individual options in the dropdown box
We used the Webfont loader script to try to standardise the experience across browsers, but still had mixed results.
Please contact us if you have any other insights or problems with Webfonts.
