The Atom Text Editor

The Atom Web Editor Free at https://atom.io/

The Atom editor originally started life back in 2008, as a side project from one of GitHub’s founders, Chris Wanstrath. Atom was born from his desire to create an editor that was flexible, easy to customise and built on top of web technologies. It wasn’t until a few years later though, in 2011, when Atom was picked back up by GitHub and subsequently taken on as an official project, and that’s when work on it really started to progress.
Work went on behind the scenes and whilst that happened, web technology in general improved to the point where it was viable to release the project publicly as a beta version in early 2014. A year and a few months later, in June 2015, version 1.0 was released.
The editor is built upon a range of familiar web technologies. At the heart of GitHub’s Atom is Electron, which uses Chromium as a base (the open source core of Google’s Chrome browser) and provides rendering of HTML, CSS and JavaScript as a stand-alone desktop application. The JavaScript is much more powerful than the JavaScript that can be found in web browsers, as it takes advantage of the Node.js project to provide a powerful API for accessing the filesystem, networking and much more. This also includes the possibility of using over 170,000 (at the time of writing) modules that are provided through Node's 'npm'.
All of their effort has created a cross-platform editor, which at this point includes all of the normal features that you’d expect to find such as syntax highlighting, autocomplete, searching files, multiple view panels, multiple cursors, project support and much, much more. The appearance of the editor is very flexible as well, with the overall look and the syntax highlighting both supporting themes, of which there are almost 800 that are already available to use. There is also support for packages, with over 2,500 available for expanding the editor in a multitude of ways.

Extending the Atom editor's functionality with Packages

Package installation: With the package count for Atom exceeding 2,500, there is no shortage of interesting additions you can add to your editor.
Under the menu File>Settings, you’ll find a Packages item. This provides a list of all the packages you have installed and ones that were included with Atom by default (core packages). Here you can access any settings a package may have or disable/uninstall them. For installation, proceed to the Install section which provides a search input box. Type the name of the package you wish to install or keywords for something you would like to do. You’ll then be presented with a list providing a description, download count, version, link to the webpage of that package and an installation button.

Which languages are supported when combined with additional packages?

JavaScript: With Atom being built on top of JavaScript, you’d expect it to be well supported. Packages such as linter and linter-jscs can add code analysis tools (linters) to catch common issues or mistakes. Turbo-javascript provides a raft of commands and snippets to make writing ES6 JavaScript quicker.
PHP: PHP doesn’t miss out on further support through packages. To complement the built-in syntax highlighting, php-cs-fixer can be installed to maintain your coding standards. For Atom’s autocomplete feature, install autocomplete-php and standard PHP functions will list as you type.
CSS: CSS gets the standard level of support from Atom with interesting packages from the community. ‘Pigments’ detects colour declarations and displays it as a background to the text and linter-css checks for common mistakes. Support is also available for preprocessors like Less.
HTML: Emmet wraps a popular tool to enable writing HTML as CSS selectors, being expanded into actual HTML by simply tabbing after typing your selector. Html-entities will handle encoding and decoding of special characters, autoclose-html helps with closing your tags as you type and various linters can check the HTML correctness.
Go: As a language developed by Google in 2007, Go has received some decent attention recently. Go-plus provides access to the powerful toolset that Go provides from within the editor: gocode to power the autocomplete, gofmt to tidy up your code, goimports to add and remove imports automatically and golint to check for common code issues and even building or testing code.
Node.js: While Node.js uses JavaScript, which has already been detailed, there are additional packages available that provide even deeper support. For example, Node-debugger hooks into the debug support that Node has with Atom and displays the active line and allows execution control.

