이 기사에서는 개발자 도구를 사용하여 Chrome 또는 Edge 브라우저의 웹사이트에서 글꼴을 다운로드^{(download fonts from websites in Chrome or Edge browser using Developer Tools)} 하는 방법에 대해 설명합니다 . Chrome 과 Edge 모두 브라우저에서 직접 웹 사이트를 검사하는 데 사용되는 웹 개발자 및 저작 도구가 내장되어 있습니다. 개발자 도구^{(Developer Tools)} 로 많은 일을 할 수 있습니다 . 예를 들어, 웹사이트에서 글꼴을 식별하고^{(identify fonts on a website)} , 소스 파일 내에서 검색하고, 내장된 미화를 사용하고, 센서 및 지리적 위치를 에뮬레이트하는 등의 작업을 수행할 수 있습니다.

이제 개발자 도구^{(Developer Tools)} 를 사용하여 웹사이트에서 글꼴을 다운로드^{(download fonts)} 할 수도 있습니다 . 웹사이트에서 글꼴을 다운로드하려면 몇 가지 옵션을 거쳐 트릭을 시도해야 합니다. 절차를 자세히 확인해보자.

^(Download)Chrome 개발자 도구^{(Chrome Developer Tools)} 를 사용하여 웹 사이트^(Website) 에서 글꼴 ^(Font)다운로드

이 게시물에서는 Chrome^{(Google Chrome)} 의 웹사이트에서 글꼴을 다운로드하는 단계를 보여 드리겠습니다 . 동일한 단계를 사용하여 Microsoft Edge 브라우저에서 웹 사이트 글꼴을 다운로드할 수 있습니다. 이를 수행하는 단계는 다음과 같습니다.

1. 구글 크롬을 실행합니다.
2. 글꼴을 다운로드할 웹사이트로 이동합니다.
3. 개발자 도구를 엽니다.
4. 네트워크 탭으로 이동합니다.
5. ^(Click)글꼴^(Font) 옵션을 클릭 하고 다운로드할 글꼴을 선택합니다.
6. 글꼴 파일을 다운로드합니다.
7. 글꼴 파일 확장자로 다운로드한 파일의 이름을 바꿉니다.

이 단계를 자세히 살펴보겠습니다!

먼저 Chrome^{(Google Chrome)} 을 열고 글꼴을 다운로드해야 하는 웹사이트로 이동합니다. 다음^(Next) 으로 3줄 메뉴로 이동하여 More Tools > Developer 도구 옵션을 클릭합니다. 또는 Ctrl + Shift + I개발자 도구^{(Developer Tools)} 패널 을 빠르게 열 수도 있습니다.

이제 열린 개발자 도구^{(Developer Tools)} 섹션에서 이중 화살표 버튼을 클릭한 다음 상단 메뉴 표시줄에서 네트워크 탭을 선택하여 엽니다. ^(Network)그런 다음 현재 있는 웹사이트를 새로고침합니다.

그런 다음 글꼴^(Font) 범주를 클릭하면 웹 사이트에 있는 해당 글꼴 이름과 함께 포함된 글꼴 목록이 표시됩니다. 목록에서 글꼴을 선택할 수 있으며 아래 스크린샷과 같이 전용 패널에서 미리보기를 볼 수 있습니다.

이제 글꼴 형식을 식별하는 방법은 무엇입니까? 글쎄^(Well) , 그냥 글꼴 위에 마우스를 가져가서 끝에 파일 확장자를 참조하십시오. 아래 스크린샷을 참조하세요.

그런 다음 글꼴을 마우스 오른쪽 버튼으로 클릭한 다음 상황에 맞는 메뉴에서 Copy > Copy Response 옵션을 클릭합니다.

그런 다음 Chrome^(Chrome) 브라우저 에 새 탭을 추가 하고 복사한 응답을 탭의 주소 표시줄에 붙여넣고 Enter 버튼을 누릅니다. 하시면 파일이 다운로드 됩니다.

이제 위의 글꼴 파일이 다운로드된 다운로드 폴더로 이동합니다. ^(Downloads)이제 글꼴 파일 확장자로 이 파일의 이름을 바꿔야 합니다. 이를 위해 먼저 파일 탐색기 의 ^{(File Explorer)}보기^{( View)} 탭으로 이동한 다음 파일 이름 확장명^{(File name extensions)} 옵션 을 활성화해야 합니다 . 이제 다운로드한 글꼴 파일을 선택하고 이름 바꾸기^(Rename) 옵션을 클릭합니다. 식별된 글꼴 파일 확장자(예: .woff2 )를 추가하고 Enter 버튼을 누릅니다.

짜잔^(Voila) , 이것이 웹사이트에서 글꼴 파일을 다운로드하는 방법입니다.

Microsoft Edge 는 이제 ^{(Microsoft Edge)}Chrome 과 같이 Chromium 을 기반으로 하므로 위와 동일한 단계 에 따라 Edge 브라우저 에서 글꼴 파일을 다운로드할 수 있습니다 .

