<h2>Cambon</h2>
<hr />
<h3>Cambon - Regular</h3>
<div class="row d-flex align-items-center">
<div style="font: 120px/2 'Cambon-Regular'" class="col-12 col-sm-3">Aa</div>
<div class="col-12 col-sm-9">
<p  style="font: 36px/1.2 'Cambon-Regular'; word-break: break-all">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890  è é ë ê ! * «  » ÷  , + - ? # @ / ' ’ œ </p>
</div>
</div>
<hr />
<h3>Cambon - Extra Bold</h3>
<div class="row d-flex align-items-center">
<div style="font: 120px/2 'Cambon-ExtraBold'" class="col-12 col-sm-3">Aa</div>
<div class="col-12 col-sm-9">
<p  style="font: 36px/1.2 'Cambon-ExtraBold'; word-break: break-all">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890  è é ë ê ! * «  » ÷  , + - ? # @ / ' ’ œ </p>
</div>
</div>
<h2>Roboto</h2>
<hr />
<h3>Roboto - Light</h3>
<div class="row d-flex align-items-center">
<div style="font: 120px/2 'Roboto-Light'" class="col-12 col-sm-3">Aa</div>
<div class="col-12 col-sm-9">
<p  style="font: 36px/1.2 'Roboto-Light'; word-break: break-all">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890  è é ë ê ! * «  » ÷  , + - ? # @ / ' ’ œ </p>
</div>
</div>
<hr />
<h3>Roboto - Regular</h3>
<div class="row d-flex align-items-center">
<div style="font: 120px/2 'Roboto-Regular'" class="col-12 col-sm-3">Aa</div>
<div class="col-12 col-sm-9">
<p  style="font: 36px/1.2 'Roboto-Regular'; word-break: break-all">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890  è é ë ê ! * «  » ÷  , + - ? # @ / ' ’ œ </p>
</div>
</div>
<hr />
<h3>Roboto - Bold</h3>
<div class="row d-flex align-items-center">
<div style="font: 120px/2 'Roboto-Bold'" class="col-12 col-sm-3">Aa</div>
<div class="col-12 col-sm-9">
<p  style="font: 36px/1.2 'Roboto-Bold'; word-break: break-all">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890  è é ë ê ! * «  » ÷  , + - ? # @ / ' ’ œ </p>
</div>
</div>