CLI for managing local fonts in your Next.js project!
- Node.js version >= 10.8.0
npx lofo
To get started, run the above command in the root directory of your project and lofo would try to get everything set up properly for you automatically. You can also install the CLI on your machine by running the command below:
npm install -g lofo
After which you can execute the CLI by just running the command: lofo in your terminal...
When the CLI is executed, it would look through your project for a fonts directory and create one(if it doesn't exist) in the root directory of your project.
Note
It would not check your entire project directory tree recursively, it instead checks directories that a fonts directory would likely be found(based on common conventions). As this would most likely vary from person-to-person, you could put all your local font files in a directory named fonts in the root directory of your project. You could move it somewhere else afterwards! A common convention you could also consider is putting your fonts directory(containing all your font files) in the public/ directory of your Next.js project.
In the latter scenario, after the creation of the fonts directory, it would prompt you to move your local font files[these files typically have extensions such as .otf, .ttf, .woff, .woff2 etc.] into the fonts directory.
It would then resolve the paths to all the font files in your fonts directory and then generate the code snippet to add the font imports into your Next.js project. This would typically be written to your root layout.tsx file.
This is an example project structure to begin with before running the cli -- not cumpulsory
my-project/
├── app
├── pages
├── public
├── fonts/
│ ├── my-font.woff2
│ └── ...
└── ...
The final destination of the fonts directory is up to you. You can decide to move the fonts directory to a different location, this can be achieved by running the CLI with an argument[yet to be implemented] or manually moving the fonts directory through your project directory tree(in your IDE). If you prefer the latter, remember to run lofo afterwards to auto-update your import path[this is a compulsory step]...
Using a command line argument with the lofo command:
Replace values in angle brackets with real values
| Command | Description | Example |
|---|---|---|
lofo --dest <path> or lofo -d <path> |
Run this command when adding a new font to your project to designate a "final destination" for the fonts directory. The value of <path> is resolved relative to your root directory |
lofo --dest public/assets/ |
lofo remove [font_family] or lofo rm <font_family> |
Run this command to remove a specified font family from your project -- the fonts directory. Run lofo rm or lofo remove to display a list of existing fonts from which you can select one to delete. |
lofo rm Roboto |
lofo remove --all or lofo remove -a |
Run this command to remove all font files and font family directories from your project -- the fonts directory |
lofo rm --all |
These are known "quirks" that you may notice during usage, some are by design, others are minor issues that would be fixed.
For now, the CLI only checks for font files that are direct "children" of the fonts directory -- it doesn't look inside sub-directoiries of fonts. This means that, you can't add whole directories containing all the files you need, instead you add the individual font files to the fonts directory and let the CLI group them for you...
This can admittedly get troublesome and we're looking into it. You can keep track of this issue to know when it's been resolved.
Unfortunately, every failure can't be accounted for and the only "escape hatch" for now is the command: lofo rm --all -- this command would remove all the font files and directories in the fonts directory, this should give you a "fresh" slate. If after doing this, something still goofs[something still goes wrong], please don't hesitate to open an issue.
- Add support for Next.js projects using the pages router
- Add support for React.js projects
- Add support for Vanilla.js projects
- Add support for React Native projects
Warning
This project, at this time, is in active development and makes some assumptions about your project and conventions. Feel free to open an issue if you catch something🧐!