uploading a custom font for your forum

[rubberduckdudette]

Hi, 

I have a fair amount of experience coding with HTML and CSS for websites, but this is my first time doing it with a forum. 

If I wanted to upload a custom font to my forum how do I go about uploading the .otf file? I can't seem to get deep enough into the code to access ftp files or anything like that. Is this even a possibility on proboards? Would I have to make my custom font into a plugin to get it to work?

Thank you for your help!

[elli]

It's not possible to access your ProBoards Forum using FTP, no. Everything you have access to is found within the Admin Control Panel (your-forum.proboards.com/admin).

If you'd like to use a custom web font on your forum, you'll need to host it yourself. This is usually done through a server you have access to or — ideally — own.

You can then embed the web font near the top of your stylesheet using the CSS @font-face syntax:

@font-face {
 font-family: 'Font Name';
 src: url('https://your-server.com/webfonts/font-name-400.woff2') format('woff2'),
      url('https://your-server.com/webfonts/font-name-400.woff') format('woff');
 font-weight: 400;
 font-style: normal;
}

@font-face {
 font-family: 'Font Name';
 src: url('https://your-server.com/webfonts/font-name-400i.woff2') format('woff2'),
      url('https://your-server.com/webfonts/font-name-400i.woff') format('woff');
 font-weight: 400;
 font-style: italic;
}

@font-face {
 font-family: 'Font Name';
 src: url('https://your-server.com/webfonts/font-name-700.woff2') format('woff2'),
      url('https://your-server.com/webfonts/font-name-700.woff') format('woff');
 font-weight: 700;
 font-style: normal;
}

@font-face {
 font-family: 'Font Name';
 src: url('https://your-server.com/webfonts/font-name-700i.woff2') format('woff2'),
      url('https://your-server.com/webfonts/font-name-700i.woff') format('woff');
 font-weight: 700;
 font-style: italic;
}

I would recommend providing at least the .woff and .woff2 filetypes. You can use a converter such as Font Squirrel to convert an .otf or .ttf to these formats. Make sure the font is licensed for use on the web; you can check that in the license agreement.

If you don't have access to a server, I would recommend finding a visually-similar alternative to your desired font on a service such as Google Fonts (free) or Adobe Fonts (paid). These services will provide the font files for you and all you have to do is embed the correct code, which is provided with instructions. Most of the major font distributors, such as MyFont, provide similar services for a fee.

Hope that's helpful for you.

[Brian]

Hi, rubberduckdudette .

We unfortunately only support images and favicons as valid theme storage uploads. To get a webfont working from the file of your choice you would need to host the font yourself on a domain that allows for cross-origin resource sharing (or CORS for short).

Alternatively, you can select from the list of fonts that exists on Google Fonts which is already set up this way.

Edit: I've been beaten to the punch by a much more informative post, but I'll leave mine here because of the CORS thing.

[rubberduckdudette]

Thank you so much!! These are really helpful I'll give them a shot

[xvad]

Jul 31, 2020 18:08:49 GMT -8 Brian said:

Hi, rubberduckdudette .

We unfortunately only support images and favicons as valid theme storage uploads. To get a webfont working from the file of your choice you would need to host the font yourself on a domain that allows for cross-origin resource sharing (or CORS for short).

Alternatively, you can select from the list of fonts that exists on Google Fonts which is already set up this way.

Edit: I've been beaten to the punch by a much more informative post, but I'll leave mine here because of the CORS thing.

How do I embed the Google fonts to my forum?  Thanks in advance for your help.

This is the font that I want to add.

Mea Culpa

Here is my site. xomviet.net/

[Michael]

Mar 31, 2022 9:52:15 GMT -8 xvad said:

Jul 31, 2020 18:08:49 GMT -8 Brian said:

Hi, rubberduckdudette .

We unfortunately only support images and favicons as valid theme storage uploads. To get a webfont working from the file of your choice you would need to host the font yourself on a domain that allows for cross-origin resource sharing (or CORS for short).

Alternatively, you can select from the list of fonts that exists on Google Fonts which is already set up this way.

Edit: I've been beaten to the punch by a much more informative post, but I'll leave mine here because of the CORS thing.

How do I embed the Google fonts to my forum?  Thanks in advance for your help.

This is the font that I want to add.

Mea Culpa

Here is my site. xomviet.net/

Hi,

This post from elli does an excellent job of explaining how you can add a font to your forum. Google provides the hosting for Google Fonts so following those instructions should be fairly straightforward. If you have any questions or issues please feel free to create a thread on the Support Board and someone will help you out.

[xvad]

Mar 31, 2022 14:29:13 GMT -8 Michael said:

Mar 31, 2022 9:52:15 GMT -8 xvad said:

How do I embed the Google fonts to my forum?  Thanks in advance for your help.

This is the font that I want to add.

Mea Culpa

Here is my site. xomviet.net/

Hi,

This post from elli does an excellent job of explaining how you can add a font to your forum. Google provides the hosting for Google Fonts so following those instructions should be fairly straightforward. If you have any questions or issues please feel free to create a thread on the Support Board and someone will help you out.

Awesome.  Thanks.  I got it to work, quite easy once I got the hang of it.