commit 8babf6f7c98fa76e591febf2f46969229cd5d0c5 · knotbin.com/blog

-21

lib/google-font.ts

···

       1
       -
       // from https://github.com/kosei28/vercel-og-google-fonts/blob/main/src/utils/font.ts

     

       2
       -
       export async function loadGoogleFont(font: string, text: string) {

     

       3
       -
         const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(

     

       4
       -
           text,

     

       5
       -
         )}`;

     

       6
       -
       

     

       7
       -
         const css = await (await fetch(url)).text();

     

       8
       -
       

     

       9
       -
         const resource = css.match(

     

       10
       -
           /src: url\((.+)\) format\('(opentype|truetype)'\)/,

     

       11
       -
         );

     

       12
       -
       

     

       13
       -
         if (resource) {

     

       14
       -
           const res = await fetch(resource[1]);

     

       15
       -
           if (res.status == 200) {

     

       16
       -
             return await res.arrayBuffer();

     

       17
       -
           }

     

       18
       -
         }

     

       19
       -
       

     

       20
       -
         throw new Error("failed to load font data");

     

       21
       -
       }

+2 -2

static/styles.css

···

       1
       -
       @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

     

       2
       -
       @import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400;0,700;1,400&display=swap');

     

       3
        
       @font-face {

     

       4
        
         font-family: 'Berkeley Mono';

     

       5
        
         src: url('/path/to/local/fonts/BerkeleyMono-Regular.woff2') format('woff2'),

···

       1
       +
       @import url('https://api.fonts.coollabs.io/css2?family=Inter:wght@400;700&display=swap');

     

       2
       +
       @import url('https://api.fonts.coollabs.io/css2?family=Libre+Bodoni:ital,wght@0,400;0,700;1,400&display=swap');

     

       3
        
       @font-face {

     

       4
        
         font-family: 'Berkeley Mono';

     

       5
        
         src: url('/path/to/local/fonts/BerkeleyMono-Regular.woff2') format('woff2'),