diff --git a/front/docs/CSS.md b/front/docs/CSS.md index 0fb78cb..8a2a151 100644 --- a/front/docs/CSS.md +++ b/front/docs/CSS.md @@ -5,6 +5,7 @@ In this document we take a look at what CSS is and how it can be applied to a pu - [What is CSS](#what-is-css) - [Rules](#rules) - [Css in chatty-pub](#css-in-chatty-pub) +- [Uploading fonts](#uploading-fonts) - [Print settings](#print-settings) - [Typing Emoji](#typing-emoji) @@ -136,6 +137,37 @@ It is possible to bypass the parser and add arbitrary code to the CSS on the pag --- +## Uploading fonts + +It is also possible to upload a font to the application. To do this, you send the font (.ttf or .woff work best) in a message to the #rules channel of the publication you want to use it in. + +Then: + +1. Copy the link to the uploaded font. +2. Add a @font-face rule for the font, but wrap it in three backticks. Like so: + +- `font-name`: Can be any name you like, and you just use the same name later in your style rule. +- `font-url`: Paste the url of the file you just uploaded here. + +````css +``` +@font-face { + font-family: "font name"; + src: "font url"; +} +``` +```` + +You can then use the font in this way: + +```css +🤘 { + font-family: "font name"; +} +``` + +> Please only upload free or open-source fonts to our server! + ## Print settings To set the paper size we can use the special selector `@page`. The following snippet set the page size to A5. @@ -194,15 +226,13 @@ font-family: fantasy; ``` It is also possible to specify an exact font name, but it will only be used if it is actually available on your system. -For example following statement will try to use Helvetica if available, but will fallback on a generic sans-serif font if not. +For example following statement will try to use Helvetica if available, but will fallback on a generic sans-serif font if not. (Note the quotes around the font name). ```css font-family: "Helvetica Neue", sans-serif; ``` -(Note the quotes around the font name) - -We have not yet implemented a way to upload and use fonts. Working on it! +Also see the section on uploading fonts below. - [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) - The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative units, such as em, ex, and so forth. - [font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) - The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family. @@ -217,6 +247,7 @@ We have not yet implemented a way to upload and use fonts. Working on it! - [white-space](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) - The white-space CSS property sets how white space inside an element is handled. - [word-break](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) - The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box. - [word-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing) - The word-spacing CSS property sets the length of space between words and between tags. +- [text-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) - The text-shadow CSS property adds shadows to text. ### Transforms