Custom fonts are adjustable via App CSS. Please do the following:
1. In the Purple Manager the fonts have to be uploaded as ZIP in the corresponding settings menu (App Design -> General -> Fonts). Important here is the format in .ttf and the name must be the Postscript name (e.g. Pacifico-Regular.ttf).
2. Rebuild the app so that the settings become active
3. Create an App CSS in the Purple DS HUB. You can find it under the menu entry Purple DS in the left bar.
4. Within this App CSS the font has to be declared first. Example for the Pacifico font:
@font-face {
font-family: Pacifico-Regular;
src: url('fonts/Pacifico-Regular.ttf') format('truetype');
}
Important here: font-family has to be the Postscript name again (and also the name of the font file) and src url has to be specified in the following way "fonts/Pacifico-Regular.ttf" (note the preceding "fonts/").
5. After that the font can be used for HTML content elements. Example for setting the font for the body and all headings:
body, h1, h2, h3, h4, h5, h6 {
Pacifico-Regular, sans-serif;
}
Important here: font-family previously declared has to be used. "sans-serif" simply stands for the fallback font (not really necessary, but for completeness).
6. Publish any article with selected App CSS into the app.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article