DEV Community

Cover image for How to use Local Fonts in CSS
Gaurav Vala
Gaurav Vala

Posted on

How to use Local Fonts in CSS

There are many great fonts that you might want to use into your website but that font might not be a font which you can import to your CSS file like you can do with some like google fonts.

Importing local font into CSS is a little different than importing fonts from websites like Google fonts, where we have import at-rule (@import)

Example:



@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');


Enter fullscreen mode Exit fullscreen mode

You might have seen this syntax where we just pass the font URL.


Importing local font

Now, to import a local/downloaded font into your css file there is a different CSS at-rule that creates a custom font property that you can reference in your css file.



@font-face 
{ 
font-family: "Open Sans";  
src: url("/fonts/OpenSans-Regular-webfont.woff2")format("woff2"); 
}


Enter fullscreen mode Exit fullscreen mode

This a simple and clear syntax at first look, you are giving a name to reference your font font-family:, also giving the the relative URL to your font src: and the format of the font format

You can use same syntax again for different styles of same font like bold or light.

Here, you can use any name in the font-family, and reference that name in css afterwards, so different names for different styles.

Also, It would be a good practice that you create a fonts folder in your assets folder to store the font.

For reference and more detailed overview you can check out section of MDN on same here -> MDN Link


If you found the content i share useful than share it with your developer friends and also follow me on Instagram and Twitter

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay