How to style JavaScript created text using CSS's @font-face


Tags: javascript,css,raphael,font-face

Problem :

I'm trying to create a page which uses java script to get data via PHP and then display it using a custom font declared in a CSS style sheet. The entire page should use one custom font which I have declared in the main CSS file using @font-face like so:

@font-face {
    font-family: 'bauhaus';
    src: url('fonts/Bauhaus.woff') format('woff'),
    font-weight: normal;
    font-style: normal; }

My HTML file looks like this:

<html>  
<head> 
    <script type="text/javascript" src="resources/raphael-min.js"></script>  
    <script type="text/javascript" src="resources/index.js"></script> 
    <link href="Main.css" rel="stylesheet" type="text/css">
    <style type="text/css">  
        #canvas_container {  
            width: 100%;  
            border: 1px solid #aaa; 
            font-family:'bauhaus', "Times New Roman", Times, serif;
        }  
    </style>  
</head>  
<body>  
    <div id="canvas_container">FONTTEST</div>  
</body>  
</html>  

Within the index.js I can create text objects using Raphaeljs' syntax like so:

var txt = paper.text(150, 590, 'Test123').attr({'font-family': bauhaus, 'font-size':'70', fill:'#000'});

If I do it like that no 'Test123' text appears at all (I assume because it can't find or use the style 'bauhaus') and if I remove the font-family attribute it shows me text using the browser's default style which in my case is Arial. The 'FONTTEST' text on the other hand is displayed correctly using the correct @font-face Font.

Now my question is how to automatically have text created by Raphaeljs (or other Javascript libraries) follow the style declared by the CSS statements? I like using custom fonts but I can't find a proper solution on how to easily use the stylized text with Javascript.

Thanks for your help!



Solution :

Well, after a bit of searching through Raphael's code I found it automatically sets its own font style (Arial) on all its text elements. I don't think that really makes sense, especially since I couldn't figure out on how to override it with a CSS '@font-face' font, but ok. My solution was to simply delete the automatic setting of the font attribute in Raphael's source code.

For anyone interested, it's in the part where theText is declared. Just delete the font: availableAttrs.font bit in res.attrsand everything will obey the CSS style you want.


    CSS Howto..

    OS X is messing with me css, how to fix

    How to do proper and responsive Image Grid view with display:flex [duplicate]

    Chrome and Firefox handle zoom differently. How to deal with this in my CSS

    How to apply CSS to elements that have multiple classes?

    Child div's evenly spaced and flushed to side of parent: how to?

    How to use an image more than one place in CSS

    How do I align an item to the right inside a flex container?

    How to use custom CSS with my Sharepoint WebPart?

    How to place an element in top of another using CSS (without using absolute position)?

    Bootstrap 3 Glyphicons not showing correctly

    How to set the css properties with its own data-attributes?

    How to load jQuery before CSS code?

    How to position and style blockquote in css

    How can a user add content to a website? [closed]

    How do you make a div display two inline items that stretch the width?

    How to hide a soft hyphen (­) in HTML / CSS

    How to stretch text in CSS like microsoft word?

    how the rises up and down button is made?

    Responsive menu show and hide on click

    How to size a div box in CSS so text is centered regardless of length

    CSS Rotation and Styling - how to?

    How to convert 2 css files into one swf file in flex 4.11 SDK

    How do I draw the lines of a family tree using HTML CSS?

    CSS border - how to populate content inside div with border

    How do I know when to use a Class, an ID or HTML5 to make layouts in HTML using CSS? [closed]

    toggle show/hide for hidden menu buttons (responsive)

    views_slideshow controls modification Drupal 7

    CSS: How to define spacing between responsive columns

    jQuery wait for show()? Getting wrong data

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