We have been seeing a great increase in flexibility among web designers. The community has opened up to new standards and allowed these methods to infiltrate our way of designing. Fonts are a key feature necessary in all forms of web design and development.
Our post web 2.0 generation has grown impatient of older non-standard methods. Flash support allowed for dynamic text to be generated on-the-fly with very little afterthought. This method was very bulky and weighed down much of the scripts powering such websites. With many advancements in CSS3 and similar areas we’re certain to see an explosion of web fonts into the scene.
History indicates the most supported fonts in web design have been those installed on the largest amount of machines. With so many different operating systems available it’s difficult for web designers to use custom fonts since they won’t render properly in environments without a copy of the file itself.
Changes in Typography
More advanced tools have since been released and with them come powerful new ideas. Adobe Photoshop and Illustrator have pushed the limits to what we’ve seen in logo and icon design. Typography plays a huge role here along with the many free and paid fonts available on the web.
The motions have been turning with the popularity of dynamic font generation. The most popular example of this is with CSS3′s @font-face property.
The syntax can be a little confusing, though the premise is clear. One very confusing aspect to understand is @font-face is not a property of an element. You define which fonts you’re trying to load towards the top of your CSS file and this allows you to call these families later in the document when declaring a font-family property.
Rules of @font-face
Below is a very simple example of CSS code describing the process. This is a very bare-bones example which would only a new font style and include its corresponding physical file entity.
@font-face {
font-family: vagrounded;
src: url('vag-round.ttf');
}
If you notice we are not declaring any type of selector in this statement. An @font-face query is very similar to @media, @import, or @charset. These are a specific type of @ rule system to work with the dynamic structure of CSS as a development language.
The font-family descriptor above is used to give our imported font a default name. This is the same keyword used to assign the font into a stack. So as an example you could write something similar to this below:
p { font-family: vagrounded, Tahoma, Arial, sans-serif; }
Note there is no requirement for how to name your font variables. When calling the src parameter it is necessary to match the exact file name and directory structure. Often times if you’re only working with 2-3 fonts it’s easier to keep all files in the same location as your CSS. However if your project requires many font files a new fonts directory would make things more simplified and organized.
It would be nice if this process worked throughout all browsers, but unfortunately we aren’t there yet. A few more techniques will clear up the process to get fonts working clear everywhere.
Typographic Bugs
A glaring omission from most of the CSS3 documentation is any statement on the standardization of font files. Unfortunately different browser engines are only able to render certain types of fonts. Notably here is a short list:
- • Internet Explorer: EOT
- • Mozilla/Gecko: OTF and TTF
- • Safari, Opera: OTF, TTF and SVG
- • Google Chrome: TTF and SVG
So you’ll notice TTF(TrueType Font) and OTF(OpenType Font) are the two prevalent file types. SVG(Scalable Vector Graphics) is a newer format which Google and many Apple products have started to adopt. It is a cutting-edge digital file format which can store data about fonts, pixel graphics, vectors, and much more.
Incidentally it is common for many mobile browsers to also provide SVG support. These can include Safari for iPhone and iPad along with many 3rd party developers for iOS and Android platforms.
The best way to catch these problems is by creating a larger import stack with many font types. If you are unable to find a copy for each file type don’t stress about it. Generally there are fallback options which browsers support when using fonts which aren’t locally installed.
Google Font Directory
Another option for developers is to ignore physical fonts and work within an online directory. With cloud computing roaring in popularity we have seen larger developments unfold such as Google code webfonts.
Google Fonts provides an API which lets developers pull font stacks out of their database. If you’re curious check out the API documentation which has in-depth FAQs and a comprehensive getting started guide. All fonts are free and served under an open source license which means you are able to work with all fonts in their database completely free, no strings attached!
The project was just launched earlier this year and should see amazing growth as support for the project increases. If you would like to combine other techniques together you will see some great results come forward. Check out our free fonts list for some great ideas to play around with.
These techniques are just a few to keep in mind for the advancing trend of web fonts. Digital typography won’t be leaving any time soon and we’re able to dress up our styles now more than ever before. The curve is just beginning as we’re ushering into a new boom era in Internet technology.
You might also like…
50 Beautiful and Fresh Free Fonts →
Useful and Free Pictogram Dingbat Fonts →
25 Completely Free Fonts Perfect for @fontface →
Top 20 Free Fonts for Distinctive Headlines and Titles →
34 Free and Elegant TrueType Mini Pixel Fonts →
