<Input> Doesn't Inherit the Font from <Body>

Font-family is not inherited to the form input fields?

Yes, you need to place the font in the input tag.

input{
  padding:5px;
  font-size:16px;
  font-family:'Lucida Casual', 'Comic Sans MS';    
}

http://jsfiddle.net/jasongennaro/3fkNJ/1/

You can also use inherit to set the font on form fields.

input, textarea, select { font-family:inherit; }

http://jsfiddle.net/jasongennaro/3fkNJ/7/

EDIT - explanation added

Most browsers render text inside form elements as that of the user's operating system. This is to keep, as I understand it, a common look and feel for the user. However, it can all be overwritten by the code above.

Buttons and inputs not inheriting the body's font-family

Clause 6.1.1 Specified values of the CSS 2.1 specification defines as the first step: “If the cascade results in a value, use it.” Only after this will inheritance be considered. A browser style sheet (user agent style sheet) is conceptually part of the CSS cascade. So if it sets a value for font-family for an element, such as input or button, that value will be used, unless another style sheet sets it for that element.

Thus, if you want to use your font for input and button elements, too, you need to set e.g.

body, input, button {font-family: 'Indie Flower', cursive;}

Why textarea and textfield not taking font-family and font-size from body?

By default, browsers render most form elements (textareas, text boxes, buttons, etc) using OS controls or browser controls. So most of the font properties are taken from the theme the OS is currently using.

You'll have to target the form elements themselves if you want to change their font/text styles - should be easy enough by selecting them though, as you've just done.

As far as I know, only form elements are affected. Off the top of my head: input, button, textarea, select.

Why my child class doesn't inherit the font of parent class?

Inputs don't inherit the font of it's parent by default. You need to add:

input, select, textarea, etc... {
    font-family: inherit;
}

Why is 'font-family' not inherited in ' button ' tags automatically?

Form elements don't inherit font settings, you have to set these properties manually.

If you use font declaration for eg. body,

body {font-family: arial, sans-serif}

use just

body, input, textarea, button {font-family: arial, sans-serif}

input, textarea, button {font-family: inherit}

Spec for not-inheriting certain font settings in textarea

The answer to your question is pretty simple and it's not related to the specification. If you take the example of a textarea inside Google Chrome and inspect the element you will get the following:

Sample Image

The browser is applying a default font-family (and many other properties) so the inherit rule no more apply.

Now if you want to know how these default style are defined you need to consider each browser and its implementation since this is out of the scope of the CSS specification.

Why the textarea doesn't have the same font size with input text?

The font family is differnt make it same
add this

textarea{
   font-family:'Tahoma';
}

body {
  background: grey;
}

.form-control {
      width: 40%;
      padding: 10px;
      margin: 10px;
      border-radius: 1.5em;
      font-size: 1.1em;
      background-color: $white;
      border: none;
      color: black;
      resize: none;
      &:focus {
        outline: 0;
      }
    }
    button {
      padding: .5em .75em;
      margin: 10px;
      font-size: 1.1em;
      border-radius: 1.5em;
      background-color: $white;
      border: none;
      outline: 0;
      color: black;
      &:hover {
        color: $purple;
      }
    }
    textarea{
    font-family:'Tahoma';
    }

  <form action="https://formspree.io/f/" method="POST">
          <input
            name="name"
            type="text"
            class="form-control"
            placeholder="Full name"
            required
          />
          <br />
          <input
            name="_replyto"
            type="email"
            class="form-control"
            placeholder="Email"
            required
          />
          <br />
          <textarea name="message" class="form-control" placeholder="Message" rows="5" required></textarea>
          <br />
          <button type="submit">Send</button>
        </form>

Change font size inside input-fields with css

The input fields are not effected by font variations you make for the body element. You have to style them separately.

To change that, use

input[type=text] {
    font-size: inherit;
}