Roboto font

By Google on Aug 02, 2018

Roboto

Roboto

Roboto

Roboto

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

This is the normal family, which can be used alongside the Roboto Condensed family and the Roboto Slab family.
AAAaaa
<style type="text/css">
@font-face{
    font-family:"roboto-thin";
    src:url("https://fontsme.com/wp-data/r/820/820/file/roboto.thin.ttf") format("woff"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.thin.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.thin.ttf") format("truetype");
}
span.font0{font-family:"roboto-thin";font-size:px;text-transform:;}
</style>
Roboto Thin
<style type="text/css">
@font-face{
    font-family:"roboto-thin-italic";
    src:url("https://fontsme.com/wp-data/r/820/820/file/roboto.thin-italic.ttf") format("woff"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.thin-italic.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.thin-italic.ttf") format("truetype");
}
span.font1{font-family:"roboto-thin-italic";font-size:px;text-transform:;}
</style>
Roboto Thin Italic
<style type="text/css">
@font-face{
    font-family:"roboto-light";
    src:url("https://fontsme.com/wp-data/r/820/820/file/roboto.light.ttf") format("woff"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.light.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.light.ttf") format("truetype");
}
span.font2{font-family:"roboto-light";font-size:px;text-transform:;}
</style>
Roboto Light
<style type="text/css">
@font-face{
    font-family:"roboto-light-italic";
    src:url("https://fontsme.com/wp-data/r/820/820/file/roboto.light-italic.ttf") format("woff"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.light-italic.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.light-italic.ttf") format("truetype");
}
span.font3{font-family:"roboto-light-italic";font-size:px;text-transform:;}
</style>
Roboto Light Italic
<style type="text/css">
@font-face{
    font-family:"roboto-regular";
    src:url("https://fontsme.com/wp-data/r/820/820/file/roboto.regular.ttf") format("woff"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.regular.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.regular.ttf") format("truetype");
}
span.font4{font-family:"roboto-regular";font-size:px;text-transform:;}
</style>
Roboto Regular
<style type="text/css">
@font-face{
    font-family:"roboto-italic";
    src:url("https://fontsme.com/wp-data/r/820/820/file/roboto.italic.ttf") format("woff"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.italic.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.italic.ttf") format("truetype");
}
span.font5{font-family:"roboto-italic";font-size:px;text-transform:;}
</style>
Roboto Italic
<style type="text/css">
@font-face{
    font-family:"roboto-medium";
    src:url("https://fontsme.com/wp-data/r/820/820/file/roboto.medium.ttf") format("woff"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.medium.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.medium.ttf") format("truetype");
}
span.font6{font-family:"roboto-medium";font-size:px;text-transform:;}
</style>
Roboto Medium
<style type="text/css">
@font-face{
    font-family:"roboto-medium-italic";
    src:url("https://fontsme.com/wp-data/r/820/820/file/roboto.medium-italic.ttf") format("woff"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.medium-italic.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.medium-italic.ttf") format("truetype");
}
span.font7{font-family:"roboto-medium-italic";font-size:px;text-transform:;}
</style>
Roboto Medium Italic
<style type="text/css">
@font-face{
    font-family:"roboto-bold";
    src:url("https://fontsme.com/wp-data/r/820/820/file/roboto.bold.ttf") format("woff"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.bold.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.bold.ttf") format("truetype");
}
span.font8{font-family:"roboto-bold";font-size:px;text-transform:;}
</style>
Roboto Bold
<style type="text/css">
@font-face{
    font-family:"roboto-bold-italic";
    src:url("https://fontsme.com/wp-data/r/820/820/file/roboto.bold-italic.ttf") format("woff"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.bold-italic.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.bold-italic.ttf") format("truetype");
}
span.font9{font-family:"roboto-bold-italic";font-size:px;text-transform:;}
</style>
Roboto Bold Italic
<style type="text/css">
@font-face{
    font-family:"roboto-black";
    src:url("https://fontsme.com/wp-data/r/820/820/file/roboto.black.ttf") format("woff"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.black.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.black.ttf") format("truetype");
}
span.font10{font-family:"roboto-black";font-size:px;text-transform:;}
</style>
Roboto Black
<style type="text/css">
@font-face{
    font-family:"roboto-black-italic";
    src:url("https://fontsme.com/wp-data/r/820/820/file/roboto.black-italic.ttf") format("woff"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.black-italic.ttf") format("opentype"),
    url("https://fontsme.com/wp-data/r/820/820/file/roboto.black-italic.ttf") format("truetype");
}
span.font11{font-family:"roboto-black-italic";font-size:px;text-transform:;}
</style>
Roboto Black Italic

Ad1

ad2