You may see some users with fancy fonts on their profile or an @font-face line in their coding. The @font-face rule is a bit of a unique area of CSS. What it does is allow you to import font files from host sites in order to use various web fonts on your page.
At the moment, the only sites which support font hosting are Google Fonts and Font Library. You can find directions for each site below.
Posted: Sat Oct 15, 2016 6:47 am
General Notes
To make your font work, you need two parts: 1. A @font-face line in your CSS which has a src (source) for the font family URL This will notify your browser that "hey, we are inserting a font from (this location) so that it can be used on your page" 2. A property targeting at least one of your selectors and applying this font to them Ex: .panel{font-family: 'Open Sans';}
Different browsers support different font src URLs The latest versions of Firefox, Chrome, and Microsoft edge should support .woff2 files, but Safari and Internet Explorer only support .woff You can check MDN for more compatibility
You cannot use @import to import fonts Simply put, Gaia doesn't support it, so it won't work.
You cannot import fonts from other sites like DaFont, Font Squirrel, etc. They do not support the EULA (End User License Agreement). You can read more about it in this post. If you see profiles with fonts from those locations, it is because the font is displayed through graphics (images), not imported.
Profilist
Captain
Hardworking Regular
Offline
Profilist
Captain
Hardworking Regular
Offline
Posted: Sat Oct 15, 2016 6:47 am
Google Fonts
Google Fonts is the most reliable host for importing fonts. You can check out their website at fonts.google.com
STEP 1: Pick a Font Simply head over to the Google Fonts site and browse their catalog for fonts you want to use. As you find ones you like, click the ( + ) symbol in the top right of them. This will add them to your font collection window at the bottom of the page.
STEP 2: Get the font family URL Open the window at the bottom of your page which says "# Family Selected" In this window, you can customize your fonts and choose if you want different weights/styles of them to be imported onto your page. Once you are done with that, click the EMBED tab of this window and click the STANDARD tab slightly below that. You will get code which looks somewhat like this:
We only want the URL in there, so copy this part: https://fonts.googleapis.com/css?family=Open+Sans And paste that into your browser address bar
STEP 3: Copying the @font-face coding The font family URL should lead you to a page which contains lines of code looking somewhat like this:
You only really need the /* latin */ part of this code, so just copy the @font-face coding under that part and ignore the rest.
STEP 4: Inserting the @font-face into your code Once you have your @font-face CSS copied, all you have to do is paste it into your profile's Theme Override box! The location does not really matter, but I would suggest putting it towards the top, so that it is easy to locate (and it speeds up its loading time a bit, since the browser will read that line first)
Posted: Sat Oct 15, 2016 7:09 am
Font Library
Font Library had a smaller collection of fonts, but it also has some more unique and fancier options. You can check out their website at fontlibrary.org
STEP 1: Pick a Font Simply head over to the Font Library site and browse their catalog for fonts you want to use. Once you find one you like, click on it to go to the font page. Ex: Megrim
STEP 2: Get the font family URL On the right side of the font page, there will be an area which says "USE THIS FONT" You will want to copy part of the HTML coding it has listed under here...
Specifically, you just want the "https://fontlibrary.org/face/megrim" URL in there Take that URL and paste it into your browser's address field.
STEP 3: Copying the @font-face coding The font family URL should lead you to a page which contains lines of code looking somewhat like this:
You can ignore any coding under the "The following rules are deprecated." text. Copy everything above there and paste it into your profile's Theme Override box
STEP 4: Correcting the source URL Font Library requires one extra step: You need to correct the src line, since it is incomplete. To do so, locate the "src" line of your @font-face block. It should look like: src: url('/assets/fonts/name/blahblahblah...');
Add "https://fontlibrary.org" onto the front of that URL, so it turns into: src: url('https://fontlibrary.org/assets/fonts/name/blahblahblah...');
