How to overlay two fonts with css

Question

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?

I'm not sure but i think it can't be done, consider just creating a combined font somehow and using that one. — eric.itzhak, Jun 14 '12 at 10:38
you can create two different elements with `position:absolute;` so can overlap one over other... — Bongs, Jun 14 '12 at 10:41
looking for a pure css solution or are you ok with having to alter your HTML for this? — techfoobar, Jun 14 '12 at 10:45
What is your problem? I can not find your attempts to do it yourself — Vladimir Starkov, Jun 14 '12 at 10:47
@techfoobar pure css would be nice, but from the answers below I guess I will have to alter the html — Tom, Jun 14 '12 at 10:58
@ThomasLeFeuvre - Please see my answer below for a CSS only solution. Optionally a little JS too (will expand my answer to make it a generic solution) — techfoobar, Jun 14 '12 at 13:15

score 5 · Accepted Answer · edited May 23 '17 at 11:59

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

score 4 · Answer 2 · answered Jun 14 '12 at 10:41

Add position:relative to your first and the second font and add top:-20px or whatever (value should be negative) is the size of the font and specify z-index:2 to the font you want to be above and z-index:1 to the font you want below...

Example

.first {
font-size:20px;
position:relative;
z-index:2;
}
.second {
position:relative;
top:-20px;
z-index:1;
}

score 2 · Answer 3 · answered Jun 14 '12 at 10:41

2

Put both the text with different fonts in seperate Div's & add css position:absolute to both th divs & wrap these two divs with a div with position absolute.

<div style="position:relative">
  <div style="position:absolute; z-index:2;">Content with different fonts(On Bottom)</div>
  <div style="position:absolute; z-index:3;">Content with different fonts (On top)</div>
</div>

answered Jun 14 '12 at 10:41

SVS

4,245
1
23
28

I don't think you need to set `z-index` as the second child div will be rendered later and be on top by default. – Bongs Jun 14 '12 at 10:49
1

@Bongs Ya u are right but if suppose he/she has to add few more div with absolute positioning. Just want to be on safe side. – SVS Jun 14 '12 at 10:52

score 1 · Answer 4 · answered Jun 14 '12 at 10:49

Absolutely positioning two <div> elements (or similar) would create the effect, but don't forget to give one a higher z-index to make it the 'overlayed' font.

JSFiddle

HTML

<html>
    <head></head>
    <body>
        <div class="first-font-positioned">This is my Frankenfont</div>
        <div class="second-font-positioned">This is my Frankenfont</div>
    </body>
</html>

CSS

.first-font-positioned{
    font-family: Cooper Hilite;
    font-size:30px;
    position:absolute;
    top:100px;
    left:100px;
    z-index:100;
}

.second-font-positioned{
    font-family: Cooper Black;
    font-size:30px;
    position:absolute;
    top:100px;
    left:100px;
}

score 1 · Answer 5 · answered Jun 14 '12 at 11:11

This would be possible without altering the HTML, but you would have to use a bit of javascript (jQuery).

$('p.layerfont').each(function(index) {
    $(this).wrap('<div class="layerwrap" />');
    var ptext = $(this).text();
    $(this).css('position: absolute;');
    $(this).after('<p class="toplayer">'+ptext+'</p>');
});

This wraps each paragraph in a containing div, then adds another paragraph with the same text both of which are absolutely positioned on top of each other.

http://jsfiddle.net/zxaEh/

How to overlay two fonts with css

5 Answers5