Typography
H5P activities load inside their own frame, so they don't pick up your theme's fonts on their own. The Typography section brings your font in and sets the text colors other settings build on.
Font
| Setting | What it does |
|---|---|
| Font | Site font (default) uses the font your theme declares. H5P default leaves H5P's own fonts alone: Inter in newer activities, and each content type's own font in older ones. The description underneath tells you which font was detected. |
| Site font: Custom Family | Optional. Overrides the detected font, for example Lato, sans-serif. |
| Site font: Stylesheet URL | Optional. The stylesheet that loads your custom font, such as a Google Fonts link. Activities run in their own frame, so they need it to load the font themselves. |
Using a classic theme?
Site font detects fonts from block themes, which declare them in their global styles. If you use a classic theme, the description says "Your theme doesn't declare a font activities can use." In that case:
- Enter your font in Site font: Custom Family, for example
Lato, sans-serif. - If the font isn't one every device has, paste the font's stylesheet URL into Site font: Stylesheet URL. For Google Fonts, that's the
https://fonts.googleapis.com/css2?family=…link from the embed code.
Both settings are ignored when Font is set to H5P default.
Colors
| Setting | What it does | When empty |
|---|---|---|
| Main Text Color | Text on white backgrounds, in popups and overlays. Use a dark color. Many text settings on other sections follow it. | Black |
| Link Color | Links you add to descriptions, questions, explanations and so on | #0000ee |
| Hover: Link Color | Links on hover | #0000ee |