[Mini Guide] Using Google Fonts on Profiles | First Page | Forum

Profilist · 2014-07-04T05:47:43-07:00

[color=#4A8CF6][size=17.5][ Mini Guide ][/size] [list][size=14.5]Using Google Fonts on Profiles[/size][/color] [size=10.5]Customizing your layout just got a whole lot more fun! Instead of just being stuck with the [url=http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html]generic system fonts[/url] which are "safe to use" for all computers/browsers, you can use Google Fonts to import hundreds of new fonts into your profile and work with those instead! [b]NOTE:[/b] In order to...

Gaia Forums » GAIA Community » Gaia Community Discussion » Profile Discussion

Report ad

Profilist

Community Member (?)

Hardworking Regular

Offline

Post: 92984193_1 created on Fri, 04 Jul 2014 13:47:43 +0000
Posted: Fri, 04 Jul 2014 13:47:43 +0000

[ Mini Guide ]

Using Google Fonts on Profiles

Customizing your layout just got a whole lot more fun!
Instead of just being stuck with the generic system fonts which are "safe to use" for all computers/browsers,
you can use Google Fonts to import hundreds of new fonts into your profile and work with those instead!

NOTE:
In order to fully understand this guide, you should already have a grasp of the basics of CSS
which includes knowledge of how and where to add codes, how to use the "font-family" property,
and knowledge of the names of basic profile selectors.

Updates:
9.2014 -- Use Firefox or Internet Explorer in order to pull up Google Fonts. Chrome/Safari/Opera redirects an unnecessarily long amount of @font-face when the googleapis CSS is pulled up.

Profilist

Community Member (?)

Hardworking Regular

Offline

Report Post
Post: 92984193_2 created on Fri, 04 Jul 2014 13:53:50 +0000
Posted: Fri, 04 Jul 2014 13:53:50 +0000

Step #1 : Find Your Font

Your starting location is Google Fonts
Browse the hundreds of font families there and find the one you want.

Once you have found your font, click the "Quick-use" button in the lower right corner
User Image

Profilist

Community Member (?)

Hardworking Regular

Offline

Report Post
Post: 92984193_3 created on Fri, 04 Jul 2014 22:32:41 +0000
Posted: Fri, 04 Jul 2014 22:32:41 +0000

Step #2 : Finding and Copying Your CSS

You should get redirected to the Quick Use page (there will be a "speedometer" on the right)
Choose what font style you want and the character sets, then scroll down to step three.
It will give you an html code to add to your website. Instead of copying the whole thing, just take the url from it and paste that into your address bar
User Image

You should get redirected to a page like this:
User Image

From there, simply copy all of the CSS on that page and paste it into your Theme Override!
User Image

Profilist

Community Member (?)

Hardworking Regular

Offline

Report Post
Post: 92984193_4 created on Fri, 04 Jul 2014 22:37:58 +0000
Posted: Fri, 04 Jul 2014 22:37:58 +0000

Step #3 : Using your @font-face Font

Once you have your @font-face block pasted into your code, just use the font-family property to apply it to whatever selectors you please.
Example:
.panel h2{font-family: 'Dancing Script';}

For certain browsers, your font might not load right away when navigating to the page, so expect brief moments of "a flash of default font"

You can use as many fonts as you want -- you just need a new @font-face for every new one you find!!
Just keep in mind that adding more fonts might slow the load rate of your page, especially for those with slower internet connections.

Enjoy your new fonts! emotion_c8

Profilist

Community Member (?)

Hardworking Regular

Offline

Report Post
Post: 92984193_5 created on Sat, 05 Jul 2014 15:57:23 +0000
Posted: Sat, 05 Jul 2014 15:57:23 +0000

FAQ & Other Helpful Links

Frequently Asked Questions:
Q: Why can't I use other font websites like Font Squirrel or DaFont?
A: You can use those, but only certain browsers allow those sorts of fonts. IE and Firefox support EULA (End User License Agreement), which means they will not apply fonts from a different domain (Source). So if you want to be "all-browser-friendly", Google fonts is a good option!

Q: Okay... I pasted in the @font-face. Now what?
A: Like I said, you will need to use the font-family property in order to apply it to your theme. Want to learn some more things you can do to your font as well? Check out this post.

Other Font Websites:
- FontsAddict (.tff files)

Link this Mini Guide?

[url=http://www.gaiaonline.com/forum/t.92984193/][Mini Guide] Using Google Fonts on Profiles[/url]

FAQs and Resources (outdated)

Extended FAQ

General Profile Guides:

[GUIDE: CSS Properties] Style Sheet Solutions

[GUIDE] Learn How To Code v2/Current Profiles (outdated)

Wix Profile Guide

Mini Guides:

The Scrollbar Guide | Hidden & Custom Scrollbars

Youtube Media Guide

Billy Media Guide