@font-face Property: Pros and Cons

Type on the web differs in appearance, behavior, and application compared to type in print. The appearance of type on the web is not fixed, predictable, or controllable as it is in print. Because of this the appearance and characteristics of type on the web differ from user to user. To make sure that the appearance of the text is almost the same for every user designers would use web safe fonts; fonts that are found on most computers.

There are also fonts that have been specifically designed for the web and they are called web fonts. And to use these fonts you have to use the @font-face rule in CSS. The fonts that are used with this rule can either be found on a self-hosting server or a third-party server; they do not have to already be on someone’s computer. When using web fonts you need two things, the font and a place to host them. There are a lot of websites out there that offer free open source fonts.

There are some pros to using web fonts on a website. Web fonts allow for more creativity and typographic freedom as well as consistent branding for websites, and online ads. You can also edit, update, resize, and copy text that uses a web font.

While there are pros to using web fonts there are also cons. One con is that the appearance of web fonts can vary between a Mac and PC. Another con is that different browsers support different font formats. Most fonts come in OpenType (OTF) or TrueType (TTF) format. There is a new standard for packaging fonts though and it is called Web Open Font Format (WOFF). There is also another issues and it is that font companies are concerned that their fonts will just be sitting on the servers ready to download by whoever for whatever. Because of this designers have to make sure that they are using these fonts for their intended purposes.

There are some websites out there that use these web fonts in a way that really ties the whole website together.

Kansas City Creep Fest

Screen Shot

Hashima Island

Screen Shot 2015-08-29 at 9.17.10 AM

The Aardvark Brigade 

Screen Shot 2015-08-29 at 9.18.51 AM

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s