-
-
Notifications
You must be signed in to change notification settings - Fork 7
Custom Fonts Guide
Wudooh allows you to add and use custom fonts in addition to the many fonts it comes preinstalled with.
This allows you to use your own favorite fonts into your Wudooh experience without requiring them to be preinstalled.
NOTE: The Custom Fonts feature is in beta, some things may not work as intended or be changed in the future
Wudooh does this by "injecting" your fonts using a CSS @font-face for every CustomFont into all the pages you visit.
All the fonts are placed into a single <style> element into each page's <head> so that the page can successfully resolve the font's name and source when Wudooh's updating feature tells it to use your Custom Font.
And just like magic, your Custom Font is recognized and usable across all your pages!
Custom Fonts have 3 properties:
You must provide at least one of URL or Local Name with URL being preferred for its machine agnostic nature. If both are chosen then the natural CSS priority rules will apply. Which always prioritize the Local source first! If the local source is not found or invalid then it will attempt to download the URL source.
This is the name of the font, this must be unique for the custom font as it will be what is used to reference your font on the extension and on web pages.
Wudooh will use this as the CSS @font-face's font-family property.
This is the URL location of the font, you can leave this blank if you are using a local font instead but you must have at least one of URL or local name, URL is preferred.
The URL location will usually be a http or https location that ends in a supported font extension such as .woff, .woff2, .ttf or .otf.
An example URL to the excellent Aref Ruqaa font is this:
https://fonts.gstatic.com/s/arefruqaa/v8/WwkbxPW1E165rajQKDulIIIoVeo5.woff2
Note how it begins with https and ends in .woff2. Going to the link in your browser will request a download.
Wudooh will use this as the CSS @font-face's src: url property.
This is the local installed name of the font, you can leave this blank if you are using a remote (url) font instead but you must have at least one of URL or local name, URL is preferred.
The local name must match exactly as it is installed on your machine. If you do not have it installed or it is removed it will no longer work, this is why URL is preferred since a URL based font will be machine agnostic.
Wudooh will use this as the CSS @font-face's src: local property.