Access the packages: While this primarily depends upon the way the package was written to work, there are a few places that a package will present itself. The menu at the top of the Atom editor contains a Packages item that packages can provide actions under. They will also usually add themselves to the Command Palette, so just use Cmd/Ctrl+Shift+P to bring up the palette and then type the name of the package to filter the list and display the commands for it. Finally, keyboard shortcuts are usually created, but these will be unique to each package and best found by reading the documentation for it.
Discovering packages: Going back to the Install area for packages within Atom, you should see an area listed for Featured Packages. This is a list featuring some of the favourite packages from the Atom community. If you check out the Atom website (atom.io/packages) you will find lists of packages that have been trending over the past day, week and month. This is a fantastic place to find out which packages are suddenly becoming popular with other developers.
Finally, the Atom website also has a blog which contains posts doing a new package roundup. They pick several new packages that have interesting features and showcase them with fuller descriptions and screenshots.
Package performance: If Atom is starting to feel sluggish or takes a long time to open, it’s worth considering the packages that you have installed recently.
A package that Atom includes by default is called Timecop and accessed via the Packages menu. It displays the loading and activation time of each installed package.

5 Must-have extensions

Minimap: Adds a thin additional column to the editor windowthatprovidesapreviewofthefullfile contents.Thiscanthenmakeiteasiertoscrollto specificcode.
Git-plus: Source control is important and this package provides access to Git for that purpose, all from within Atom so you don’t have to leave the editor.
File-icons: Improves the filetree view and other areas within Atom by assigning colourful icons to different file types, making it easier to see the type at a glance.
Merge-conflicts: When merging branches in Git, conflicts can occur with the changes. This package provides an in-editor: a simpler way to resolve those conflicts.
iMDone: Looks throughout your project’s code for comments marked TODO, FIXME and others. It then takes this information and provides a kanban-style board.

Za'tar Spice Mix Recipe

Feel free to suggest more variations in the comment section, as with most spice mixes Za'tar does vary according to region and personal family tastes. Take the following as only a guidepost and by all means.

Background

Za'atar (Arabic: زَعْتَر‎ za‘tar, also romanized zaatar, za'tar, zatar, zatr, zattr, zahatar, zaktar, satar or zather) is a generic name for a family of related Middle Eastern herbs from the genera Origanum (oregano), Calamintha (basil thyme), Thymus (typically Thymus vulgaris, i.e., thyme), and Satureja (savory). The name za'atar alone most properly applies to Origanum syriacum. It is also the name for a condiment made from the dried herb(s), mixed with sesame seeds, dried sumac, and often salt, as well as other spices. Used in Arab cuisine, both the herb and spice mixture are popular throughout the Middle East.

Ingredients:

• sumac 60 grams (1/4 cup)
• thyme 10 grams (2 tablespoons)
• roasted sesame seeds 5 grams (1 tablespoon)
• marjoram 10 grams (2 tablespoons)
  
• oregano 10 grams (2 tablespoons)
• coarse salt 5 grams (1 teaspoon)

Grind the leaves, seeds and salt into a fine powder in a mortar. Grinding the roasted sesame seeds are optional, some enjoy them whole for texture.

Mishmash (Stamppot) recipes from Holland's cold season.

Stamppot or Mishmash, Hodgepodge, Hash, et cetera (English, literally: 'Mash Pot') is a traditional Dutch dish made from a combination of potatoes mashed with one or several other vegetables, sometimes also with pork. Most often actually. It was the staple answer to, "What do we do with all these potatoes, gourds and winter crops?"

Note that the Dutch preparation instructions can be found on the enlargeable image file, below the image you'll find the English. These are fairly standard Dutch approaches, although they are a dynamic culture, unlike the complaints of Virginia Wolf about English. If I fry anything, I normally do not waste my olive oil. The Dutch also have a strong aversion to anything chard, while a few black spots don't bother me. They also like it fatty foods; butter, non-lean meat, diary products. That last comment will probably be met with the classic argument that hamburgers are fatty, but not our food.

Endives & Blue cheese Mash
(Witlofstamppot met blauwe kaas)
~ Endive is also a common name for some types of chicory (Cichorium intybus). Now the Dutch will laugh at that, because the word Andijve is reserved for another plant.

Ingredients
1200 grams of starchy/soft potatoes, peeled and cut into even pieces.
600 grams of endives
200 grams of Gorgonzola cheese in blocks
200 grams of walnuts
100 milliliters of whipping cream (note, if you think of this as a sweet U.S. version, you need Crème fraîche or even Sour Creme instead).
75 milliliters of water.
25 grams of butter
3 shallots, peeled and finely sliced
1 staff of thyme
1/2 block of vegetable bouillon
2 tablespoons of dry white wine or white basilica vinegar
3 tablespoons of liquid honey
salt

