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:

Any takers?

Solution :

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

Check this fiddle:

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


<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:

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 trigger a modal view with Highcharts, when zoom is also enabled?

    Nth-child css property is counting html elements with display property set to none. How to change it?

    How do I spilt the footer into different widths?

    How can I simplify this JavaScript code

    How to wait for resources to be loaded

    How can these images to fit on the screen?

    How to slide an element without removing it from DOM ( A psudo slide maybe)?

    How to make

    How to create a proper class structure?

    How can i scroll to specific ID using Header?

    How to create donut chart in pure css & svg

    How to change content of a div by clicking a button outside the div?

    How do you run javascript with only a CSS class?

    How to Scale Down a Large Image Using HTML and/or CSS

    How to move elements inside the left column of a 2 column css grid above and below the main content area on collapse

    How can I disable my css sprite nav bars hover state for a section while it is active?

    How to link Body/Html Backgrounds with CSS in Ipad/Iphone (safari)

    How to align image and download button in css?

    How to implement padding-free sprites in css?

    How to apply css to link in dropdown table using arrow keys and hover event?

    How to have the nav and footer more than 1000px?

    jQuery: How to check if an element exists and change css property

    How to make only background image transparent in responsive square grid?

    How to use Chrome Inspector to show the popup css for a jquery plugin

    how to combine multiple css class selectors into one?

    How to retrieve the background image url defined in CSS?

    HTML/CSS: how to position forms? [closed]

    How to force span to use parent font-family in CSS

    How can I correctly type css float?

    How to place Social media icons on right side of navbar