Hello Sunil
extract-webfont-website-features-image

How to Extract Webfont From any Website

So you are browsing and suddenly you find a striking font in one of the websites you are visiting. You don’t even know the name of the font, let alone download it! Well, what are you worrying about, when we are here to help?

In this article, we are going to explain in detail how you can easily download any of the fonts listed on any of the websites with a very simple trick.

Download a Webfont Using Chrome Developer Tools

To download a font from a website, you will need to go through some options available in Google Chrome developer tools and try a trick. Let’s check out the procedure in detail.

Step 1: Firstly, open Google Chrome and go to the website from where you need to download a font. Next, open Developer Tools panel by pressing Ctrl + Shift + I key combination.

Step 2: Now, in the opened Developer Tools section select the Network tab from the top menu bar. After that, reload the website you are on.

Next, click on the Font category and you will see a list of the embedded fonts with respective font names present on the website.

extract-webfont-websites-img-1

You can select a font from the list and you will see its preview in the dedicated panel as shown in the below screenshot.

extract-webfont-websites-img-2

Step 3: Select the font, right click -> Open in new tab and download the font file.

extract-webfont-websites-img-3
extract-webfont-websites-img-4

Step 4: Go to Downloads folder where the above font file is downloaded. You now have to rename this file with the font file extension (e.g.: .woff2).

extract-webfont-websites-img-5

Voila, this is how you download a font file from a website.

If you want to use the same webfont in your computer then convert the font file you downloaded to .ttf format.

extract-webfont-websites-img-6

Once the font file is downloaded in .ttf format, double click on it to install it.

Yes, it is that simple to download any font from any of the websites.

Hope you found the article useful.

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 2

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Similar articles you may like

Sunil Pradhan

Hi there πŸ‘‹ My name is Sunil and I'm a front-end developer who loves to help others by simplifying web-dev related topics.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there πŸ‘‹ My name is Sunil and I'm a front-end developer who loves to help others by simplifying web-dev related topics.