Changing Font-Size based on specific Font thru javascript

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!

   Log in to Reply

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();
   

   Log in to Reply

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.

   Log in to Reply