วิธีติดตั้ง Google Roboto Font บน Windows, Mac และ Linux

แบบอักษร Roboto เป็นแบบอักษร sans-serif ที่สร้างโดย Google มีความสง่างามและแสดงผลได้ดีบนหน้าจอความละเอียดสูง เช่น โทรศัพท์ Android ดังนั้นจึงเหมาะอย่างยิ่งสำหรับการใช้งานจำนวนมาก ยิ่งไปกว่านั้น การติดตั้งฟอนต์ Roboto บน Windows, macOS และ Linux ไม่ใช่เรื่องยาก

ในโพสต์นี้ เราจะแสดงวิธีติดตั้งแบบอักษร Google Roboto บน Windows, macOS, Linux และแม้แต่บนเว็บไซต์ของคุณ เริ่มกันเลย!

กำลังดาวน์โหลดแบบอักษร Google Roboto

คุณต้องดาวน์โหลดชุดฟอนต์ Roboto ก่อนโดยไม่คำนึงถึงแพลตฟอร์มของคุณ ในการดำเนินการนี้ ให้ไปที่ไซต์แบบอักษร Roboto วิธีที่ง่ายที่สุดในการดาวน์โหลดตระกูลฟอนต์ทั้งหมดคือการคลิกปุ่ม “ดาวน์โหลดตระกูล”

มันจะจบลงเป็นไฟล์ ZIP ในคอมพิวเตอร์ของคุณ จากนั้นคุณจะสามารถติดตั้งลงในระบบปฏิบัติการ (OS) ของคุณได้

วิธีการติดตั้งแบบอักษร Google Roboto บน Windows, Mac และ Linux

ข่าวดีก็คือไม่ว่าคุณต้องการติดตั้งฟอนต์ Roboto บนแพลตฟอร์มใด ก็ทำได้เพียงแค่คลิก

1. วินโดว์ 10

สำหรับ Windows ให้คลายซิปโฟลเดอร์ฟอนต์ Roboto ก่อน จากนั้นไปที่ Start Menu และเปิดหน้า Settings

จากที่นี่ ให้คลิกตัวเลือก Personalization แล้วเลือก Fonts

ถัดไป ลากแบบอักษรที่แยกออกมาไปยังหน้าต่างตัวติดตั้ง หลังจากนั้นไม่กี่วินาที ฟอนต์ Google Roboto จะถูกติดตั้งใน Windows คุณสามารถเลือกได้เช่นเดียวกับแบบอักษรอื่นๆ จากภายในแอปพลิเคชันที่ติดตั้ง

2. macOS

สำหรับ Mac ให้แตกไฟล์ ZIP ก่อน จากนั้นเลือกแบบอักษรทั้งหมดภายในโฟลเดอร์ (ข้ามผ่าน LICENSE.txt) คลิกขวาแล้วเลือก “เปิดด้วย -> สมุดแบบอักษร” จากเมนูบริบท

การดำเนินการนี้จะโหลดลงใน Font Book และทำให้พร้อมใช้งานในแอปพลิเคชันของคุณ

โปรดทราบว่าคุณสามารถดับเบิลคลิกที่ไฟล์ฟอนต์แต่ละไฟล์เพื่อโหลดลงใน Font Book ได้

3. ลินุกซ์

เปิดโฟลเดอร์บ้านของคุณและเปิดใช้งานตัวเลือกเพื่อดูไฟล์/โฟลเดอร์ที่ซ่อนอยู่ ค้นหาโฟลเดอร์ ".fonts" หากไม่มีอยู่ ให้สร้างมันขึ้นมา ถัดไป ย้ายโฟลเดอร์แบบอักษร Roboto ไปที่โฟลเดอร์ ".fonts" นี้

หรือคุณสามารถใช้โปรแกรม Font Manager เพื่อจัดการแบบอักษรของคุณได้

1. ติดตั้ง Font Manger จาก Software Center หรือที่เก็บ

2. เมื่อติดตั้งแล้ว ให้เปิดแอปนี้และแอป Fonts (อีกครั้งจากแถบค้นหา)

3. ภายใน Font Manager ตรวจสอบให้แน่ใจว่าคุณอยู่ในแท็บ Manage แล้วคลิกไอคอน Plus

4. ไปที่โฟลเดอร์ฟอนต์ที่แยกออกมาแล้วเพิ่มตามต้องการ

เมื่อคุณรีสตาร์ทแอปที่คุณใช้อยู่ คุณจะเห็นแบบอักษร Roboto ที่สามารถเลือกได้

การใช้แบบอักษร Google Roboto บนเว็บไซต์

หากคุณต้องการใช้แบบอักษร Roboto บนเว็บไซต์ของคุณ คุณสามารถใช้ CSS3 @font-face ไวยากรณ์เพื่อฝังแบบอักษรภายนอกไปยังหน้าเว็บของคุณ

ไปที่หน้าแบบอักษร FontSquirrel Roboto คลิก “Webfont Kit” จากนั้นเลือกรูปแบบแบบอักษรที่คุณต้องการ ชุดย่อย (ถ้ามี) แล้วคลิก “ดาวน์โหลด @Font-Face Kit”

แตกไฟล์ zip ไปยังโฟลเดอร์แบบอักษรของเว็บไซต์ของคุณ เปิดสไตล์ชีตเว็บของคุณและเพิ่มรหัสต่อไปนี้:

@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 บนหน้าเว็บของคุณ

อยู่ในช่วงสรุป

แบบอักษร Roboto ของ Google เป็นทางเลือกที่มีสไตล์สำหรับแกนนำ เช่น Helvetica และ Arial ยิ่งไปกว่านั้น ยังอยู่ในระดับแนวหน้าของโครงการออกแบบวัสดุของ Google ถึงกระนั้นก็ตาม Roboto ทำงานได้กับแอปพลิเคชันทุกประเภท และติดตั้งบน Windows, macOS, Linux และแม้แต่เว็บไซต์ของคุณก็เป็นเรื่องง่าย

หากคุณไม่ใช่แฟนของ Roboto บทความของเราเกี่ยวกับวิธีตรวจสอบองค์ประกอบการออกแบบเว็บไซต์ต่างๆ สามารถช่วยให้คุณเรียนรู้ว่าแบบอักษรใดที่ใช้บนเว็บไซต์เฉพาะ คุณใช้ฟอนต์ Roboto บนคอมพิวเตอร์ของคุณหรือไม่ และถ้าใช่ มีจุดประสงค์อะไร? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!