Place the potatoes in a large pan of salted water and bring to a boil for total of 20 minutes.

Meanwhile fry the shallots slowly in the butter until browned. Add to the shallots, your bouillon cube, about 75 milliliters of water, vinegar or wine, and thyme. While cooking this for about 5 minutes stir your honey in.

Fry the walnuts in a dry pan, dicing them when roasted. Halve the endives, removing the hard core and cut into strips. Drain access water from the potatoes, keeping some in a bowl for later mixing. Reserving about a modest handful of your endives. Mix the rest of the endives and whipping cream into the potatoes and cover it to cook about 1 minute. Stir it again until it's a creamy mash.

Add the cheese, walnuts, that small handful of reserved endives. Serve with the honey sauce aside.


Kale, Chorizo & Bell Pepper Mash 
(Boerenkool met Chorizo en Paprika recept)

Ingredients
2 red bell peppers
1 bulb of garlic wrapped in foil
4 tablespoons of olive oil
1 chorizo sausage in cuts (medallions)
1200 grams of potatoes
500 grams of chopped kale
salt

Place your oven on the highest level. Grill the Bell Peppers and garlic for about 20 minutes in the oven. Place the peppers in a covered container to cool before peeling them and cutting into strips. Simply press the garlic cloves out from their skins add two tablespoons of olive oil with a pinch of salt.
Fry the chorizo slices the remaining 2 tablespoons of olive oil until they are a bit crunchy. Remove them from the pan and try to keep them warm.
Place the potatoes in a large pan of water and bring to a boil for total of 20 minutes. Remove the cover 10 minutes in to toss your raw kale atop the potatoes and let it steam. Finally drain off any extra water, keeping some in a bowl for later mixing.
The residual oils from the chorizo pan with your peppers can now be added to the potatoes and kale before mashing the contents. For final presentation, pour your heated garlic and olive oil over the top and garnish it with your chorizo cuts.

Black Eyed Pea Curry

Units:
1 tsp. (teaspoon) = 5 grams = 0.832674 Imperial tsp, because those lads loved Rome.
1 tbsp. (tablespoon) = 15 grams = 2.49802 Imperial tablespoons because Pioneers didn't use tables.

