Suppose I embedded the font files for Arial , Georgia and other commonly available font files on any system on my website too using @font-face... would this result in a clash of the font files and the subsequent FOUT issues? Or is it that the browser loads the @font-face for a family only when it does not receive the font families in the client system?
If you use a @font-face rule containing the declaration font-family: Arial, then you will hide a font named Arial installed in the user’s system. CSS3 Fonts, clause 4.2 says: “If the font family name is the same as a font family available in a given user's environment, it effectively hides the underlying font for documents that use the stylesheet. This permits a web author to freely choose font-family names without worrying about conflicts with font family names present in a given user's environment.”
This does not depend on the actual font you are embedding, just on the name you are giving to it in @font-face. (Embedding the real Arial would probably constitute a copyright infringement, by the way.)