Log in

No account? Create an account
18 October 2013 @ 12:11 pm
Embedding Fonts into LiveJournal  
Account Status: All
Actions: Making your font viewable to everyone
Theme: All

Questions: Can you tell that the font for my subject and for my sidebar titles isn't the typical font?
Can you tell this is written in a different font?
How did I accomplish this?

Answer: Google Fonts. Firefox has a tough time with fonts but Google Fonts provides you with a very easy way to embed a font and make your journal your own.

See How
1. Go to Google Fonts and find the font you'd like to use.

2. Below you can see I entered Dancing into the search to find the Dancing Script I was looking for which is the one used above. So when you find the font you want to use click the "Quick-Use" button.

3. This is the page you are shown, just so we know we are in the right place.

You will then scroll down until you see this set up. Here I have the actual link highlighted which is what we want out of this page. We don't actually need any of the coding they are showing us, just the highlighted url.

4. You will take your highlighted url and put this into your browser. It should take you to a white page that will have coding that looks similar to the below coding. Copy this coding. Sometimes you get this whole bit of coding so when you paste it into your address bar just delete the stuff you don't need and hit enter.

5. Got to the Custom CSS section of the customize section for your Journal. You can really insert this font coding anywhere but I'm adding it to the end to make it easy to find in the future. Pay attention to this coding because it is going to tell you the name of your "font-family" to use in the next step. Here mine says font-family: 'Dancing Script';.

6. So let's pretend we are changing the font of your Journal Subject. Find the .subject in your coding. Once you find it you will see that you have a line that is already the "font-family". The font you want to use should be in the quotes " ". So here we would replace Delius Swash Caps with Dancing Script as our font coding says. The reason there are more fonts listed, which are typically default fonts, is just in case a browser won't recognize the coding. You can then adjust the font-size to how large or small you want.

7. Now the way I made the question at the top use the Dancing Script font is that since it is saved in our journal customization coding we can use it in our journal. This is the coding you would use to do that.

This will make your text appear with the font you want but remember to add the Google coding to your journal layout coding before trying to use it.This will not work in your profile because the journal customizations are coding for you actual journal and not your profile.

Questions? Comments.
星の雫: KuroKisekirameki_mei on October 18th, 2013 10:09 pm (UTC)
Thank you so much for the tip and for the tutorial! ♥
Jill aka Josireesanwar on October 18th, 2013 10:53 pm (UTC)
You are welcome.
Judith Bartholomew: Thinkingjoyfulljunebugg on October 19th, 2013 02:36 am (UTC)
Awesome THANK YOU! There's a lot of custom layouts around here where all you need is a little tweaking to make them unique for your blog or community. This is a great help!
Jill aka Josireesanwar on October 21st, 2013 11:30 pm (UTC)
You are welcome.
DLetter_Q: adletter_q on October 19th, 2013 11:33 am (UTC)
This seriously works on all browsers? Awesome!
Thanks for sharing <3
Jill aka Jo: Outlander: Standing Stonessireesanwar on October 21st, 2013 11:35 pm (UTC)
So I'm told. I've tried it in a few. The only one it didn't seem to work on was my Kindles browser but I'm not surprised.
nanceemiss_nancee on March 4th, 2014 12:08 am (UTC)
Wow. Thank you for this!
Jill aka Josireesanwar on March 5th, 2014 06:10 am (UTC)
You are very welcome.
liznaomi: DW ; what do Timelords believe in?liznaomi on June 24th, 2014 03:34 am (UTC)
This is clever - thanks! May I ask where you got the .woff format link? All Google Fonts will give me is this type of link: http://fonts.googleapis.com/css?family=BenchNine , etc.
liznaomi: DW ; what do Timelords believe in?liznaomi on June 24th, 2014 03:37 am (UTC)
Nevermind... I just answered my own question. Apparently going to the short link gives you that code. Ha. Thanks anyway :)
Jill aka Josireesanwar on June 24th, 2014 08:40 pm (UTC)
Yes, it took me a bit to figure that out myself.
sunflowers84sunflowers84 on July 17th, 2014 03:57 pm (UTC)
Where is the short link?
Jill aka Josireesanwar on July 17th, 2014 08:37 pm (UTC)
So the images above show you but basically at Google Fonts if you click on a font they give you this page and some of their coding has the short link in it....
View this: http://i77.photobucket.com/albums/j49/SireesAnwar/Layouts/Capture4.png

