Add the ability to import local fonts

[TheYellowArchitect]

Your idea:

Currently, to make a new theme (dynamically), I can get away with it without real code. The style editor allows me to add a background image, change font size, colors, images etc But I cannot add new fonts. So I am locked to the fonts already existing.

My suggestion is for the possibility to import fonts by uploading them (locally on the client) e.g. .ttf and .otf If it's too hard given uploading local image is not possible, then linking to a font website should work imo.

Until then, I would be thankful to anyone who can tell me how to import new fonts to the browser via developer tools.

[5e-Cleric]

Its not a matter of it being difficult, its a matter of we are not a hosting site. You can upload a font to fontsquirrel or even github, or get google fonts, and use them in your brew. This will not be implemented as you suggest.

How to use custom fonts:

If the default/web-safe fonts are not satisfactory, and Google Fonts doesn’t help either, you can generate your own web font kit using FontSquirrel.com with some effort.

Follow the terms of the font’s license.

1. Download a font, generally a .zip file (extract it if so).

2. At the Fontsquirrel Generator, check “legally allowed to upload” and click Upload Font. Navigate to your font file and upload. Choose “Expert” option.

3. Set following options: WOFF2 format, WebOnly protection, Base64 Encode & Style Link. “Download Your Font”.

4. Open your new font folder (“webfontkit-[date]-…”) and open the “stylesheet.css” file in a text editor. Most of it is gibberish, copy and paste the entirety into your Style Editor. Set the desired element’s font-family to match the name found in the stylesheet.css.

OR

• Upload the .woff2 file (or .ttf, .otf, whatever you want) to a Github account, push that file’s URL through Githack, and @import the prod URL into your brew. Set your font-family for the desired element.

In the brew, the way to use a custom font is to import it, using the @font-face rule, example as follows:

@font-face {
  font-family: "Trickster";
  font-style: regular;
  font-weight: normal;
  src: url("trickster.otf") format("opentype") ,
    url("trickster.ttf") format("truetype"),
    url("trickster.woff") format("woff");
}

Note: you only need to specify a font style and font weight if you want to use a bold or thin version (font-weight) or italics (font-style).

If you need anything else, you should probably ask on reddit or discord better. But this is plenty to go on. Closing this.

[Gazook89]

Also, if you have the fonts installed on your computer, you should still be able to use them— but when others try to view your brew online, it won’t work because the font isn’t hosted.

But if you don’t care about sharing your brew as a Homebrewery link, you can just print it to PDF and share that, and it should embed the font.