I have got this annoying problem where I cant seem to find a way to use specific styles from the ACTUAL font family and NOT with css or html styling.

In my case I am linking in to the html Google's Webfont: Lato. Now I only need the styles Normal400 and Bold700Italics.

Naturally, when you select the fonts on googlefonts, it generates the codes automatically. I copy and paste both codes one in my html doc and the other in the css. but I can't find out how to use the styles Normal400 and Bold700Italics of the font lato.

What I am getting at is the same as using a FONTS' 'italic' and 'bold' styles rather then an emphasis or bold tag in html to style. There is a massive difference in the outcome of the font's aesthetics.

Is there a way of doing this? If so, do I have to use the @fontface rule in my css or is there another way round it as I am scared of using this rule sometimes.

I have looked everywhere, even on google's forums and they all give the same answer: "font styling with css or html."

It’s not clear what the problem is. But basically, when you have used a link element, as suggested by Google, to use Lato in regular and bold italic typeface, then any text for which you declare font-family: Lato, will appear
a) in Lato Regular, if its font weight and font style are normal
b) in Lato Bold Italic, if it has both font-weight: bold and font-style: italic applying to it
c) something else in other cases, possible e.g. synthetically bolded Lato Regular, if font weight has been set to bold but font style is normal.

For example, the following produces first Lato Regular, then Lato Bold Italic. You can (and normally should) use other markup or CSS instead; this is just a simplistic example: