Property font-stretch memungkinkan kita untuk memilih wajah font yang normal, condensed, atau diperluas dari keluarga font. Ini disebut sebagai “lebar” font.

Sebagian besar keluarga font dikemas dengan wajah font yang berbeda. Property font CSS yang berbeda memungkinkan kita untuk memilih wajah font dari daftar wajah yang tersedia dalam keluarga font.

Lebar muka font dapat dipilih menggunakan salah satu dari sembilan kata kunci yang mungkin di CSS: normal, ultra-kondensasi, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extended, dan sangat diperluas.

Meskipun demikian, tidak semua keluarga font memiliki wajah yang sesuai untuk masing-masing lebar di atas. Ketika sebuah wajah tidak ada untuk lebar yang diberikan, nilai-nilai normal atau terkondensasi memetakan ke wajah yang lebih sempit, sebaliknya wajah yang lebih luas. Sebaliknya, nilai yang diperluas memetakan ke wajah yang lebih luas, jika tidak wajah yang lebih sempit. Gambar di bawah ini menunjukkan bagaimana pengaturan property font-stretch mempengaruhi pemilihan font untuk keluarga font yang berisi berbagai lebar, abu-abu menunjukkan lebar yang tidak ada wajah dan lebar yang berbeda diganti:

Pemetaan lebar untuk keluarga font dengan wajah lebar condensed, normal dan expanded

Jika font-family tidak memiliki wajah condensed atau expanded, nilai property font-stretch tidak akan berpengaruh, karena wajah font yang dihasilkan akan menjadi satu-satunya wajah yang tersedia hanya untuk semua nilai.

Property font-stretch tidak mengubah bentuk atau geometri font. Ini hanya digunakan untuk memilih salah satu wajah font yang tersedia yang cocok dengan nilai yang diberikan ke property.

font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | 
semi-expanded | expanded | extra-expanded | ultra-expanded