How to overlay two fonts with css

css, fonts

Solution

Well, one way of doing it purely with CSS is by using the `:after` pseudo element.

Check this fiddle: http://jsfiddle.net/4xgdv/

The original element is `relative` and its `pseudo child` is `absolute` at `0, 0` to ensure that it properly overlays the original element.

HTML

<div class="doublefont">HELLO</div>

CSS You can remove the div. part to make it applicable to all elements

div.doublefont {
    position: relative;
    color: red;
    font-family: arial;
}
div.doublefont:after {
    content: "HELLO";
    color: blue;
    font-family: tahoma;
    position: absolute;
    top: 0;
    left: 0;
}

Making it generic

You can add a little bit of JS to automatically have all elements on your page with a class `doublefont` to show up with superimposed fonts. That is, you need to simply put in elements like `<div class="doublefont">My text..</div>` and the following JS in combination with the above CSS will do the rest. You can place the following JS into the `<head>` of your page.

$('.doublefont').each(function() {
     $(this).attr('content', $(this).html());
});

Updated Fiddle: http://jsfiddle.net/4xgdv/1/

Also, take a look at this related answer. This is from where I got the `attr(content)` hint.

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

Problem

I have two fonts, Cooper Black and Cooper Hilite. I would like to place them on top of each other, as in this image: http://viewerslikeu.squarespace.com/storage/720x360_1.png Any takers?

Original source

Related problems