Slab-serif typefaces have been widely used on newspapers, magazines, adverts etc. due to their attractive bold appearance. These type of fonts are perfect for headings and bold quotes in both screen and print media.

Slab-serif typefaces are inherited from the early typewriter era and are also known as Egyptian, Square-shaped or Mechanist fonts. Although they are a bit out-of-trend nowadays, however artists are coming up with Slab-serif fonts with modern style that are liked a lot.

Modern Slab serif fonts are quite popular on web – used by some of the well-known brands like Mashable, Copyblogger and more. Museo Slab is one of the most popular modern slab fonts on web. Below are more fonts that lie in the same category and are absolutely free to use on web or anywhere. The fonts are picked from Google Fonts Library, and you may quick test them in your browser using the HTML & CSS code provided below each font in the list.

1. Arvo

   
   

   HTML

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo" />
   <h2>Testing "Arvo" font</h2>

   CSS

   h2 {
   	font: 400 3.5em/125% 'Arvo', serif;
   	color: #333;
   }

   Arvo

2. Rokkit

   
   

   HTML

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Rokkitt" />
   <h2>Testing "Rokkitt" font</h2>

   CSS

   h2 {
   	font: 400 3.5em/125% 'Rokkitt', serif;
   	color: #333;
   }

   Rokkit

3. Alfa Slab One

   
   

   HTML

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Alfa+Slab+One" />
   <h2>Testing "Alfa Slab One" font</h2>

   CSS

   h2 {
   	font: 400 3.5em/125% 'Alpha Slab One', serif;
   	color: #333;
   }

   Alfa Slab One

4. Josefin Slab

   
   

   HTML

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Slab" />
   <h2>Testing "Josefin Slab" font</h2>

   CSS

   h2 {
   	font: 400 3.5em/125% 'Josefin Slab', serif;
   	color: #333;
   }

   Josefin Slab

5. Crete Round

   
   

   HTML

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Crete+Round" />
   <h2>Testing "Crete Round" font</h2>

   CSS

   h2 {
   	font: 400 3.5em/125% 'Crete Round', serif;
   	color: #333;
   }

   Crete Round

6. Kreon

   
   

   HTML

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Kreon" />
   <h2>Testing "Kreon" font</h2>

   CSS

   h2 {
   	font: 400 3.5em/125% 'Kreon', serif;
   	color: #333;
   }

   Kreon

7. Roboto Slab

   
   

   HTML

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto+Slab" />
   <h2>Testing "Roboto Slab" font</h2>

   CSS

   h2 {
   	font: 400 3.5em/125% 'Roboto Slab', serif;
   	color: #333;
   }

   Roboto Slab

8. Arbutus Slab

   
   

   HTML

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arbutus+Slab" />
   <h2>Testing "Arbutus Slab" font</h2>

   CSS

   h2 {
   	font: 400 3.5em/125% 'Arbutus Slab', serif;
   	color: #333;
   }

   Arubutus Slab

9. Antic Slab

   
   

   HTML

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Antic+Slab" />
   <h2>Testing "Antic Slab" font</h2>

   CSS

   h2 {
   	font: 400 3.5em/125% 'Antic Slab', serif;
   	color: #333;
   }

   Antic Slab

10. Port Lligat Slab

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Port+Lligat+Slab" />
    <h2>Testing "Port Lligat Slab" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Port Lligat Slab', serif;
    	color: #333;
    }

    Port Lligat Slab

11. Ultra

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ultra" />
    <h2>Testing "Ultra" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Ultra', serif;
    	color: #333;
    }

    Ultra

12. Sanchez

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sanchez" />
    <h2>Testing "Sanchez" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Sanchez', serif;
    	color: #333;
    }

    Sanchez

13. Kelly Slab

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Kelly+Slab" />
    <h2>Testing "Kelly Slab" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Kelly Slab', serif;
    	color: #333;
    }

    Kelly Slab

14. Glegoo

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Glegoo" />
    <h2>Testing "Glegoo" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Glegoo', serif;
    	color: #333;
    }

    Glegoo

15. Noticia Text

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Noticia+Text" />
    <h2>Testing "Noticia Text" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Noticia Text', serif;
    	color: #333;
    }

    Noticia Text

16. Kameron

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Kameron" />
    <h2>Testing "Kameron" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Kameron', serif;
    	color: #333;
    }

    Kameron

17. Podkova

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Podkova" />
    <h2>Testing "Podkova" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Podkova', serif;
    	color: #333;
    }

    Podkova

18. Bevan

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Bevan" />
    <h2>Testing "Bevan" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Bevan', serif;
    	color: #333;
    }

    Bevan

19. Belgrano

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Belgrano" />
    <h2>Testing "Belgrano" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Belgrano', serif;
    	color: #333;
    }

    Belgrano

20. Wellfleet

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Wellfleet" />
    <h2>Testing "Wellfleet" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Wellfleet', serif;
    	color: #333;
    }

    Wellfleet

21. Vast Shadow

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vast+Shadow" />
    <h2>Testing "Vast Shadow" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Vast Shadow', serif;
    	color: #333;
    }

    Vast Shadow

22. Cherry Swash

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cherry+Swash" />
    <h2>Testing "Cherry Swash" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Cherry Swash', serif;
    	color: #333;
    }

    Cherry Swash

23. Peralta

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Peralta" />
    <h2>Testing "Peralta" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Peralta', serif;
    	color: #333;
    }

    Peralta

24. Gorditas

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Gorditas" />
    <h2>Testing "Gorditas" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Gorditas', serif;
    	color: #333;
    }

    Gorditas

25. Ewert

    
    

    HTML

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ewert" />
    <h2>Testing "Ewert" font</h2>

    CSS

    h2 {
    	font: 400 3.5em/125% 'Ewert', serif;
    	color: #333;
    }

    Ewert

So, it wraps it up. Hope you enjoyed the post. Feel free to share your favorites from the above list and do recommend more Slab-serif Google fonts if we missed any.