Changing Font-Size based on specific Font thru javascript

I am using an ‘rtl’ font (named as JNN) in horizontal menu bar, which is normal & readable at 18px where as the alternate available ‘rtl’ fonts (like Tahoma & Arial Unicode MS) on Windows are too much big at 18px.
Due to this dissimilarity in ‘font-width’, If a visitor to my wordpress-site has no JNN font installed on his computer, the menu-bar will shown to him in Tahoma/’Arial Unicode MS’ font and hence these fonts disturb the menu-bar-length due to high font-size.

Is there any solution through javascript to check the “font-availibility” at the user’s end, and if found use “Font-Size-A” and if not then use “Font-Size-B” ?

Read More

Any help will be highly appreciated.

Related posts

Leave a Reply

3 comments

  1. Not exactly what you asked for, but you can kind of “make sure” the user has the desired font through the @font-face css3 rule.

    According to caniuse.com about 95% of global users can use that css property, so it’s a good trade-off.

    Different browsers use different font formats however, so you’ll need to use http://www.fontsquirrel.com/fontface/generator to generate all your required fonts. The site will also provide you with some extra details on how to use the fonts.

    Paul Irish has a great blog post about font-face and how to use it properly here. (go to his blog and search for font-face) I would have posted the link myself but I can’t post more than one link cause I’m a new user.

    Hope this helps!

  2. This solution uses two stylesheets: wpse-4508-default.css and wpse-4508-small.css. We always load the default, and load the small version too if a certain font does not exist. We save the result in a cookie so the next time don’t need to do the test and extra loading on the client side, resulting in a smoother experience. The code is designed to run from your theme directory, so you can add the PHP code to your functions.php. I added some var_dump() and alert() lines to help you understand what goes on. I only tested it in Safari on Mac OS X.

    <?php
    add_action( 'wp_head', 'wpse4508_wp_head' );
    function wpse4508_wp_head()
    {
        // Always display our normal stylesheet
        wp_enqueue_style( 'wpse4508_default', get_stylesheet_directory_uri() . '/wpse-4508-default.css' );
        $urlSmallStylesheet = get_stylesheet_directory_uri() . '/wpse-4508-small.css';
        if ( ! array_key_exists( 'wpse4508_hasfont', $_COOKIE ) ) {
            // We don't know anything, detect it
            var_dump( 'No cookie info, loading JS' );
            wp_enqueue_script( 'wpse4508_detector', get_stylesheet_directory_uri() . '/wpse-4508-detector.js', array(), false, true );
            // Send the style sheet URL to the front
            wp_localize_script( 'wpse4508_detector', 'WPSE4508_Detector', array( 'url' => $urlSmallStylesheet ));
        } elseif ( 'false' == $_COOKIE['wpse4508_hasfont'] ) {
            // We know we should load the small stylesheet
            var_dump( 'Cookie info, no font, extra stylesheet via PHP' );
            wp_enqueue_style( 'wpse4508_small', $urlSmallStylesheet );
        }
    }
    
    // A simple div to test this code
    add_action( 'wp_footer', 'wpse4508_wp_footer' );
    function wpse4508_wp_footer()
    {
        echo '<div class="wpse4508_test">WPSE 4508 test</div>';
    }
    

    The wpse-4508-default.css file:

    .wpse4508_test
    {
        background-color: red;
        font-size: 20px;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 0;
    }
    

    The wpse-4508-small.css, with the extra rules. I don’t think !important is needed, since they load after the previous one, try this yourself.

    .wpse4508_test
    {
        background-color: green !important;
        font-size: 10px !important;
    }
    

    The Javascript file that detects the font and sets a cookie.

    var Detector = function(){
        var h = document.getElementsByTagName("BODY")[0];
        var d = document.createElement("DIV");
        var s = document.createElement("SPAN");
        d.appendChild(s);
        d.style.fontFamily = "sans";            //font for the parent element DIV.
        s.style.fontFamily = "sans";            //serif font used as a comparator.
        s.style.fontSize   = "72px";            //we test using 72px font size, we may use any size. I guess larger the better.
        s.innerHTML        = "mmmmmmmmmmlil";       //we use m or w because these two characters take up the maximum width. And we use a L so that the same matching fonts can get separated
        h.appendChild(d);
        var defaultWidth   = s.offsetWidth;     //now we have the defaultWidth
        var defaultHeight  = s.offsetHeight;    //and the defaultHeight, we compare other fonts with these.
        h.removeChild(d);
        /* test
         * params:
         * font - name of the font you wish to detect
         * return: 
         * f[0] - Input font name.
         * f[1] - Computed width.
         * f[2] - Computed height.
         * f[3] - Detected? (true/false).
         */
        function debug(font) {
            h.appendChild(d);
            var f = [];
            f[0] = s.style.fontFamily = font;   // Name of the font
            f[1] = s.offsetWidth;               // Width
            f[2] = s.offsetHeight;              // Height
            h.removeChild(d);
            font = font.toLowerCase();
            if (font == "serif") {
                f[3] = true;    // to set arial and sans-serif true
            } else {
                f[3] = (f[1] != defaultWidth || f[2] != defaultHeight); // Detected?
            }
            return f;
        }
        function test(font){
            f = debug(font);
            return f[3];
        }
        this.detailedTest = debug;
        this.test = test;   
    }
    
    WPSE4508_Detector.loadStylesheetIfNeeded = function() {
        var hasFont = new Detector().test('Andalus');
        alert( 'Testing for font: ' + hasFont );
        document.cookie = 'wpse4508_hasfont=' + (hasFont ? 'true' : 'false'); // Maybe add expiry date?
        if (!hasFont) {
            alert( 'Loading stylesheet via JS' );
            var elHead = document.getElementsByTagName('head')[0];
            var elLink = document.createElement('link');
            elLink.rel = 'stylesheet';
            elLink.type = 'text/css';
            elLink.href = WPSE4508_Detector.url;
            elHead.appendChild(elLink);
        }
    }
    
    WPSE4508_Detector.loadStylesheetIfNeeded();
    
  3. Q: Is there any solution through javascript to check the “font-availibility” at the user’s end, and if found use “Font-Size-A” and if not then use “Font-Size-B” ?

    Yes there is. It’s called JavaScript/CSS Font Detector and it can check for availability of fonts.

    After checking if a specific exists, you can add or remove a class to HTML elements that offer a pre-configured fallback styling then.