Google Web Fonts
เป็นบริการ Font แบบ Open source จาก Google เปิดให้ผู้พัฒนาเว็บไซต์สามารถเอา Font เหล่านี้ไปใช้งานบนเว็บเพจได้ง่าย รวดเร็ว และไม่มีค่าใช้จ่าย
Link - https://www.google.com/fonts เข้าไปเลือก Font ที่ต้องการที่นี้ครับ
ตัวอย่างการใช้งาน Google Web Fonts
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
ขั้นตอนการใช้งาน Google Web Fonts
1. เพิ่ม stylesheet link อ้างอิงไปที่ Web fonts ที่ต้องการ สามารถทำได้ 3 วิธี
- Standard
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
- @import
@import url(http://fonts.googleapis.com/css?family=Tangerine);
- Javascript
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Tangerine::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
2. กำหนด Font ผ่านทาง CSS
font-family: 'Tangerine', serif;
หรือ
<div style="font-family: 'Tangerine', serif;">Making the Web Beautiful!</div>
ผลลัพธ์