ការប្រើប្រាស់ពុម្ពអក្សរនៅក្នុងកម្មវិធី Astro អាចត្រូវធ្វើឡើងដោយការទាញយកពុម្ពអក្សរទាំងនោះពីគេហទំព័រ Google Fonts ដែលមានអាស័យដ្ឋានជា https://fonts.google.com/ ។ ជាកិច្ចចាប់ផ្តើម យើងត្រូវបង្កើតថត public/fonts មួយសំរាប់រក្សាទុកនូវពុម្ពអក្សរទាំងឡាយដែលត្រូវបានទាញយកមកពីគេហទំព័រ Google Fonts មានដូចជា Moul.ttf និង Oswald.ttf ជាដើម។ បន្ទាប់មកទៀត យើងត្រូវបង្កើតឯកសារ CSS មួយនៅក្នុងថត public/fonts ដែលនៅក្នុងនោះ យើងត្រូវសរសេរកូដដូចខាងក្រោម៖
/* public/fonts/setup.css */
@font-face {
font-family: Moul;
src: url(Moul.ttf);
}
@font-face {
font-family: Oswald;
src: url(Oswald.ttf);
}
បន្ទាប់មកទៀតយើងត្រូវបញ្ចូលឯកសារនេះទៅក្នុងសមាសភាគដែលនៅក្នុងនេះពុម្ពអក្សរទាំងនោះត្រូវយកទៅប្រើ។
<!--src/components/Base.astro-->
---
const {pageTitle="ទំព័រគ្រឺះ"} = Astro.props
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title>
<link href="/fonts/setup.css" rel="stylesheet">
</head>
<body>
<slot name="top-slot">
<p>ធាតុ HTML មានស្រាប់</p>
</slot>
<slot name="bottom-slot" />
<style>
body{
font-family: Oswald, Moul;
}
</style>
</body>
</html>
យើងត្រូវធ្វើការកត់ចំណាំថា អ្វីទាំងអស់នៅក្នុងថត public អាចត្រូវយកមកប្រើដោយមិនចាំបាច់សរសេរឈ្មោះរបស់ថតនេះឡើយ៕
