How to change the font of the first word in a sentence and the remainder of a sentence in a different font?

Question

Thus, I use wordpress, and I show the title, and this title is more than one word. So I need to add the first word font-family:'font1';, and add the rest font-family:'font2';. Any suggestion how can I do this?

  <div class="main-title"><span><?php echo the_title(); ?></span></div>

Answer 1

You need to look at the index of the first space, and then add a specific class:

$('p').each(function() {
   var word = $(this).html();
   var index = word.indexOf(' ');
   if(index == -1) {
      index = word.length;
   }
   $(this).html('<span class="first-word">' + word.substring(0, index) + '</span>' + word.substring(index, word.length));
});

Then enter the style. first-wordclass

.first-word{
    font-family:'font1';
}

For more information see http://webdesignerhut.com/style-first-letter-word-line-and-paragraph-with-css-and-jquery/