Top 10 Professional web fonts from Google Fonts
Below is a list of popular and professional web fonts from Google Fonts, organized in a table with CSS import codes for font weights 400, 400 italic, and 600. You can use these in your web development projects:
Font Name | CSS Import Code | 400 | 400 Italic | 600 |
---|---|---|---|---|
Open Sans | @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600&display=swap'); | Open Sans | Open Sans Italic | Open Sans Semi-Bold |
Lato | @import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700&display=swap'); | Lato | Lato Italic | Lato Bold |
Roboto | @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700&display=swap'); | Roboto | Roboto Italic | Roboto Bold |
Montserrat | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,600&display=swap'); | Montserrat | Montserrat Italic | Montserrat Semi-Bold |
Nunito | @import url('https://fonts.googleapis.com/css?family=Nunito:400,400i,600&display=swap'); | Nunito | Nunito Italic | Nunito Semi-Bold |
Source Sans Pro | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600&display=swap'); | Source Sans Pro | Source Sans Pro Italic | Source Sans Pro Semi-Bold |
PT Sans | @import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700&display=swap'); | PT Sans | PT Sans Italic | PT Sans Bold |
Playfair Display | @import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700&display=swap'); | Playfair Display | Playfair Display Italic | Playfair Display Bold |
Copy and paste the relevant CSS import code into your stylesheet. Adjust the font weights and variations as needed in your project. Make sure to replace the generic font names with the actual font names you want to use.