CSS and Fonts

AresMUSH
1

So I’ve gotten back into playing around with Ares and I’m having some fun. I can get the fonts to change if is use google fonts, the problem is google fonts doesn’t have any fonts I want to use. @font-face but just could not get it to work. Does Ares only support google fonts for font changing? Thanks! :slight_smile:

2

There’s no limitation in Ares itself that would prevent you from using a custom font, same as any website. The advantage of google fonts is that you can do it with just a couple lines in your CSS. A custom font requires you to have the font file, put it somewhere that the web portal can load it (probably by putting it in ares-webportal/public and then doing a website deploy), and then update the CSS to reference them. I’m afraid I don’t know much about that process but it’s just a standard CSS thing. There are various tutorials online.

3

Maybe that’s what I was doing wrong. I was just uploading it to the standard image/misc directory and pointing to it that way. I’ll try putting it in webportal/public and redeploying the website. Thanks!

4

Uploading it to the images dir should work too if you’ve got the path right. My brain was just thinking code mode :slight_smile:

5

Got it! I did NOT have the right path. LOL Thanks for the pointer. :slight_smile:

6

So yeah - for future visitors…

You can’t upload the font file through the web portal because it only allows image files, but if you manually get it to the game/uploads directory it’ll work.

In your custom CSS you’d do:

@font-face{
    font-family: "Rex";
    src: url('/game/uploads/theme_images/Rex-BoldInline.otf'),
    url('/game/uploads/theme_images/Rex-BoldInline.otf'); /* IE */
}

body {
font-family: "Rex";
}

And then you can have a crazy font.

image