Hello! Thank you for your time.

With CSS customization activated, I have been trying my hand at customizing my new game's itch.io page (click here for link). One item I am working on involves using more than 2 distinct google fonts on the game page. Currently, the fonts I am using are as follows:

Font: Lato
Header Font: Patua One
"Sticky Note" Font: Ultra

These are all fonts that are currently available on itch.io through google fonts. The first two are set through the "Edit Theme" option on the itch.io editor. The issue is how I have been setting the final "Sticky Note" font. With CSS, I've made use of the font-family attribute shown in the custom code as follows:

.custom-large-font {
 margin: 0 0 10px 0 !important;
 font-family: Ultra, "Lucida Console", monospace;
 font-size: 30px;
 text-align: center !important;
 text-decoration: underline; 
} 
.custom-medium-font {
 margin: auto !important;
 font-family: Ultra, "Lucida Console", monospace;
 font-size: 20px;
 text-align: center !important;
 max-width:250px !important; 
}
//truncated code
<p class="custom-large-font">
Piracy in Motion 
</p>
<p class="custom-medium-font">
With the spacebar and arrow keys, see your pirate avatar in action! 
</p>

Now, this solution works on desktop. On my mobile (an apple device), it defaults to monospace. 

What I want to explore is how to specifically import additional fonts through CSS, if that would be possible (currently the fonts I want to add are already accessible to itch.io through google fonts). I imagine that this would allow for the font-family property to fully function on mobile. If not possible (or I am misinterpreting what is actually happening here), I would be open to alternative suggestions.

I believe that this issue is related to the question posed in previous forum posts. No direct solution was written, but CSS custom code access was granted as a solution.

Any insight on this issue would be appreciated.

After some more research on my side, I was able to find a solution.

In CSS, you can use the @import function to import a font from Google Fonts (I do not know if this will work on fonts not already made available by itch.io)

Below is the code snippit I used for my page theme:

@import url('https://fonts.googleapis.com/css?family=Ultra');

This was used in conjunction with the previously shown "font-family" CSS code to set the font.

It is important to note that I had to place this code at the top of my CSS custom code.

The site used for reference was a w3docs page.