How to overlay two fonts with css


Tags: css,fonts

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?



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.

Manipulating CSS :before and :after pseudo-elements using jQuery


    CSS Howto..

    How to create the Facebook Status arrowed textbox?

    How to make gridview and cells bigger?

    How to implement a web page that scales when the browser window is resized?

    How To Sync CSS Animations Across Multiple Elements?

    How to override GWT obfuscated style for DataGrid header

    How to distribute p:menuitems in p:menubar accordingly?

    How do you group similar n-th child selectors? [duplicate]

    How can I create a full height responsive horizontal scrolling list of images with CSS

    How to avoid AjaxMin removal for IE9 and below CSS hack

    How do I make hidden description text push the content upwards when it shows

    How do I make my div with six different pictures expand outwards when clicking it?

    How to overlap items in an unordered list using CSS?

    Show and Hide option for DIV(needs modification)

    How to center the pagination in jQuery Bootstrap DataTables plugin?

    How to toggle animate with css display:none

    How can I attach an object to a fixed location on an image?

    How to center a textarea using CSS?

    How to get the initial value of style properties in javascript? [duplicate]

    How to get a website's position setup in a way that an image is centred?

    How do you set a JavaScript onclick event to a class with css

    How to make an entire div clickable with CSS [closed]

    How to convert RGBA to filter for older IE browsers

    Get the Navbar to show when hovering over header image

    How to create javascript or css fadeInDown on mouseover?

    How to position iframe (calendar) inside php echo statement?

    How to make a DIV section clickable?

    How to make a div tag without margins in css? [duplicate]

    How to change social network icons colors in fixed menu?

    How can I get two form fields side-by-side, with each legend above the field?

    How to make an element with fixed position relative to its parent, not the whole screen?