Add custom font to writefreely self hosted blog
This is fairly simple but worth noting.
- Find a font, files will either be hosted or downloadable.
- If requiring download, then download the files (e.g.
font.woff, font.woff2) and upload to the/static/fontssubdirectory of the main writefreely directory e.g./var/www/wfsite.com/static/fontsusing e.g.scpscp ~/Downloads/murmure-main/fonts/webfonts/LeMurmure-Regular.* user@server.com:/home/user/ssh user@server.comsudo mv LeMurmure-Regular.* /var/www/wfsite.com/static/fonts
- writefreely > admin > customise
- In the "Custom CSS" box add a CSS @font-face rule to define the location of the font, followed by CSS selectors specifying the elements which should use the custom font (for hosted fonts, use regular absolute URLs):
@font-face {
font-family: "lemurmure-regular";
src: url("/fonts/LeMurmure-Regular.woff2") format("woff2"),
url("/fonts/LeMurmure-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
header h1 {
font-family: lemurmure-regular;
font-size: 100px;
font-feature-settings: "ss02";
}