How to Self-Host Fonts Using the CSS @font-face Rule

By making use of the @font-face CSS at-rule, one can effectively self-host any desired fonts for integration into your website.

Check the code below to understand how the @font-face CSS at-rule is used.

/* Regular weight (400) */
@font-face {
  font-family: 'YourFontName';
  src: url('/fonts/your-font-regular.woff2') format('woff2'), /* Modern browsers */
       url('/fonts/your-font-regular.woff') format('woff'),   /* Older browsers */
       url('/fonts/your-font-regular.ttf') format('truetype'); /* Legacy support */
  font-weight: 400; /* Regular */
  font-style: normal; /* Normal style */
}

/* Medium weight (500) */
@font-face {
  font-family: 'YourFontName';
  src: url('/fonts/your-font-medium.woff2') format('woff2'),
       url('/fonts/your-font-medium.woff') format('woff'),
       url('/fonts/your-font-medium.ttf') format('truetype');
  font-weight: 500; /* Medium */
  font-style: normal;
}

/* Bold weight (700) */
@font-face {
  font-family: 'YourFontName';
  src: url('/fonts/your-font-bold.woff2') format('woff2'),
       url('/fonts/your-font-bold.woff') format('woff'),
       url('/fonts/your-font-bold.ttf') format('truetype');
  font-weight: 700; /* Bold */
  font-style: normal;
}

After defining your fonts in the CSS file, you can use them anywhere in your code. Refer to the code below for an example.

/* Applying the font */
body {
  font-family: 'YourFontName', sans-serif; /* Fallback to sans-serif */
}

h1, h2, h3 {
  font-family: 'YourFontName', sans-serif;
  font-weight: 700; /* Bold weight for headings */
}

p {
  font-family: 'YourFontName', sans-serif;
  font-weight: 400; /* Regular weight for paragraphs */
}

strong {
  font-family: 'YourFontName', sans-serif;
  font-weight: 500; /* Medium weight for emphasis */
}

Happy New Years Eve!