How to Embed Fonts in CSS in a webpage

| | 1 min read

If we are using a custom font on our webpage and if that particular font is not installed on a user’s computer, then there is a good chance that our website would become unreadable. One of the best solutions to overcome this scenario would be to embed the said font file into the CSS in the webpage source.

Embedding fonts with CSS is pretty simple and can be done by the ‘@font-face’ selector.

Add the following code to your CSS file after replacing the current font with the font of your choice.

@font-face {
font-family: "Meera";
src: url(font/Meera.ttf);    // font path
}
.mytext {                          // css class applied to the paragraph
font-family: "Meera";
}

This should make your website readable for all your users.