Provincely is a symbol font for embedding lightweight, responsive, and semantic maps of Canada in HTML.
Include the Provincely stylesheet and font files in your document <head>. It imports the web font and provides some basic required formatting. Default is 300 pixels square, but you can change the size by editing provincely.css. The package also includes the alternate provincely-base64.css file, which embeds the font directly in the css and requires no @import, if that's important to you.
Then include this HTML where you want the map to appear:
Lowercase letters ‘a’ to ‘m’ stand in for the ten provinces and three territories, in alphabetical order. You can also get a full map of Canada with a lowercase ‘n’. You can then individually target each province with CSS or Javascript using its standard two-letter code class.
In the tradition of Canadian Idol, The Real Housewives of Vancouver, and Top Chef Canada, Provincely is a fond ripoff adaptation of an American original, in this case Stately by Ben Markowitz of Intridea.
Provincely was, however, made from scratch by Graham F. Scott. I’m a hobbyist at best, so forks, pull requests, and improvements are all very welcome. Find me at @gfscott or email gfscott at ye olde gmail.
MIT License. Go wild.