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.
Can you tell this is written in a different font?
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.
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.
Can you tell this is written in a different font?
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.