이 문서가 개발자 도구 를 사용하여 ^{(Developer Tools)}Chrome 또는 Edge 브라우저 의 웹사이트에서 글꼴을 다운로드하는 방법을 배우는 데 도움이 되었기를 바랍니다 .

팁^(TIP) : 배울 수 있는 Chrome 개발 도구 팁과 요령^{(Chrome Development Tools Tips and Tricks)} 이 더 많이 있습니다.

지금 읽어보세요: ^{(Now read:)} 개발자 도구를 사용하여 Chrome 또는 Edge에서 특정 웹사이트에 대한 사이트 데이터 지우기^{(Use Developer Tools to clear Site Data for a particular website in Chrome or Edge)} .

How to download a Font from a Website using Developer Tools

In this article, we will be talking about how yоu can download fonts from websites in Chrome or Edge browser using Developer Tools. Both Chrome and Edge come with built-in web developer and authoring tools used to inspect websites directly in the browser. You can do a lot of things with the Developer Tools. For example, it enables you to identify fonts on a website, search within the source file, use a built-in beautifier, emulate sensors and geographical location, and more.

Now, you can also download fonts from a website using Developer Tools. To download a font from a website, you will need to go through some options and try a trick. Let’s check out the procedure in detail.

Download a Font from a Website using Chrome Developer Tools

In this post, we are going to show you the steps to download a font from a website in Google Chrome. You can use the same steps to download a website font in your Microsoft Edge browser. Here are the steps to do that:

1. Launch Google Chrome.
2. Go to the website from where you want to download fonts.
3. Open the Developer Tools.
4. Navigate to the Network tab.
5. Click on the Font option and select a font to download.
6. Download the font file.
7. Rename the downloaded file with the font file extension.

Let us check out these steps in detail!

Firstly, open Google Chrome and go to the website from where you need to download a font. Next, go to the three-bar menu and click on the More Tools > Developer Tools option. Alternately, you can also press the Ctrl + Shift + I key combination to quickly open up the Developer Tools panel.

Now, in the opened Developer Tools section, click on the double arrow button and then select and open 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. You can select a font from the list and you will see its preview in the dedicated panel as shown in the below screenshot.

Now, how to identify the font format? Well, just hover the mouse over the font and see the file extension at the end. Refer to the below screenshot.

After that, simply right-click on the font, and then from the context menu, click on the Copy > Copy Response option.

Next, add a new tab in your Chrome browser and paste the copied response to the address bar in the tab and then press the Enter button. As you do that, a file will be downloaded.

Now, go to your Downloads folder where the above font file is downloaded. You now have to rename this file with the font file extension. For that, first, go to the View tab in the File Explorer and then make sure to enable the File name extensions option. Now, select the downloaded font file and click on the Rename option. Add the identified font file extension (e.g., .woff2) and press the Enter button.

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

Since Microsoft Edge is now based on Chromium, like Chrome, you can download a font file in the Edge browser following the same steps as above.

Hope this article helped you learn how to download fonts from a website in Chrome or Edge browser using Developer Tools.

TIP: There are many more Chrome Development Tools Tips and Tricks that you can learn.

Now read: Use Developer Tools to clear Site Data for a particular website in Chrome or Edge.

Related posts

• Identify Chrome의 글꼴, Developer Tools를 사용한 Edge and Firefox

• Developer Tools을 사용하여 Chrome or Edge의 특정 사이트에 대한 Site Data 명확한 Site Data

• Chrome에서 Default Font을 변경하는 방법, Edge, Firefox browser

• Chrome 개발자 모드란 무엇이며 용도는 무엇인가요?

• Registry or Group Policy을 사용하여 Edge에서 Developer Tools 사용 중지

• Chrome or Firefox 컴퓨터에 파일을 다운로드하거나 저장할 수 없습니다

• Chrome에서 전역 Media Playback Control를 활성화하는 방법

• Windows 11/10에서 Font cache을 재구성하는 방법

• Chrome Development Tools Tutorials, Tips, Tricks

• Advanced System Font Changer Windows에서 System Font를 변경할 수 있습니다

• Google FLoC (Privacy Sandbox) Chrome에서 옵트 아웃하는 방법

• Google 크롬 콘텐츠 설정: 전체 가이드

• Edge Developer Tools에서 User Agent and Geolocation를 변경하는 방법

• Block and Unblock A Google Chrome에서 Website의 방법

• 웹사이트 도메인으로 파일을 전송하는 최고의 FTP 도구

• FIX : recaptcha Chrome, Firefox 또는 모든 브라우저에서 작동하지 않음

• PassProtect 이미 브리지 암호를 사용하지 않는지 확인하십시오

• Google Chrome에서 Default Print Settings를 변경하는 방법

• Chrome(2022)을 위한 10가지 최고의 개인 정보 보호 확장 프로그램

• Google Chrome browser에 File Download 오류를 수정하는 방법