Windows, Mac 및 Linux에 Google Roboto 글꼴 설치하는 방법

Windows Mac And Linux에 Google Robot 글꼴 설치하는 방법 대표 이미지

Roboto 글꼴은 Google이 만든 산세리프 글꼴입니다. 우아하며 Android 전화와 같은 고해상도 화면에서 잘 렌더링됩니다. 따라서 많은 애플리케이션에 적합합니다. 게다가 Windows, macOS 및 Linux에 Google Roboto 글꼴을 설치하는 방법을 배우는 것은 매우 쉽습니다.

Google Roboto 글꼴 다운로드

플랫폼에 관계없이 먼저 Roboto 글꼴 패키지를 다운로드해야 합니다. 이를 위해 Roboto 글꼴 사이트로 이동합니다. 전체 글꼴 패밀리를 다운로드하는 가장 간단한 방법은 오른쪽 상단의 “가족 다운로드” 버튼을 클릭하는 것입니다.

Windows Mac And Linux에 Google Robot 글꼴 설치하는 방법 Roboto 다운로드

이 파일은 ZIP 파일로 컴퓨터에 저장되며, 이 시점에서 운영 체제에 설치할 수 있습니다.

글꼴이 픽셀화되거나 손상된 경우 문제를 해결하기 위한 몇 가지 단계가 있습니다.

좋은 소식은 플랫폼에 관계없이 몇 번의 클릭으로 Roboto 글꼴을 설치할 수 있다는 것입니다.

Windows에 Google Roboto 글꼴 설치

Windows에 Roboto 글꼴을 설치하려면 다음 단계를 따르세요:

Roboto 글꼴 폴더의 압축을 풉니다. 마우스 오른쪽 버튼을 클릭하고 “모두 추출”을 선택합니다.

Windows Mac And Linux에 Google Robot 글꼴 설치하는 방법 Windows 압축 해제

“시작” 메뉴를 열고 “설정”을 선택합니다.

Windows Mac And Linux에 Google Robot 글꼴 설치하는 방법 Windows 설정

“개인 설정”을 클릭하고 오른쪽 설정 목록에서 “글꼴”을 선택합니다.

Windows Mac And Linux에 Google Robot 글꼴 설치하는 방법 Windows 글꼴

추출한 글꼴을 설치 프로그램 창으로 드래그합니다. 몇 초 후에 Google Roboto 글꼴이 Windows에 설치됩니다. 애플리케이션 내에서 다른 글꼴처럼 선택할 수 있습니다.

Windows Mac And Linux에 Google Robot 글꼴 설치하는 방법 드래그하여 설치

다른 유형의 글꼴을 설치하거나 Windows에서 사용 가능한 글꼴을 보려면 Windows에서 글꼴을 설치하고 관리하는 방법에 대한 가이드를 확인하세요.

macOS에 Google Roboto 글꼴 설치

Mac에 Roboto 글꼴을 설치하려면 다음 단계를 따르세요:

ZIP 파일의 압축을 풉니다. 더블 클릭하거나 마우스 오른쪽 버튼을 클릭하고 “열기”를 선택합니다.
폴더 안의 모든 글꼴을 선택하고 (LICENSE.txt는 건너뜁니다) 마우스 오른쪽 버튼을 클릭한 후 컨텍스트 메뉴에서 “Font Book으로 열기”를 선택합니다.

Font Book으로 글꼴 열기.

이렇게 하면 Font Book에 로드되어 애플리케이션에서 사용할 수 있게 됩니다.

개별 글꼴 파일을 더블 클릭하여 Font Book에 로드할 수도 있습니다.

Linux에 Google Roboto 글꼴 설치

unzip 명령으로 압축된 파일을 추출합니다.
홈 폴더를 열고 숨겨진 파일/폴더 보기 옵션을 활성화합니다. Ctrl + H를 누르거나 “보기” 메뉴를 클릭하고 “숨겨진 파일 표시”를 선택할 수 있습니다.
“.fonts” 폴더를 찾습니다. 존재하지 않으면 생성합니다.
Roboto 글꼴 폴더를 이 “.fonts” 폴더로 이동합니다.

또는 Font Manager 프로그램을 사용하여 글꼴을 관리할 수 있습니다.

소프트웨어 센터 또는 저장소에서 Font Manager를 설치합니다.

Font Manager 앱 설치하기.

설치가 완료되면 이 앱과 Fonts 앱을 열어야 합니다 (다시 검색 바에서).

