구글(Google)이 개발한 산세리프(Sans-serif) 계열 서체인 로보토(Roboto)는 안드로이드 스마트폰과 같은 고해상도 화면에서 우아하고 선명하게 표현되도록 설계된 폰트입니다. 덕분에 다양한 애플리케이션에 활용하기에 적합하며, Windows·macOS·Linux 어디에서든 몇 번의 클릭만으로 손쉽게 설치할 수 있습니다.
이번 글에서는 Windows, macOS, Linux는 물론 웹사이트에 로보토 폰트를 설치하고 적용하는 방법까지 단계별로 소개합니다. 지금 바로 시작해 보겠습니다!
구글 로보토 폰트 다운로드하기
운영체제와 관계없이 가장 먼저 해야 할 일은 로보토 폰트 패키지를 내려받는 것입니다. 로보토 공식 페이지(구글 폰츠)에 접속한 뒤, 전체 폰트 패밀리를 한 번에 받으려면 “Download Family” 버튼을 클릭하세요.
다운로드가 완료되면 ZIP 파일 형태로 컴퓨터에 저장되며, 이후 각 운영체제(OS)에 맞는 방식으로 설치하면 됩니다.
Windows, Mac, Linux에 로보토 폰트 설치하는 방법
다행히 어떤 플랫폼을 사용하든 설치 과정은 매우 간단하며, 단 몇 번의 클릭으로 끝납니다.
1. Windows 10
먼저 내려받은 ZIP 파일의 압축을 풀어 로보토 폰트 폴더를 준비합니다. 이후 시작 메뉴에서 설정(Settings)을 열어주세요.
설정 화면에서 개인 설정(Personalization) → 글꼴(Fonts) 순서로 이동합니다.
그다음 압축을 푼 폰트 파일들을 드래그하여 글꼴 설치 창에 놓으면 됩니다. 잠시 후 로보토 폰트가 Windows에 설치되며, 일반적인 폰트처럼 애플리케이션에서 자유롭게 선택해 사용할 수 있습니다.
2. macOS
맥에서는 ZIP 파일의 압축을 푼 뒤, 폴더 안의 모든 폰트 파일을 선택하세요(LICENSE.txt는 제외). 마우스 오른쪽 버튼을 클릭해 컨텍스트 메뉴에서 “다른 응용 프로그램으로 열기 → 서체 책(Font Book)”을 선택합니다.
이렇게 하면 폰트가 서체 책에 등록되어 각종 애플리케이션에서 바로 사용할 수 있습니다.
참고로 개별 폰트 파일을 더블클릭해도 서체 책에 불러올 수 있습니다.
3. Linux
홈 폴더를 연 뒤 숨김 파일/폴더 보기 옵션을 활성화하고, “.fonts” 폴더를 찾습니다. 해당 폴더가 없다면 새로 생성한 후, 그 안으로 로보토 폰트 폴더를 옮기면 됩니다.
또는 Font Manager 프로그램을 활용해 폰트를 체계적으로 관리할 수도 있습니다.
- 소프트웨어 센터 또는 패키지 저장소에서 Font Manager를 설치합니다.
- 설치가 완료되면 검색창에서 Font Manager를 실행합니다.
- Manage 탭에 있는지 확인한 뒤 플러스(+) 아이콘을 클릭합니다.
- 압축을 푼 폰트 폴더로 이동해 필요한 폰트를 추가합니다.
사용 중인 애플리케이션을 재시작하면 로보토 폰트가 목록에 나타나며 선택할 수 있게 됩니다.
웹사이트에서 구글 로보토 폰트 사용하기
웹사이트에 로보토를 적용하고 싶다면 CSS3의 @font-face 문법을 사용해 외부 폰트를 페이지에 삽입할 수 있습니다.
FontSquirrel의 로보토 페이지에 접속해 “Webfont Kit” 탭을 선택한 후 원하는 폰트 포맷과 서브셋(필요한 경우)을 고르고, “Download @Font-Face Kit” 버튼을 누르세요.
내려받은 킷의 압축을 웹사이트의 폰트 폴더에 풀고, 스타일시트에 아래 코드를 추가합니다:
@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');
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;
}
각 @font-face 블록의 src 경로가 실제 폰트 파일 위치와 일치하도록 수정하는 것을 잊지 마세요. 참고로 로보토는 Apache Software License로 배포되므로 개인 프로젝트는 물론 상업적인 웹사이트에서도 자유롭게 사용할 수 있습니다.
마치며
로보토는 헬베티카(Helvetica)나 Arial 같은 대중적인 서체의 훌륭한 대안이자, 구글의 머티리얼 디자인(Material Design)을 대표하는 폰트입니다. 그럼에도 다양한 용도로 폭넓게 활용할 수 있으며, Windows, macOS, Linux는 물론 웹사이트에도 손쉽게 설치할 수 있습니다.
혹시 로보토가 마음에 들지 않으신가요? 특정 웹사이트에 사용된 폰트를 확인하는 방법을 다룬 글을 참고하면 다른 서체를 찾는 데 도움이 됩니다. 여러분은 컴퓨터에서 로보토 폰트를 사용하고 계신가요? 어떤 용도로 사용하는지 댓글로 알려주세요!