From 13cec3d0fc257d0e65c9a1c06bfc71648722a506 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Fri, 2 Feb 2024 13:05:54 -0500 Subject: Initial commit for cgit platform --- content/2021-02-27.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 content/2021-02-27.md (limited to 'content/2021-02-27.md') 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 -- cgit v1.2.3-54-g00ecf