Coding support: I'm having a problem with the OpenDyslexic font. If a player tries to change the font to OpenDyslexic, it won't change at all.
Could you please tell me what I'm doing wrong in my code?
Since you did not include your code, I am not sure where it could have gone wrong. [I would need the JavaScript of your settings and the CSS code related to the font import and the change of fonts.]
But OpenDyslexic is, unlike other online fonts, a local import. This means that you need to include the font files with the other game files (or create an online import link to a hosting server).
Note: it is best to have local import for anything used in your project (font, image, etc...) in case the online server hosting your files shut down.
I might as well make a quick general tutorial...
FONT CHANGE AND LOCAL IMPORT
The differences between importing a font from a server and a local import are:
what CSS code is required
You can find the code below in my templates on on my pastebin account.
Obviously if you import a font from an online server, you don't need to save the font anywhere. But if it is a local font, you need to include it with your game files. For easier organisation, I advise you to create a separate folder for it. Here is mine:
I use the same organisation for all my projects. Makes it easy to know were stuff is.
What is most important is to know where the file is relative to the index file (to link it in your CSS) and not forget to zip the whole thing together before you upload your project.
The code to import a font is also different between an online and local import. For the online import it is a simple one:
@import url('https://fonts.googleapis.com/css2?family=Georgia:wght@400;700&display=swap');
You just need to add the URL of the font. Google will provide just one like for multiple online import (of different font families or font weight within one family). Different services will provide different URLs for their fonts. For example, the one below is from FontAwesome:
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css');
On the other hand, local import will require more information, like below:
@font-face {
font-family: "Dyslexic";
src: url(fonts/OpenDyslexic-Regular.otf) format("opentype");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Dyslexic";
src: url(fonts/OpenDyslexic-Italic.otf) format("opentype");
font-style: italic;
font-weight: 400;
}
@font-face {
font-family: "Dyslexic";
src: url(fonts/OpenDyslexic-BoldItalic.otf) format("opentype");
font-style: italic;
font-weight: 700;
}
@font-face {
font-family: "Dyslexic";
src: url(fonts/OpenDyslexic-Bold.otf) format("opentype");
font-style: normal;
font-weight: 700;
}
You will need to create an import rule not only for any new font, but also for each weight and style of said font. The example above includes: normal, normal bold, italics, italics bold. You also need to :
define the name of the font family (to use in the rest of your CSS code)
add the font file URL (relative to the index file) and include the format of the font, there are only 4)
the font style of that file
and the font weight of that file
IMPORTANT: the @import and @font-face needs to be the first thing in your Stylesheet/CSS file. Otherwise, it just won't work.
I also like to include all fonts (and color) in the :root CSS rule. So it would look like this
:root {
--sansserif: 'Montserrat', sans-serif;
--opendyslexic: "Dyslexic", serif;
--serif: 'Georgia', serif;
}
Now that you imported all fonts you want, you need to create a setting for the player so they can get the font they want. Here is the one I have in my templates:
var settingFontFamily = ["Georgia", "Montserrat", "OpenDyslexic"];
var fontFamily = function() {
var $html = $("html");
$html.removeClass("sansserif serif opendyslexic");
switch (settings.fontFamily) {
case "Georgia":
$html.addClass("serif");
break;
case "Montserrat":
$html.addClass("sansserif");
break;
case "OpenDyslexic":
$html.addClass("opendyslexic");
break;
}
};
Setting.addList("fontFamily", {
label : "Change font style.",
list : settingFontFamily,
default : "Georgia",
onInit : fontFamily,
onChange : fontFamily
});
In the first [] brackets, you have the name of the fonts the player will see. You don't need it to be the exact same name as the font. It can be just Serif, Sans-serif, etc..
Under switch (settings.fontFamily), you define a case for each font you want to include. First the name of the case (to be found in the [] brackets), then the CSS class required for the switch. So for the case Georgia, I created a serif CSS class.
Don't forget to add all created classes in the parentheses of $html.removeClass("sanserif serif opendyslexic");.
And finally the CSS font change. There are two ways you can do it: do a general change for everything or just target some aspects of your UI. In any case, you need to use the defined CSS classes you wrote in your JavaScript.
For the first, you will target the body class. This will change the font of the whole thing (main passage, side-bar and dialog box):
.sansserif body {font-family: var(--sansserif);}
.opendyslexic body {font-family: var(--opendyslexic);}
.serif body {font-family: var(--serif);}
Since I defined the font families in the :root rule at the start, I used var() here to call it instead of the actual family name and type of font.
If you only want to target some aspects of your UI (because you want to use a special font and don't want it to change), you will need to essentially add all classes you want to target with the font switch (here the passage/dialog body):
.sansserif .passage, .sansserif #ui-dialog-body {font-family: var(--sansserif);}
.opendyslexic .passage, .opendyslexic #ui-dialog-body {font-family: var(--opendyslexic);}
.serif .passage, .serif #ui-dialog-body {font-family: var(--serif);}
And this should work just fine!
Now I'm going to check my code and see if I made a mistake somewhere too...