Debian Fonts 앱 열기.

Font Manager 내에서 관리 탭에 있는지 확인하고 더하기(+) 아이콘을 클릭합니다.

Debian에서 글꼴 추가하기.

추출한 글꼴 폴더로 이동하여 필요한 만큼 추가합니다.

사용 중인 앱을 다시 시작하면 Roboto 글꼴이 표시됩니다.

Linux는 Roboto와 관련하여 문제가 없어야 하지만, Ubuntu와 같은 일부 배포판은 특정 글꼴을 인식하는 데 문제가 있을 수 있습니다. Ubuntu에서 Roboto 또는 다른 글꼴에 문제가 있는 경우 TrueType 글꼴 형식으로 변환해 보세요.

웹사이트에서 Google Roboto 글꼴 사용

웹사이트에서 Roboto 글꼴을 사용하려면 CSS3 @font-face 구문을 사용하여 외부 글꼴을 웹페이지에 포함합니다.

FontSquirrel Roboto 글꼴 페이지로 이동하여 “Webfont Kit”를 클릭한 후 원하는 글꼴 형식과 하위 집합(있는 경우)을 선택하고 “@Font-Face Kit 다운로드”를 클릭합니다.

Windows Mac And Linux에 Google Robot 글꼴 설치하는 방법 Font Squirrel에서 다운로드

압축된 파일을 웹사이트 글꼴 폴더에 추출합니다. 웹 스타일시트를 열고 다음 코드를 추가합니다:

@font-face{  
font-family:'Roboto';  
    src:url('Roboto-Regular-webfont.eot');  
    src:url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Regular-webfont.woff') format('woff'),  
url('Roboto-Regular-webfont.ttf') format('truetype'),  
url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg');  
font-weight:normal;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
    src:url('Roboto-Italic-webfont.eot');  
    src:url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Italic-webfont.woff') format('woff'),  
url('Roboto-Italic-webfont.ttf') format('truetype'),  
url('Roboto-Italic-webfont.svg#RobotoItalic') format('svg');  
font-weight:normal;  
font-style:italic;  
}  
  
@font-face{  
font-family:'Roboto';  
    src:url('Roboto-Bold-webfont.eot');  
    src:url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Bold-webfont.woff') format('woff'),  
url('Roboto-Bold-webfont.ttf') format('truetype'),  
url('Roboto-Bold-webfont.svg#RobotoBold') format('svg');  
font-weight:bold;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
    src:url('Roboto-BoldItalic-webfont.eot');  
    src:url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-BoldItalic-webfont.woff') format('woff'),  
url('Roboto-BoldItalic-webfont.ttf') format('truetype'),  
url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');  
font-weight:bold;  
font-style:italic;  
}  
  
@font-face{  
font-family:'Roboto';  
    src:url('Roboto-Thin-webfont.eot');  
    src:url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Thin-webfont.woff') format('woff'),  
url('Roboto-Thin-webfont.ttf') format('truetype'),  
url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');  
font-weight:200;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
    src:url('Roboto-ThinItalic-webfont.eot');  
    src:url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-ThinItalic-webfont.woff') format('woff'),  
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),  
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg');(under the Apache Software License).   
font-weight:200;  
font-style:italic;  
}  
  
@font-face{  
font-family:'Roboto';  
    src:url('Roboto-Light-webfont.eot');  
    src:url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Light-webfont.woff') format('woff'),  
url('Roboto-Light-webfont.ttf') format('truetype'),  
url('Roboto-Light-webfont.svg#RobotoLight') format('svg');  
font-weight:100;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
    src:url('Roboto-LightItalic-webfont.eot');  
    src:url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-LightItalic-webfont.woff') format('woff'),  
url('Roboto-LightItalic-webfont.ttf') format('truetype'),  
url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');  
font-weight:100;  
font-style:italic;  
}  
  
@font-face{  
font-family:'Roboto';  
    src:url('Roboto-Medium-webfont.eot');  
    src:url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Medium-webfont.woff') format('woff'),  
url('Roboto-Medium-webfont.ttf') format('truetype'),  
url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg');  
font-weight:300;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
    src:url('Roboto-MediumItalic-webfont.eot');  
    src:url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-MediumItalic-webfont.woff') format('woff'),  
url('Roboto-MediumItalic-webfont.ttf') format('truetype'),  
url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');  
font-weight:300;  
font-style:italic;  
}