Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

June 2019

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
Previous | Next

How to use Google Fonts


How to use
Google Fonts



So how do we use Google fonts?

Oh BOY, have I been meaning to get a formal tutorial up for this for ages. Let's get right into it! Google Fonts is a huge library of fonts that can be used anywhere on the web in your CSS for web design. No mess, no fuss, no headache. Don't know how to use it? That's fine! Let's walk through the steps and we'll get you customizing your layout fonts in no time.

Using the controls

The top controls you'll encounter look as follows, and allow you to either text search for a specific font, type your own dummy text, and change the font size, all of which are great tools so that you can see the font used exactly how you want to use it before deciding on a font, which saves time and potentially importing a font only to realize you don't like it at the size you need it to be.


The next set of menus allows you to filter by type of font, language the font is intended for, and font properties:


The first dropdown menu is extremely useful. You usually know what type of font you want, and weeding out all font types that don't fit that category makes your search go a lot faster:


The next one is pretty self explanatory: You'll usually want Latin if you're narrowing down your results, but this menu allows searching for only fonts that support your needed language go a lot quicker.


And finally we have the Font Properties menu, a personal favorite of mine. If you have a VERY specific look in mind for your font, you can use the first and third menus together to find the exact style you're looking for (as long as they have something that fits!)


Let's see what a theoretical search that uses all options looks like!


I wanted a narrow, thin sans serif font that supports Latin characters and I want to see it at a larger size, and I've gotten two results for my very specific search! Neato!


Picking your font

So, you've used the tools the site gives you and you found the perfect font. I'm sure you've already figured out how to add your font to your selections, but let's cover it anyway:


After clicking the 'add' button a new menu will display and tuck itself out of the way. From here you can keep searching for fonts and add them to your selection or, if you only need one font, you're good to move on!

Importing: Generator & HTML pages

Your Generator layout likely already has a head, where your page title is, and in some cases (especially in some of my newer layouts) it will even have a font import already. This is where you'll want to put your font selection. If you're keeping the layout's existing fonts and adding your own in you can just add a | to the list of fonts in that import and type in your font name, with a + for any spaces in the name:


If there isn't an import already, or you're deleting and replacing, you can use the Standard import code and add it to the same spot:


Now you can add fonts to the CSS as needed!

Importing: Complete Style

There are two ways to add fonts to Complete Style. You may have noticed a URL box above your custom CSS box. If you're currently using Complete Style you can see it live here. You can add just the URL from the Standard import to this and be able to use your font! It will generate it into the head of the document for you. I typically don't do it this way because I'm posting my layouts for other people to reuse, but if you're not doing that then this is a quick and easy way to plug and play!


But here's how I do it! First, copy the font's URL and paste it into your searchbar:


Then copy the CSS import code for the language you need:


Now you can paste it into your layout's CSS and start using it. And that's everything you need to know about using Google Fonts!

Want a self-hosted font instead?

No worries! I have a tutorial on how to use self-hosted fonts on IJ right here!


♡ You're Done! ♡

Comments

May. 30th, 2019 09:45 pm (UTC)
WOOT this exists!! *does a little dance*

I am forever forgetting how you do it with complete style and digging up other layouts of yours with different fonts. XD