I become so very lost when I try to put my mind around what value to use when specifying the url attribute of the @font-face Rule. Please, I would like to know: If the value of the attribute is the url link to the website from which I downloaded the custom font.OR Will it be the path to the directory where I downloaded the said font on my machine? If no. 2 is what is true, how does it all come to make any sense when I choose to host the website on a server? (Pray, I hope I have not sounded like a complete idiot.) Do help me.

DigitalOcean

Featured AI Products
Compute
Build, deploy, and scale cloud compute resources
Containers and Images
Safely store and manage containers and backups
Managed Databases
Fully managed resources running popular database engines
Management and Dev Tools
Control infrastructure and gather insights
Networking
Secure and control traffic to apps
Security
Help protect your account and resources with these security features
Storage
Store and access any amount of data reliably in the cloud
Browse all products
AI/ML
CMS
Data and IoT
Developer Tools
Gaming and Media
Hosting
Security and Networking
Startups and SMBs
Web and App Platforms
See all solutions
Community
Documentation
Developer Tools
Get Involved
Utilities and Help
Become a Partner
Marketplace
Pricing

- Community
- DigitalOcean
- Community
- DigitalOcean

- Community
- DigitalOcean
- Community
- DigitalOcean

Question

How To Use The url Thingy In The @font-face Rule

Posted on November 1, 2020

CSS

By Arthur S. Bach

Connected Tutorial(This question is a follow-up to this tutorial):

How To Define Custom Fonts in CSS with @font-face and font-display

I become so very lost when I try to put my mind around what value to use when specifying the url attribute of the @font-face Rule. Please, I would like to know:

If the value of the attribute is the url link to the website from which I downloaded the custom font. OR
Will it be the path to the directory where I downloaded the said font on my machine?
If no. 2 is what is true, how does it all come to make any sense when I choose to host the website on a server?

(Pray, I hope I have not sounded like a complete idiot.) Do help me.

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

alexdo

October 25, 2023

Hello there,

The url attribute in the @font-face rule specifies the source of the custom font files. It can be a URL to a font file hosted on a website, or it can be a file path on your local machine, depending on how you want to manage your fonts. Let me explain both scenarios:

Using a Font Hosted on a Website: If you want to use a custom font hosted on a website (not your own server), you would set the url attribute to the URL of the font file on that website. For example:

@font-face {
  font-family: 'MyCustomFont';
  src: url('https://example.com/fonts/myfont.woff2') format('woff2');
}

In this case, the custom font will be downloaded by the user’s browser from the specified URL when they visit your website. This approach is often used when you want to use a font that’s available on a web font service or another website.

Using a Locally Hosted Font: If you have the custom font files stored on your local machine or server, you can use a relative or absolute file path. For example:

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/myfont.woff2') format('woff2');
}

When using a locally hosted font, the url attribute should point to the font file’s location on your server or relative to your website’s root directory. This way, the font file will be fetched from your server when someone visits your website.

Hope that this helps!

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

View all products

Start building today

From GPU-powered inference and Kubernetes to managed databases and storage, get everything you need to build, scale, and deploy intelligent applications.