Overview

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.

Using the Font

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.

Download →

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-eur symbol 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 the map-eur symbol 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.

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>
Number of Official Languages
1    2    3    4 Source: nationsonline.com
 
The Eurozone

Reference

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.)

    • Andorra
    • class: map-ad
    • Albania
    • class: map-al
    • Austria
    • class: map-at
    • Bosnia
    • class: map-ba
    • Belgium
    • class: map-be
    • Bulgaria
    • class: map-bg
    • Belarus
    • class: map-by
    • Switzerland
    • class: map-ch
    • Cyprus
    • class: map-cy
    • Czech Republic
    • class: map-cz
    • Germany
    • class: map-de
    • Denmark
    • class: map-dk
    • Estonia
    • class: map-ee
    • Spain
    • class: map-es
    • Finland
    • class: map-fi
    • Faroe Islands
    • class: map-fo
    • France
    • class: map-fr
    • Georgia
    • class: map-ge
    • Guernsey
    • class: map-gg
    • Greece
    • class: map-gr
    • Croatia
    • class: map-hr
    • Hungary
    • class: map-hu
    • Ireland
    • class: map-ie
    • Isle of Man
    • class: map-im
    • Iceland
    • class: map-is
    • Italy
    • class: map-it
    • Jersey
    • class: map-je
    • Liechtenstein
    • class: map-li
    • Lithuania
    • class: map-lt
    • Luxembourg
    • class: map-lu
    • Latvia
    • class: map-lv
    • Monaco
    • class: map-mc
    • Moldova
    • class: map-md
    • Montenegro
    • class: map-me
    • Macedonia
    • class: map-mk
    • Malta
    • class: map-mt
    • Netherlands
    • class: map-nl
    • Norway
    • class: map-no
    • Poland
    • class: map-pl
    • Portugal
    • class: map-pt
    • Romania
    • class: map-ro
    • Serbia
    • class: map-rs
    • Russia
    • class: map-ru
    • Sweden
    • class: map-se
    • Slovenia
    • class: map-si
    • Slovakia
    • class: map-sk
    • San Marino
    • class: map-sm
    • Turkey
    • class: map-tr
    • Ukraine
    • class: map-ua
    • United Kingdom
    • class: map-uk
    • Vatican City
    • class: map-va
    • Europe
    • class: map-eur

License

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.

Acknowledgements

Even though my name is in the footer, this project would not have been possible without a lot of other folks.

  • First and foremost, thanks to Ben Markowitz. As soon as I saw his cool Stately font, I knew I had to try my hand at it. (I do hope he understands that imitation is the sincerest form of flattery.)
  • Of course Continental wouldn't be possible without maps. For those I thank Marcin Floryan for his contribution to Wikimedia Commons.
  • Bohemian Coding makes the best web design app in the world: Sketch 2. Sketch 2 made it easy to generate individual country files from the complete map.
  • Keyamoon's awesome icomoon.io has all the tools you need to create perfect symbol fonts for the web. The technology is top-notch, and the web app is a joy to use.
  • Finally, thank you (yes, you) for your interest.