diff options
Diffstat (limited to 'content/2021-02-27.md')
-rw-r--r-- | content/2021-02-27.md | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/content/2021-02-27.md b/content/2021-02-27.md new file mode 100644 index 0000000..72f0dde --- /dev/null +++ b/content/2021-02-27.md @@ -0,0 +1,26 @@ +# Converting Custom Fonts to Base64 Strings + +There are currently no plans to automatically convert custom fonts to base64 strings within the project itself - **but** it is very easy to do so manually for Mac/Linux users. + +Simply open a terminal window and navigate to where your custom font file is located. The enter the following command (replacing the font extension name with your appropriate file name): + +```.bash +base64 your-custom-font.woff2 > font-base64.txt +``` + +Then in your `style.css` file, add the custom font as you normally would via the `@font-face` property but this time utilizing base64: + +```.css +@font-face { + font-family: 'FontName; + src: url(data:font/woff2;base64,[BASE64 CODE]) format('woff2'); +} +``` + +## Things to Keep in Mind + +Remember that by using base64 strings you are *significantly* increasing the overall size of your single file project. This should be used for extreme use cases where a single file website/blog isn't allowed access to 3rd party URLs or extra files on the root server. Hence why by default it isn't include in the PHPetite project itself. + +## Live Example + +You can check out the [ThriftyName](https://thrifty.name) project (built on PHPetite) to see base64 custom fonts in use.
\ No newline at end of file |