Ingredients:
• 2 jalapeno peppers
• 2 ginger bulbs (about the size of the thumb tip) diced
• 1 tablespoon of olive oil
• 2 tbsp (30gm) mustard seeds dry
• 2 medium sized tomatoes
• 1 tsp. (5gm) powdered coriander
• 1/2 tsp. (2.5gm) powdered cumin
• 1/4 tsp. (1.25gm) turmeric powder
• 1/2 tsp. (2.5gm) salt
• 1 bay leaf
• 1 bunch of fresh cilantro (bushel of coriander leaves)
• 1 tsp (5gm) dried paprika ("Spanse pepper" if you're thinking like the Dutch)

Author's aside:
The results of this recipe can actually be stored in the freezer to be used as an additive to a general humus recipe. The basis of this style is Palestinian in origin. It is also worth noting that the desired beans do not necessarily need to be black-eyed peas. Red beans, white beans and lentils will work just as fine in texture and tasted.

Now, the source of this recipe actually suggests deseeding the peppers and the tomatoes. Personally, with the exception of bell peppers, I like to keep the seeds for their nutrients and texture in the meal. You have to admit, the concept of taking seeds out of others, while adding roasted mustard seeds is a bit contrary, unless you don't like it so spicy. Here they suggest Jalapeno peppers, but honestly, any hot pepper of your choice will suffice. If you dislike really spicy hot food, then you should not only remove the pepper seeds but also the thin fibrous skins the seeds are attached too. The chemical that makes a pepper taste hot is concentrated in those two parts.

..

Methodical process:

Remember to follow your heart and taste-buds always. It's similar to the expression "salt to taste":

Bring your wok or pot to a mild heat with oil coating the bottom. Now we begin with the jalapeno peppers, ginger and mustard seeds. Essentially, all other condiments should be prepared, as we are waiting for the moment that the mustard seeds will jump like 'Mexican Jumping Beans'. The should pop a bit like corn (maize) due to the steam condensing on the inside of their shells, causing an expansion and the subsequent popping of their shells, but that is when we want to stop this process, just as you don't want charcoal on your popcorn.
While cooking the aforementioned you can quickly quarter the tomatoes, chop the cilantro (fresh coriander leaves) and if you prefer, instead of using a whole bay leaf (laurel) you can also cut into strips; however not too thin as these are not palatable and should be removed before or during eating (similar to unshelled cardamon seeds would be).
When the mustard seeds begin to jump from the oil, it is time to lower the heat and combine our tomatoes, cilantro, turmeric, salt, paprika and our bay leaf.
When the tomatoes are soft, then we add our beans (black-eyed peas in this case) and we provide just enough water to cover the beans. When the beans have become soft enough to be mashed, then we are done and can add the cilantro. 

Making & Using WebFonts: Software

WORK IN PROGRESS! I JUST REALLY NEED A BREAK. UPDATE TO COME SOON

Making & Using WebFonts aka. Typeface, Typeset, Lettertypen, Fuentes, 字体

Let's talk about fonts. If you don't know what a font is, then likely this article is not for you. From the age of the Gutenberg Printing Press around 1450 (image), setting the type for printing became an art in the west.

There are a number of reasons why you just might wish to make your own font. First of all, you would not have to worry about the costs for personal use, or maybe you would like to sell your own fonts. Take the Centaur font for example. It was drawn by Bruce Rogers in 1914 for the Metropolitan Museum of Art and was based on Nicolas Jenson's cuttings in the fifteenth century. The typeset still fetches from €34 or USD $44 for local usage (meaning in a format for use on your own computer) to €345 or USD $440 for use on Apps and Cloud distribution.

History: Once again the Chinese were first.

The world's first known movable type printing technology was invented and developed in China by the Han Chinese printer Bi Sheng between the years 1041 and 1048. When this technology spread to Korea during the Goryeo Dynasty in 1234, they made the world's first metal movable-type system for printing.This led to the printing of the Jikji in 1377, the oldest extant movable metal print book. This form of metal movable type that has been described by the French scholar Henri-Jean Martin as 'extremely similar to Gutenberg's'.

Korean movable type from 1377 used for the Jikji

Sure, there are free fonts out there as well. Maybe you're not interested in trying to compete in that market, but you have a project that requires something unique, or a company logo that needs just that extra touch. This is when you might wish to venture off into the world of typography and create your own. Let us take a look at software that will allow us to "cut" our own typeface.

Font Editor Software

FontLab Studio, one of the industry's standards is priced over €482 (USD $600, SGD $782, CNY ¥3686). Now if you intend to start a professional font foundries, which make a business designing and selling fonts, you just might be happy enough to foot the bill for the sticker price. For many of us with less demands and planned use, the cost is far too high.

Earlier I mentioned that there are a number of free options out there. Many of these choices are going to be rudimentary.

With these tools, don't expect to create high quality professional fonts right from the start — it will take time and practice, just like with any endeavor. But, if you're simply looking to create a custom font or would like to try your hand at a fun, fulfilling and creative activity like font design, these tools will certainly help you get the job done.

Let us cover some these free software options after a brief jaunt over typography jargon.

Glyph /ˈɡlɪf/ An elemental symbol within an agreed set of symbols, intended to represent a readable character for the purposes of writing and thereby expressing thoughts, ideas and concepts.
Sinograph or Sinogram is a Chinese character (Hanzi), especially when used in a different language, such as Japanese (Kanji), Korean (Hanja) or Vietnamese (Hantu).
Diacritics are the signs, such as an accent or cedilla, which when written above or below a letter indicates a difference in pronunciation from the same letter when unmarked or differently marked.

Font Editor Software:

⇓ links to in-line notes

• FontStruct.com - ⇓ ★★☆☆☆ (Online Editor)
• GNU Font Editor - ⇓ ★☆☆☆☆ (Installable)
• FontForge - ⇓ ★★★★☆ (Installable & Source Project)
• DoubleType - ⇓ ★★☆☆☆ (Installable)
• Horus - ⇓ ☆☆☆☆☆ (Online Inspection Only)
• Bitmap Font Editor - ⇓ ★★☆☆☆ (JAVA-based Project)
• iFontMaker™ - ⇓ ★★★★☆ (iPad & Windows8)
• BitFontMaker2™ - ⇓ ★★★☆☆ (Online Editor)
• Custom iOS Fonts - ⇓ ★★★☆☆ (Online Converter targeting iOS)

Related Software:

• Inkscape for vector editing (e.g. SVG file format). ★★★★☆

FontStruct
FontStruct.com is a web based font editor. They do require that you have an account in order to use their free creation services. FontStruct sells over 10,000 typesets from various professional font foundries and also has a number of royalty free fonts. The free fonts you are welcome to download, or clone directly into the editor for your personal modifications. They provide an informative blog, live users' news-feed and have their own online shop. Copyright over fonts created with FontStruct belong to the creators, not to FontStruct.

GFE
GNU Font Editor (GFE) is a graphical font editor based on the GIMP Toolkit. It is easy to use and was intended to support many font types, but stopped with support for only BDF font files, which can still be converted to many other formats. Since the advent of FontForge, GFE has been decommissioned. The software is still available via CVS.

FontForge
FontForge on GitHub is another free font editor, and it has a wonderful environment in which you are able to work with vectors. This is so much easier when editing a font as compared to dealing with pixels in a bitmap.
It is available for Linux, Windows and of course Mac.
Documentation is available in English and Mandarin Chinese (简体中文版). It is very comprehensive and even goes so far as to explain how to design Devanagari typefaces (an abugida alphabet of India and Nepal) and how to add glyphs to Arabic fonts.
You can import EPS and SVG vector files from programs such as the free vector image editor Inkscape and Adobe Illustrator et cetera.

DoubleType
DoubleType, last updated on 2013-04-17, is a downloadable font editor (type designer) that builds TrueType font files. Thanks to Java, it runs on Windows, Linux, & Mac. Glyphs are stored in XML based file to aid teamwork. Efficient glyph design by combining existing glyphs and modules. Users claim that it only supports .glyph files, not import of nor export of TrueType, which would require another program to do the translation.

Horus
I personally would advise you to skip this utility, as I could not find anything useful about it. Apparently, some good ground work was coded by Alessandro Crugnola, and rendered inside of Adobe's Flex web front-end environment. You can't edit font, you can't load a font, it is just a viewer for demonstration sake. Perhaps they make the libraries available, which I would assume are written in Python and Adobe's ActionScript.
For the sake of research, Crungnola now works in N.Y.C. for Aviary, a company that joined Adobe with their photo-editor App on iOS and Android, also released Horus.
Before clicking the link, please note that it is very rudimentary and actually requires a little instruction, which is not available on the direct link for the online web application. "You can see the rough results of our team's Flex experiment into parsing fonts into outlines. (Open a font from the top File menu and then drill down into and enter the glyph folder to select and play with the shapes)."

Bitmap Font Editor
Perhaps an excellent program to fork from GitHub and improve for your personal JAVA-based typographical needs. This is a small font editor for bitmap fonts. Kostas "Bad Sector" Michalopoulos originally used this code for a Flash game font developments. The downloadable code is licensed under zlib license terms. It was written in Java using NetBeans.

iFontMaker™
iFontMaker™ is targeted for the pad market. It is available for both Windows 8 interface (USD $4.99, 0.2 Mb) and iPad (USD $6.99, 0.3 Mb) by Eiji Nishidai with Pentacom, Japan.
iFontMaker™ claims to be the first font editor exclusive for iPad. Features include; rich textured brushes, support for pressure sensitive pen tablets, an online gallery, to ability to email the typography or convert it into a web font or a TrueType Font (TTF) file, which many Font Editors can import and which is commonly used on Windows platforms.
For information on how to install your own font on iOS7 device click the previous link, or take the scenic route via the App's 2ttf.com page.

iFontMaker Windows 8 Edition

iFontMaker iPad Edition

BitFontMaker2™
BitFontMaker2™ is a second version of Pentacom, Japan's online font-editor. Browser requirements are IE 9+, Firefox 2+, Chrome, Safari 5+ and/or Mobile Safari on iPad iOS5+.
Copyright can be set to PublicDomain, CC-BY, CC-NC or AllRightsReserved if you wish to share your font on the BitFontMaker Gallery. Brief but handy bilingual instructions (つかいかた) are available online.
One can import a True Type Font (TTF) from your local drive; however, this web-interface only handles a 16 x 16 pixel grid. The import/export function is done through an editable Javascript text object. Even with fine tuning, you will likely loose definition, and end up with a font that looks good on an Atari emulator. If you love nostalgia, there is always the original online BitFontMaker.

Custom iOS Fonts
Yet another gift from Pentacom, Japan. Custom iOS Fonts is fast and dirty hack for turning your local TTF or OTF font files into installable iOS .mobileconfig files. Upload your font, it gets converted, repackaged and downloads almost instantly. Just mail it to yourself and open it on your iPhone or iPad to install.

Working with Subject-Matter Experts (SMEs): Scope of Work Document

The following document accompanies the subject matter of Designers & Working with Subject-Matter Experts (SMEs).

When working with a SME, expect to spend equal time on each of these three tasks: building your relationship, creating the project vision and scheduling. Building the connection is important as it lays that initial ground work, so you don't find yourself in a stiff and detached project environment.

After the ice is broken, ask a few standard questions to get a feel for how your SME thinks. Do you have a "rapid fire talker" who goes from idea to idea with very little context, or maybe a methodical thinker who takes considerable time to ponder his answers.

In setting up a Shared Vision, you will want to define a target-market or who the intended audience is. What is the final product, what topics shall it cover and what shall the length or intensity be set at?

Building the schedule involves determining the "ship date" (deadline) and your start date. Break down the project's strategy into tasks, listing all the major tasks and estimating the time required for each one of those tasks. Take your tasks and try to build a sequential calender of individual mile-stones and then consider how to keep a level of accountability. Staying organized is effective and assisting in reminders of coming deadlines.

Instructional Design Project Kickoff - Scope of Work 

Instructional Designer:

SME:

Kickoff call date and time:

Contact details:

Phase 1: Establishing the Relationship 

In this first part of the call, you want to establish your working relationship and apply the great information 

you’ve already researched about your SME. This portion of the call might take 10-20 minutes depending 

on total call length.

1. What drew you to this field?

2. What’s most important to you about how you teach this topic?

3. If there’s one thing your message should leave in people’s minds, what is it?

Notes about SME speech patterns, interests, etc.:

Phase 2: Setting up a Shared Vision

In this second part of the call, you want to establish the scope and vision for your project. This portion of 

the call might take 10-20 minutes depending on total call length.

1. Who is the audience?

2. What does the audience need?

3. Will the final product be a manual, an elearning course, a video course, a training guide, something    

    else?

4. What topics will it cover? 

5. How long will it be? 

Notes about the project specifications:

Housekeeping details:

1. Communication method (phone, video chat, email, text, in person, etc.)?

2. How do you like to give feedback to me, and how do you like to receive feedback from me?

3. SME availability and yours (are you fully devoted to this project, both juggling this and others, etc.)

4. Big events on your calendars (Is there anything coming up in your schedule or personal life that might  

    impact the project? If so, how can we plan around it?)

5. An open understanding of budget if it’s a part of your project--getting a sense for what the availability is  

    even if you aren’t finalizing.

Phase 3: Building a Schedule

In this final part of the call, you want to establish the schedule you’ll keep. This portion of the call might 

take 10-20 minutes depending on total call length.

Project completion date:

Project start date:

Project task list:

Project milestone list:

Sequenced schedule:

Accountability notes:

WEBer Script WebFont Beta Release

WEBer Script Plain 1 Webfont

Just a quick posting of a handwritten web-font. It is the first that I have created since 1997. It is interesting how we the web is coming back to this old technical possibility.
This font will be open to the public when it is further cleaned of inconsistencies, omissions and a course of distribution is decided upon.
Such fonts as this are difficult to read, and should probably only be used in titles, headers and perhaps logos. Despite the irritation, I leave the majority of this text in a handwritten font for my own self-indulgence and observations. The last link of this article will take you to a more readable version.

Web Font Formats

EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF, and the list goes on. To find one’s way through in this veritable jungle of font formats is not exactly easy. Let’s have a closer look at the pros and cons of font formats that are particularly relevant for their use on websites.

TRUETYPE

This format was developed in the late 1980s as a competitor to Adobe’s Type 1 fonts used in PostScript. As a scalable outline format, it replaced the common bitmap fonts that were used for screen display at that time. Microsoft took up the TrueType format as well and it soon evolved into the standard format for system fonts due to the fact that it offered fine-tuned control for a precise display of font in particular sizes.

OPENTYPE

Microsoft and Adobe teamed up in developing this font format. Based on the TrueType format, OpenType offers additional typographical features such as ligatures, fractions or context sensitive glyphs and the like. However, browser support of these features which are common in sophisticated layout and illustration programs is still unsatisfactory. There are two different versions of OpenType fonts, depending on the outline technology used. There are:

• OpenType fonts with TrueType Outlines (OpenType TT) and
• OpenType fonts with PostScript Outlines (OpenType PS)

OpenType PS is a so-called CFF based file format (CFF = compact file format). This is relevant when using OpenType PS fonts as Web fonts, because PostScript based formats are displayed without subpixel rendering on Windows platforms which affects the rendering quality considerably. That’s why TrueType based fonts are the better choice as Web fonts, even though Microsoft will solve this rendering issue in the future. The structures of TrueType and OpenType fonts are very similar and browser support is available in Safari 3.1 and higher, Firefox 3.5 and Opera 10 (and of course newer versions).

EOT

Internet Explorer has supported the proprietary Embedded OpenType (EOT) standard from the late 1990s. It’s a variation of the TrueType and OpenType formats that provide the following particularities:
EOT fonts are a compact form of OpenType optimized for quick delivery on the Web due to data compression. By means of URL-binding, EOT fonts can be tied to a specific domain. The fonts can then only be delivered to and used on those Web pages. This technique helps prevent fonts from being copied and used without a licence.

EOT is exclusively supported by Internet Explorer. Even though it might not succeed as a Web font format in the future, it still makes sense to use this format today in order to supply the users of various IE versions with Web fonts. Current IE versions (< 9) do not use any other format.

If you want to convert TTF fonts to natively compressed EOT files, you can use EOTFast (a free application) currently available only for Windows.

WOFF

Unlike EOT, the Web Open Font Format (WOFF) is in the process of being standardized as a recommendation by the W3C which published WOFF as a working draft back in July 2010.

WOFF came into existence as a kind of a compromise between font foundries and browser companies, so it’s no wonder that WOFF has been developed by two font designers (Erik van Blokland and Tal Leming) in cooperation with Mozilla developer Jonathan Kew. Essentially, WOFF is a wrapper that contains TrueType and OpenType fonts, and it’s not really a new format of its own.

WOFF uses an integrated compression algorithm named zlib, which offers file size reduction for TrueType fonts exceeding 40%. Furthermore, meta data can be added, e.g. a user’s licence. However, this data presents only meta information and is not validated by browsers.

The format has been supported by Firefox since version 3.6, and by Google Chrome since version 5.0. All other browser manufacturers are working on adding full support in future releases. Fonts can be converted into the WOFF format by the online service Font Squirrel free of charge.

SVG Fonts

SVG fonts are text files that contain the glyph outlines represented as standard SVG elements and attributes, as if they were single vector objects in the SVG image. But this is also one of the biggest disadvantages of SVG fonts. While EOT, WOFF and PostScript-flavoured OpenType have compression built into the font format — SVG fonts are always uncompressed and usually pretty large.

SVG fonts are not really an alternative to the other Web font formats, and iOS 4.2 is the first version of Mobile Safari to support native Web fonts (in TrueType format) instead of SVG. However, SVG is the only format that can be used for the iPhone and iPad prior to iOS 4.2.

Tools, such as Font Squirrel, can be used to convert fonts into this format. Another possibility to obtain SVG fonts is to rent them from one of the numerous Web font providers.

Read more on implementing @font-face.