Serving web fonts

It's possible to bundle web fonts to ttyd exetuable and use it, so that it won't need to be installed on the client side.

Bundling inlined fonts

1. add your own @font-face rules to index.scss, example:

   @font-face {
     font-family: 'My Font';
     font-style: normal;
     font-weight: normal;
     src: url(...);
   }

2. apply the following patch (make sure you use a local path for src):

   --- a/html/webpack.config.js
   +++ b/html/webpack.config.js
   @@ -29,6 +29,10 @@ const baseConfig = {
                    test: /\.s?[ac]ss$/,
                    use: [devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
                },
   +            {
   +                test: /\.(ttf|otf|eot|woff|woff2)$/,
   +                type: 'asset/inline',
   +            },
            ],
        },
        resolve: {

3. rebuild the html and ttyd.

Using the inlined font

start ttyd with -t "fontFamily=My Font".

See also

• https://github.com/tsl0922/ttyd/pull/929
• https://github.com/tsl0922/ttyd/wiki/Client-Options