How to Set Up a Custom Font

July 31, 2025
No Comments

Custom fonts help you create a unique and branded look for your website. You can either upload font files like .woff or use web services such as Google Fonts. To apply a custom font, define it using @font-face in your CSS or link it via a CDN. Once added, apply the font family to your elements in CSS. This enhances visual appeal and improves user experience.

Step 1: Choose a Custom Font

You can:

  • Download a font (.ttf, .otf, .woff, .woff2)
    or
  • Use Google Fonts or other CDN sources

 

Step 2: Add the Font Files to Your Project

Place the font files inside a folder like:


/fonts/YourFont.woff2

Step 3: Add @font-face in CSS


@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/YourFont.woff2') format('woff2'),
       url('fonts/YourFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Step 4: Apply the Font


body {
  font-family: 'MyCustomFont', sans-serif;
}

Step 5: If Using Google Fonts (Alternative Method)

Instead of uploading files, add this in <head>:


<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Then use in CSS:


body {
  font-family: 'Roboto', sans-serif;
}