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

    How to style
  • s inside
      as a table with custom height?
  • How to float Dojo DropDownMenu over a table cell

    How to reffer in CSS to an input which has class attached to?

    How do I make it impossible to highlight text using CSS?

    How can I fill a fixed-size
    with a variable-size

    ?

    How to remove blue highlight when you hold on input buttons in css? [closed]

    How can I adjust this carousel to only pause when user mouses over one of the boxes?

    Selenium: How to get text from within an html tag which has another tag in it

    How to make a close button for each image inside the div using CSS and js

    How to keep text in same position?

    How to create new div immediately next to image like on Facebook's news feed on right side of page?

    How to add all li of existing ul to the bottom of another ul base on their css classes

    How do people make sections in HTML pages? [closed]

    How can I get the name of a page via Laravel Blade

    How to style a video iFrame?

    How can I get 3 lines of text on the same line and still be able to position them?

    How to place a div at top center position of a page using css…?

    How do I get the height of a textarea

    How to fit image into table cell by height with CSS (where the height is not defined explicitly)

    How to arrange dissimilar
    elements to flow inline inside an
    element

    jQuery / CSS: How to add page breaks dynamically

    How can I make the height of a div section to automatically adapt to the height of its content?

    how to have css affect other divs in the same container

    Bootstrap and CSS: how to make a text area (div) behave like a responsive image

    How to achieve a left and right background split leaving middle div visible?

    How to make a Sass mixin declare a non-nested selector on base level?

    How to avoid with css when background of the second line covers the letters of the first line?

    How do I insert a custom font to text with CSS? [duplicate]

    How can I set the Eclipse JS to edit a file as CSS

    How do you put