Roboto 글꼴은 Google에서 만든 산세리프체입니다. 그것은 우아하고 안드로이드 폰과 같은 고해상도 화면에서 잘 렌더링됩니다. 따라서 많은 응용 프로그램에 적합합니다. 또한 Windows, macOS 및 Linux에 Roboto 글꼴을 설치하는 것은 케이크 조각입니다.
이 게시물에서는 Windows, macOS, Linux는 물론 웹사이트에도 Google Roboto 글꼴을 설치하는 방법을 보여줍니다. 시작하겠습니다!
Google Roboto 글꼴 다운로드
플랫폼에 관계없이 먼저 Roboto 글꼴 팩을 다운로드해야 합니다. 이렇게 하려면 Roboto 글꼴 사이트로 이동하십시오. 전체 글꼴 모음을 다운로드하는 가장 간단한 방법은 "패밀리 다운로드" 버튼을 클릭하는 것입니다.
컴퓨터에 ZIP 파일로 저장되며, 이때 운영 체제(OS)에 설치할 수 있습니다.
Windows, Mac 및 Linux에 Google Roboto 글꼴을 설치하는 방법
좋은 소식은 Roboto 글꼴을 설치하려는 플랫폼에 관계없이 클릭 몇 번이면 된다는 것입니다.
1. Windows 10
Windows의 경우 먼저 Roboto 글꼴 폴더의 압축을 풉니다. 그런 다음 시작 메뉴로 이동하여 설정 페이지를 엽니다.
여기에서 개인화 옵션을 클릭한 다음 글꼴을 클릭하십시오.
그런 다음 추출된 글꼴을 설치 프로그램 창으로 끌어다 놓습니다. 몇 초 후 Google Roboto 글꼴이 Windows에 설치됩니다. 설치된 응용 프로그램 내에서 다른 글꼴과 마찬가지로 선택할 수 있습니다.
2. 맥OS
Mac의 경우 먼저 ZIP 파일의 압축을 푼 다음 폴더 안의 모든 글꼴을 선택하고(LICENSE.txt 건너뛰기) 마우스 오른쪽 버튼을 클릭한 다음 컨텍스트 메뉴에서 "연결 프로그램 -> 글꼴 모음"을 선택합니다.
그러면 글꼴 책에 로드되고 응용 프로그램에서 사용할 수 있습니다.
개별 글꼴 파일을 두 번 클릭하여 글꼴 목록에 로드할 수도 있습니다.
3. 리눅스
홈 폴더를 열고 숨김 파일/폴더를 볼 수 있는 옵션을 활성화합니다. ".fonts" 폴더를 찾습니다. 존재하지 않으면 생성하십시오. 그런 다음 Roboto 글꼴 폴더를 이 ".fonts" 폴더로 이동합니다.
또는 글꼴 관리자 프로그램을 사용하여 글꼴을 관리할 수 있습니다.
1. 소프트웨어 센터 또는 저장소에서 글꼴 관리자를 설치합니다.
2. 설치가 완료되면 이 앱과 글꼴 앱을 엽니다(다시 검색 표시줄에서).
3. 글꼴 관리자 내에서 관리 탭에 있는지 확인하고 더하기 아이콘을 클릭합니다.
4. 추출한 글꼴 폴더로 이동하여 필요에 따라 추가합니다.
사용 중인 앱을 다시 시작하면 선택할 수 있는 Roboto 글꼴이 표시됩니다.
웹사이트에서 Google Roboto 글꼴 사용
웹사이트에서 Roboto 글꼴을 사용하려면 CSS3 @font-face를 사용할 수 있습니다. 웹페이지에 외부 글꼴을 포함하는 구문입니다.
FontSquirrel Roboto 글꼴 페이지로 이동하여 "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'); (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;
} 글꼴 폴더의 경로를 가리키도록 "src"를 변경해야 합니다.
다음으로 font-family:"Roboto"; 구문을 사용할 수 있습니다. 웹 페이지에 Roboto 글꼴을 표시합니다.
결론
Google의 Roboto 글꼴은 Helvetica 및 Arial과 같은 주류에 대한 세련된 대안입니다. 또한 Google의 머티리얼 디자인 이니셔티브의 최전선에 있습니다. 그럼에도 불구하고 Roboto는 모든 방식의 애플리케이션에서 작동하며 Windows, macOS, Linux는 물론 웹사이트에도 쉽게 설치할 수 있습니다.
Roboto의 팬이 아니라면 다양한 사이트 디자인 요소를 확인하는 방법에 대한 기사를 통해 특정 웹사이트에서 어떤 글꼴이 사용되는지 알 수 있습니다. 컴퓨터에서 Roboto 글꼴을 사용합니까? 그렇다면 어떤 용도로 사용합니까? 아래 댓글 섹션에 알려주세요!