aboutsummaryrefslogtreecommitdiff
path: root/content/2021-02-27.md
diff options
context:
space:
mode:
Diffstat (limited to 'content/2021-02-27.md')
-rw-r--r--content/2021-02-27.md26
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