Use 'specifically' font's style not html or css font style (google fonts)

Question

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."

The font should adhere to the respective CSS properties, `bold` should give the default bold version, `bolder` the next x00, and so on. — Grant Thomas, Feb 13 '13 at 12:02

score 0 · Answer 1 · answered Feb 13 '13 at 12:05

Link to the fonts:

<link href='http://fonts.googleapis.com/css?family=Lato:400,700italic' rel='stylesheet' type='text/css'>

Declare the font in your css:

.Lato-italic-700 {
    font-family: 'Lato', arial, sans-serif;
    font-style: italic;
    font-weight: 700;
}

Place the class on the element you want it to be displayed on:

<p class="Lato-italic-700">This is Bold 700 Italic text</p>

score 0 · Answer 2 · answered Feb 13 '13 at 16:48

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:

<!doctype html>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700italic' 
      rel='stylesheet' type='text/css'>
<style>
body { font-family: Lato; }
</style>
Hello<br>
<i><b>Hello</b></i>

If problems remain, please post your HTML and CSS code and explain what you mean by “font's style not html or css font style” and how you can tell the difference from the visual appearance.

Use 'specifically' font's style not html or css font style (google fonts)

2 Answers2