Skip to content Skip to sidebar Skip to footer
Home / Fonts / Html / Javascript

How Do I Generate A Random Font To A Line Of Text Every Time Page Is Refreshed?

Post a Comment
I am trying to generate a new font every time my page is refreshed from a list in my JavaScript. I want 4 fonts total, and I want the line that reads 'Font' to be the font that act

Solution 1:

You want document.getElementById("fontfamily").style.fontFamily;

Whenever you want to style an element using JavaScript, use .style then camelcase the css attribute. so font-family becomes fontFamily, background-image becomes backgroundImage

var fontType = [ "Arial", "Verdana", "Helvetica"];
var num;
num=Math.floor(Math.random()*3);
document.getElementById("fontfamily").style.fontFamily =fontType[num];

http://jsfiddle.net/DZnbR/

Solution 2:

Here you go :

<!DOCTYPE html><html><head><metacharset="utf-8"><title></title><linkhref="https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Roboto"rel="stylesheet"><style>.Roboto{
                font-family: 'Roboto', sans-serif;
            }
            .Open_Sans{
                font-family: 'Open Sans', sans-serif;
            }
            .Roboto{
                font-family: 'Raleway', sans-serif;
            }
        </style></head><bodyid="body"><script>var fonts = ['Roboto', 'Open_Sans', 'Raleway'];
            var rand = fonts[Math.floor(Math.random() * fonts.length)];
            console.log(rand);

            var bodyElement = document.getElementById("body");
            bodyElement.className = rand;
        </script></body></html>

Post a Comment for "How Do I Generate A Random Font To A Line Of Text Every Time Page Is Refreshed?"