If you put that shortlink into the browser you get the coding you can add to your Custom CSS section you can use that font.
sunflowers84sunflowers84 on July 18th, 2014 01:20 am (UTC)
Thank you so much for the reply I figured it out before I had to go into work today. I felt accomplished took me a while tho! Thanks again!
Jill aka Jo: Sherlock: SHsireesanwar on July 18th, 2014 10:47 pm (UTC)
It's always good to learn something new and to start using it all over the place. LOL
sunflowers84sunflowers84 on July 19th, 2014 04:14 am (UTC)
Oh, yes! that is what I am doing right now or have been! Still finishing up my layout odds and ends :)!
narleennarleen on July 31st, 2016 03:12 pm (UTC)
latin extended

first of all, this webiste is totally amazing :)

But I have some trouble with the fonts. I'm trying to use the layout Oasis, and the font "Montserrat" that you used doesn't have some characters that I need (I'm Hungarian :D).

So I went on Google Fonts and I found a font that was latin-extended, for example, this: https://fonts.googleapis.com/css?family=Raleway
What should I copy from this?
Every time I tried it went back to the default font, like arial...

Thanks for your help in advance :)
narleennarleen on July 31st, 2016 06:48 pm (UTC)
Re: latin extended
Oh, wow. Typical pushy Google :P

I was using Chrome, and it gace me the .woff2 wersion. After researching if you use Firefox (or Explorel even) you get the .woff. And for some reason that works perfectly.
Jill aka Josireesanwar on August 10th, 2016 06:38 pm (UTC)
Re: latin extended
So you're good? You figured it out?
narleennarleen on August 10th, 2016 06:51 pm (UTC)
Re: latin extended
Yes, it's all good, thank you! :)
Chibadesuchibadesu on March 12th, 2018 07:00 pm (UTC)
I use the (79. TRANSPARENTING) layout for my lj. I tried to embebed the fonts coded already existing here like Delius Swash 'Paprika';'Dancing and added to of my personal taste 'Pacifico' following this tutorial.
The thing is when I use the html code or copy paste form the google docs the whole text, the body changes the font. I mean, if I go directly to the post appears dancing font when I see the post form the homepage it appears pacifico font. I tried with the text here "Can you tell this is written in a different font?", and becomes clear the font in the homepage is one an the post itself has another.
Did I do something wrong? If you want to take a look I made a post with the same text to prove my point.
I have another issue, its connected with the fonts: LJ put more space between the sentences when I select dancing font. And it changes to serif script in the post but mantain the space (tiny text and huge space)
Thanks in adavance!
Jill aka Josireesanwar on March 14th, 2018 05:38 pm (UTC)
Re: fonts
I am not completely sure where your issue is but I did notice your post on your LJ. The one that says Dancing after it doesn't actually appear to have the coding for "Dancing Script" in at least one example and the other try putting single quotes around it:

font-family: 'Dancing Script';

Typically the title of it has to be exactly what google calls it and usually you need those single quote around it.

As for the spacing. If it is in a post make sure there aren't extra paragraph.

You can control entry text in the "entry" coding of your layout.

You might want to change from:

.entry {
padding: 10px 20px 10px 20px;
margin-bottom: 10px;
color: #000000;
font-family: "trebuchet ms", arial, sans-serif, "Pacifico", cursive;
font-size: 13px;
text-align: left;

to this

.entry {}

.entry_text {
padding: 10px 20px 10px 20px;
margin-bottom: 10px;
color: #000000;
font-family: "trebuchet ms", arial, sans-serif, "Pacifico", cursive;
font-size: 13px;
line-height: 100%;
text-align: left;

You can control the font, font-size and if you want your entry text lines spaced out more you can up the line-height from 100% to 110%. I like mine at 130%.

Does that help?