How To Add Font In CSS? Last Updated : 09 Sep, 2024 Comments Improve Suggest changes Like Article Like Report Adding fonts to a website enhances its design and readability. In CSS, custom fonts can be applied using several techniques that allow web designers to include specific fonts that aren’t system defaults.PrerequisitesHTMLCSSThese are the approaches to add a font in CSS: Table of ContentUsing web-safe fontsImporting fonts from Google Fonts or other CDN-based font providersUsing web-safe fontsIn this approach we will use the web-safe fonts. They are predefined fonts that are universally available across most systems and browsers, such as Arial, Times New Roman, and Courier. These fonts do not require any external resource links.Example: In below example we are adding the fonts in CSS using web-safe fonts. The font-family which will be used here is Georgia. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web-Safe Fonts Example </title> <style> body { font-family: 'Georgia', serif; } h1 { font-family: 'Arial', sans-serif; color: green; } </style> </head> <body> <h1>Welcome to GeeksForGeeks</h1> <p>This paragraph uses the Georgia font, and the heading uses Arial.</p> </body> </html> Output:Output using web-safe fontsImporting fonts from Google Fonts or other CDN-based font providersIn this approach we will use Google Fonts which is a free library that provides access to various fonts which can be easily included in your website.Example: In this example we are importing the google fonts to add font in CSS.The font family of the same is Roboto. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Google Fonts Example</title> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); body { font-family: "Roboto", sans-serif; } h1 { font-family: "Lobster", cursive; color: green; } </style> </head> <body> <h1>Welcome to GeeksForGeeks</h1> <p> This paragraph uses Roboto, and the heading uses Lobster from Google Fonts. </p> </body> </html> Output:Output using Implementing fonts from google forms Comment More infoAdvertise with us Next Article How To Add Font In CSS? G ghuleyogesh Follow Improve Article Tags : Web Technologies CSS Similar Reads How to Add Custom Fonts in VueJS ? Vue.js is a JavaScript framework used in building powerful and beautiful user interfaces. The key feature of Vue.js is its component-based architecture that allows the developers to create reusable and modular components. Custom fonts can bring uniqueness and visual appeal to your Vue.js application 2 min read How to Change Font Style in CSS? Font style is an important element that enhances the readability of the text. CSS provides several properties to change the text appearance and font style. The font style property allows you to define how the text should appear normal, italic, or oblique.Table of ContentDifferent Methods to Change F 3 min read How to use web fonts in CSS ? While designing web pages, developers use different fonts based on what the text represents and which fonts suit the best. Each system comes with some pre-installed fonts which are called system fonts. Since these are limited, one may come across the need to use a different font other than the pre-i 3 min read How to Include a Font .ttf using CSS? To include a .ttf font in a web project using CSS, you can use the @font-face rule, which allows you to load external fonts and use them throughout your site. Here's a step-by-step guide on how to include a .ttf font using CSS:Steps to include font .ttf using CSS:Step 1: Download a .ttf font file fr 2 min read How to use Google Fonts in CSS? Google Fonts in CSS allows you to easily include and style web fonts by linking to a font's URL and applying it via the font-family property in your stylesheet. The library contains a vast collection of fonts that can be used in web design, mobile apps, etc.The syntax for using Google Fonts in CSS i 2 min read Like