Specimen
Lato
The quick brown fox jumps over the lazy dog
Typography is the craft of endowing human language with a durable visual form. It connects the smallest mark on a page to the largest cultural questions a society can ask of itself.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 .,;:!?&@#$%
abcdefghijklmnopqrstuvwxyz
0123456789 .,;:!?&@#$%
Weights and styles
Every weight in the family, rendered live in Lato from the Google Fonts CDN.
Thin · 100
The quick brown fox jumps
Thin Italic · 100
The quick brown fox jumps
Light · 300
The quick brown fox jumps
Light Italic · 300
The quick brown fox jumps
Regular · 400
The quick brown fox jumps
Regular Italic · 400
The quick brown fox jumps
Bold · 700
The quick brown fox jumps
Bold Italic · 700
The quick brown fox jumps
Black · 900
The quick brown fox jumps
Black Italic · 900
The quick brown fox jumps
CSS embed code
Drop the @import or <link> tag into the head of your document, then declare the family in your stylesheet.
CSS @import
/* Add to the top of your CSS file */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
/* Then use the family */
body {
font-family: 'Lato', sans-serif;
}
HTML <link>
<!-- Add inside <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">