blob: 72f0ddeab6890b7bc929965541da8f92bd9eb156 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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.
|
