Continental is a specialized web font. It doesn't contain the typical letters and characters of a standard font; instead, its symbols are maps, specifically maps of the countries of Europe. Continental makes it easy to include these maps within web pages. Include the font like any other web font, and then use standard HTML and CSS to create maps. No Javascript and no complicated API calls are necessary. Continental is not a replacement for a mapping service like Google Maps. It can't provide directions, or traffic conditions, or even satellite images. But if you're creating simple diagrams or visualizations that include maps, Continental may be able to help.
Continental isn't (yet) available in any of the web font services, so you'll have to host it on your own web server. First you'll want to get the code from Github. Fork if you like, or simply download the master branch as a zip file.
The font itself is in the fonts folder.
There are four different formats which should cover all possible browsers
(even going back to IE6).
The css folder contains the
continental.css style sheet.
You can either include this style sheet directly in your pages,
or you can combine it with your other style sheets. By default
the styles give priority to the SVG font format because Windows
systems tend to render that more format more accurately. The
SVG file is much larger, however; if you'd rather optimize for
network performance instead of display quality, you can edit
continental.css to remove the
extra references.
Finally, there's a js folder with a
Javascript file for supporting IE6 and IE7. If you have to support
those browsers, you can include that file in your pages. Please use a
conditional comment so that other browsers don't see it. The
Javascript conflicts with the CSS styles, plus it really slows downs
performance.
Once you've installed the appropriate files on your server and added references to them in your web pages, using Continental is a piece of cake. Whenever you want to show a country map, simply include the following markup:
<span class="map-XX"></span>
Instead of XX use the
ISO 3166-1
two-letter abbreviation for the country you wish to show. Wikipedia has a
complete list
of those abbreviations. You can also use the class
map-eur to get a map for all of Europe.
Note: The
map-eursymbol is very complex (with all those Norwegian fjords, Greek islands, etc. combined into a single glyph), and most browsers take several seconds to render it. You might want to take extra steps to deal with any performance issues that this delay could create. As an alternative, you can simply combine all the countries in your markup (see next section). The browsers that have problems with themap-eursymbol don't seem to have problems with all 51 other symbols, even when they're combined on the page.
Each map is a single character, so you can apply CSS styles just like you
would to any text. Set the color, size, text shadows, etc. The font doesn't
include variations such as bold or italics, however, so keep the
font-style and
font-weight normal.
Check out the next section for some examples.
The font's design allows you to create maps by stacking individual country symbols on top of
each other. An easy way to do that is to start with a container tag and give that element a
position of relative.
.map-stack {
position: relative;
}
Within that element each individual country symbol can be give a
position of
absolute and the same
top and left coordinates.
That will overlay each country on top of the one before it.
.map-stack > [class*="map-"] {
position: absolute;
top: 0;
left: 0;
}
Of course, you can style the countries individually. Perhaps you might set
the base color of the entire European map to lightgray
and then individual countries worthy of highlighting to
steelblue.
With those styles, creating the map is simple. Here's an example showing the countries that have adopted the Euro currency.
<figure>
<figcaption>Eurozone Countries</figcaption>
<div class="map-stack">
<span class="map-eur"></span>
<span class="map-ad"></span>
<span class="map-at"></span>
...
<span class="map-sk"></span>
</div>
</figure>Here are all of the individual glyphs in the font. (At this size it's hard to see some of the microstates, but they're there if you need them.)
The Continental font is licensed under the SIL Open Font License and is free for commercial and non-commercial use with no restrictions or constraints.
The supporting files (CSS and Javascript) are products of the icomoon.io web app and are licensed under the open source MIT license.
In a nutshell, you're free to use Continental however you'd like, in free or commercial projects. You don't have to include any attribution, though one is always appreciated. If you do use Continental, and can send me a note, I'll add your project to the list of examples.
Even though my name is in the footer, this project would not have been possible without a lot of other folks.
