How can I use the font family 'Lato' in my project? [closed]

Question

I have used the style like this in my .css file but it is not working. What can I do to make my code work?

font-family: Lato, Helvetica, sans-serif;

link: http://www.google.com/fonts/specimen/Lato

Mae

is this font is present in ur Fonts folder in C drive? – Brenda

All the information you need is given on the Google fonts page for this font. You might need to scroll down a bit. – Nascent

@MikeW, +1, that should have been an answer. – Homosexual

can you download it I can tell you how to install at your website' – Lass

Answer 1

Please put this code in head section

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

and use font-family: 'Lato', sans-serif; in your css. For example:

h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

Or you can use manually also

Generate .ttf font from fontSquiral

and can try this option

    @font-face {
        font-family: "Lato";
        src: url('698242188-Lato-Bla.eot');
        src: url('698242188-Lato-Bla.eot?#iefix') format('embedded-opentype'),
        url('698242188-Lato-Bla.svg#Lato Black') format('svg'),
        url('698242188-Lato-Bla.woff') format('woff'),
        url('698242188-Lato-Bla.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}

Called like this

body {
  font-family: 'Lato', sans-serif;
}

Colwell

Your answer help me to get the Lato light font (using size 300) – Call

yes you can choose font-family from here prntscr.com/83rkv9 – Colwell

I tried many ways but it worked once I added 'sans-serif' part.... – Libb

yes, its sans-serif font so we need to use – Colwell

If this works for you in all browsers except Chrome, change http to https. – Tonettetoney

Yes, you are right mate – Colwell

I know this is a very old answer, but consider changing http:// to https://, because secure pages won't load fonts from an insecure html. – Cohberg

Yea, you are right. – Colwell

Answer 2

Download it from here and extract LatoOFL.rar then go to TTF and open this font-face-generator click at Choose File choose font which you want to use and click at generate then download it and then go html file open it and you see the code like this

@font-face {
        font-family: "Lato Black";
        src: url('698242188-Lato-Bla.eot');
        src: url('698242188-Lato-Bla.eot?#iefix') format('embedded-opentype'),
        url('698242188-Lato-Bla.svg#Lato Black') format('svg'),
        url('698242188-Lato-Bla.woff') format('woff'),
        url('698242188-Lato-Bla.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}
body{
    font-family: "Lato Black";
    direction: ltr;
}

change the src code and give the url where your this font directory placed, now you can use it at your website...

If you don't want to download it use this

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

Lass

No i want to use in my website . – Mae

font face generator is a good idea – Cuspidate