BrighterScript plugin to automatically download and use Google Fonts in Roku SceneGraph components
npm install bsc-plugin-auto-google-fontsA BrighterScript plugin that makes it easy to use Google Fonts in your Roku SceneGraph applications. Simply reference any Google Font by name, and the plugin automatically downloads and bundles it with your app.
- Simple Syntax: Use googleFont:FontName to reference any Google Font
- Automatic Downloads: Fonts are automatically downloaded from Google Fonts GitHub repository
- Smart Selection: Automatically chooses the best font variant (prioritizes variable fonts, then regular weights)
- Build-Time Processing: Fonts are downloaded and bundled during the build process
- XML & BrightScript Support: Works in both SceneGraph XML components and BrightScript code
- Caching: Downloaded fonts are cached to speed up subsequent builds
``bash`
npm install bsc-plugin-auto-google-fonts
Add the plugin to your bsconfig.json:
`json`
{
"plugins": [
"google-fonts-roku"
]
}
#### In XML Components
`xml`
text="Hello, World!"
font="googleFont:Roboto"
fontSize="48"
/>
#### In BrightScript Code
`brightscript`
sub init()
label = CreateObject("roSGNode", "Label")
label.text = "Hello, World!"
label.font = "googleFont:Roboto"
label.fontSize = 48
m.top.appendChild(label)
end sub
When you build your project with BrighterScript, the plugin will:
1. Scan your code for googleFont: referencesgoogleFont:FontName
2. Download the specified fonts from the Google Fonts repository
3. Replace with pkg:/fonts/FontName.ttf
4. Copy the fonts to your staging directory
You can use any font from Google Fonts. Use the exact font family name as shown on the Google Fonts website.
Examples:
- googleFont:RobotogoogleFont:Open Sans
- googleFont:Lato
- googleFont:Montserrat
- googleFont:Playfair Display
-
The plugin operates during the BrighterScript build process:
1. Scanning Phase (beforePrepublish): Scans all .brs and .xml files for googleFont: referencesfonts/
2. Download Phase: Downloads fonts from the Google Fonts GitHub repository to your project's directorybeforeFileTranspile
3. Transform Phase ( / afterFileTranspile): Replaces googleFont:FontName with pkg:/fonts/FontName.ttf in your codeafterPrepublish
4. Copy Phase (): Copies all downloaded fonts to the staging directory
When multiple font files are available for a font family, the plugin automatically selects the best one using this priority:
1. Variable fonts with [wght] axis (most flexible)
2. Other variable fonts
3. Regular static fonts
4. Any available font file
- BrighterScript ^0.69.4
- Node.js (with curl available in PATH)
``
your-roku-project/
├── bsconfig.json # BrighterScript configuration
├── source/ # Your BrightScript source files
├── components/ # Your SceneGraph XML components
├── fonts/ # Downloaded fonts (auto-generated)
└── out/
└── staging/
└── fonts/ # Fonts copied to staging (auto-generated)
A working demo is included in the demo/ directory. To run it:
`bash`
npm run buildDeploy the demo/ directory to your Roku device
The demo shows how to use both system fonts and Google Fonts side by side.
The plugin uses these directories (relative to your rootDir in bsconfig.json):
- Fonts Directory: fonts/ - where downloaded fonts are storedstagingDir
- Staging Directory: Specified by in your BrighterScript config
If a font fails to download, check:
1. The font name matches exactly with Google Fonts
2. The font is in the ofl/, apache/, or ufl/ directories of the Google Fonts repositorycurl
3. Your internet connection is working
4. is installed and available
Ensure:
1. The font file was copied to pkg:/fonts/ in your deployed app.ttf
2. The font format is (Roku supports TrueType fonts)
3. The font file isn't corrupted (check file size)
To work on this plugin:
`bashInstall dependencies
npm install
This plugin downloads fonts from the Google Fonts GitHub repository, which contains fonts licensed under open source licenses (OFL, Apache, UFL).