InsaneJournal

Tweak says, "Get Over It!"

the bee's knees (nzt) wrote in rp_tutorials,
@ 2012-03-05 20:50:00

Entry tags:

question: google fonts, question: layouts

Google Webfonts in S2?
I know a while back there was a lot of fuss about Google web fonts (rightly deserved fuss) and I went crazy using them for all my s1 layout-ed journals. But does anyone know if/how you could use them for a pre-coded s2 layout? I've been poking around with where to put the font element and I can't find something that doesn't break the layout, so I'd appreciate any knowledge/thoughts anyone had on this?

(Post a new comment)

tellthenight
2012-03-06 08:49 am UTC (link)

After you figure out which font you'd like to use, you visit the following link:

http://fonts.googleapis.com/css?family=YOUR+FONT+NAME+HERE

(If your font has spaces, replace them with +.)

There's a code there, and all you have to do is grab it and jam it in the top of your CSS. Then, you can use the font as though it were any other web-safe font. When I figured that out, I was like, “OH MY GOD THIS IS AMAZING”, because it's so easy! I was prepared to fight with it for ages and was very pleasantly surprised. Bit tough to find straight-off, though.

(Reply to this) (Thread)

	trial_test 2012-03-07 04:51 am UTC (link)
	Grabbing it and jamming it into the top of a precoded layout in S2 breaks the code, that is what the poster is stating and they are correct. (Reply to this) (Parent) (Thread)

	tellthenight 2012-03-07 05:20 am UTC (link)
	Oh, really? Weird. I've gotten it to work before... Let me go see if I can figure it out again, then. (Reply to this) (Parent)

surfingbird
2012-03-07 06:10 am UTC (link)

Same person, different journal. Okay, so I've tested it specifically in a layout coded by a user, and then inputting custom styles just to change font on one of the system's preloaded S2 layouts.

To do it in a layout coded by a user, you need to put the code from that site above into the very top of the custom stylesheet box on the custom options page, and then go find the section of CSS where it styles the part of the page where you want the font to appear. Then, you'd just insert the font name as though it were a regular web-safe font, with quotes if it's got a space in it.

To do it in a preloaded system layout, you need to put the code from that site above into the custom stylesheet box, and then, find out what the specific element you want to edit is. (I'd recommend using something like Firebug to specifically inspect the element.) Then, using that element name, put in something like this:

element {
  font-family:"Font Name", georgia, serif;
}

(For the preloaded layout on this journal, I targeted .entry-body to change the entry text. The specific element changes from S2 layout to S2 layout.)

I'm not seeing any layout breakage in Firefox, but if the problem continues, it may be a browser compatibility issue (not all that likely, but not totally impossible) or another problem elsewhere in the code.

(Reply to this) (Parent) (Thread)

	trial_test 2012-03-07 06:28 am UTC (link)
	I use Firefox as well, so that shouldn't be an issue. Okay, if I post the Font URL at the top of the code in the 'CUSTOM STYLESHEET" box, it breaks the code. Trying to get it to work with THIS layout, but my tweak can be found on this journal. (Reply to this) (Parent) (Thread)

	tellthenight 2012-03-07 06:31 am UTC (link)
	Okay, I think maybe I wasn't too clear. What Google font are you trying to use? (Reply to this) (Parent) (Thread)

	trial_test 2012-03-07 06:36 am UTC (link)
	lol. well, I wanted to try out Simonetta to see what it looked like (Reply to this) (Parent) (Thread)

tellthenight
2012-03-07 06:40 am UTC (link)

Okay. So, you take this link:

http://fonts.googleapis.com/css?family=

At the end of it, you add the name of the font you want to use, in this case “Simonetta”. So your link looks like this:

http://fonts.googleapis.com/css?family=Simonetta

.You have to go to this link and grab the code there, which is (in this case) the following:

@font-face {
  font-family: 'Simonetta';
  font-style: normal;
  font-weight: 400;
  src: local('Simonetta'), local('Simonetta-Regular'), url('https://themes.googleusercontent.com/static/fonts/simonetta/v1/pP-YCzhElv5jnwzoOUSUyj8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

To use a different font, use that same link, add your new font at the end, replacing Simonetta, and copy the code from that page.

(Reply to this) (Parent) (Thread)

	trial_test 2012-03-07 06:48 am UTC (link)
	LIGHTBULBGOESOFF Thank you for being so patient. I wasn't copying the right code [DUH]! You are simply fabulous ;-) (Reply to this) (Parent) (Thread)

	tellthenight 2012-03-07 06:51 am UTC (link)
	No worries! I totally get that feeling. When I was floundering around with it the first time, I was totally lost. It took a TONNE of googling before I found it and had my own lightbulb moment. Just glad I could help! (Reply to this) (Parent) (Thread)

	metrocitymods 2012-03-07 01:17 pm UTC (link)
	THANK YOU! You guys are incredible. I saw the first post and tried to get the code for the font I wanted, wound up with a 'not supported' error. Tried it again this morning and it's working and snaaaazzy. Thanks so much, both of you, for making this all make some amount of sense! (Reply to this) (Parent)