June 11 | Filed under: Coding tips

Adding vector images to a page using webfonts

Replacing single glyphs with alternates

In this example an ampersand is replaced with an alternate version from an embeddable webfont. This is done without even touching the HTML code of the text. With the descriptor “Unicode-Range“ it is possible to limit the webfont replacement to certain Unicode ranges or even single characters. In this example it is used for a design purpose, but this feature might be very useful in lots of different areas.

DEMO: http://opentype.info/webfont-demo/ampersand/

CSS

@font-face {
font-family: Ampersand;
src: url(ampersand.otf) format("opentype"); 
unicode-range:U+0026;
}

HTML

<h1>Small <span class="red">&</span> Caps Inc.</h1>

Replace a text with a logotype

In this example a certain phrase is automatically replaced with a single logotype glyph from an embeddable webfont. The replacement doesn’t require JavaScript and the underlying text remains untouched. It can be indexed and copy & paste keeps working. Since the embedded logotype is treated like any other character on this website, it will always automatically scale properly when the text size in the browser is changed.

DEMO: http://opentype.info/webfont-demo/logotype/

CSS

@font-face {
font-family: Logotype;
src: url(Logotype.otf) format("opentype");
}
.logotype {
font-family:Logotype;
color:#66CC66;
}

HTML

<h1><span class="logotype">Webfonts Inc</span> presents:</h1>

Links