How to use custom fonts on your LiveJournal
I will try to explain what I do, why and how in this tutorial. If you don't really care why or just want it working quick, see the "tldr" version at the bottom.
In css3 there's a "rule" that's called '@font-face' which allows you to use a custom font without tampering with the HTML-code. This is perfect for LJ-users, since we don't have access to said code. So without much fluff I'm going to explain how it's done. Something that's very positive about this is that there's no need to upload or download anything to your webserver.
How to use Google fonts (or most other free fonts as well)
1) Go to Google Webfonts and find a few nice looking fonts that suite your needs.
In this tutorial/example I will just use one font. "Lato", so what I'm going to do is search for it.
Now I can either choose "Quick Use" or "Add to collection" depending on what my intents are.
"Add to collection" is what want if you'd like more than one custom font in your layout.
I chose "Quick Use", since I'm only using one font in this tutorial.
2) Now I will see a list of the font and what "styles" that are available, Lato is such a good font for paragraphs that I most likely only want the normal and bold styles. I actually may want more, like the italic style and so on. But for the sake of simplicity I'm going to only select these two.
3) Close to the bottom you'll see "Add this code to your website", you'll also see "Standard", "@import" and "Javascript". Normally you'll just use the '@import'-code and you'll be fine. But that could cause problems for LJ if you were able to just import code like that, so they've disabled the @import-rule.
But there's a workaround, and that's called "@font-face". In the box named "Add this code to your website" you'll see a link, in this example you'll see this:
< link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css' >
4) What you want to do now is to simply copy the "http://"-part and paste it in your browser. So in this example I'll copy "http://fonts.googleapis.com/css?family=Lato:400,700" and go to that url. (Paste it in your browsers adress bar press enter as you would with just about any website you'd want to visit.)
5) When I enter that url I'll see a page which has this text on it:
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
6) Now I have to copy these lines and place them in my custom css on livejournal. A good practice is to place them at the top, since browsers render pages from top to bottom.
7) All that's left to is declare when and where to use it. So if I want it as default paragraph text on my posts in my flexible squares layout, I'll just add:
.entry_text
{
font-family: 'Lato', sans-serif;
}
This means that the browser will show the text in this div as 'Lato' and if it for some reason can't show that font (this is mostly when considering the more "standard" fonts, as some aren't available on both mac and PC, then it's good to have a fallback like this) it will instead show a standard sans-serif-font.
This is my first tutorial on LJ, I hope you enjoyed it and please let me know what I could improve on!
TLDR-version
1) Google Webfonts. Find a suitable font.
2) Under "Add this code to your website" chose the http:// and copypaste it in your browsers adress bar.
3) If you see "@font-face{ [lots of code] }" copy the all text into the top of your custom style section on your LJ.
4) Declare "font-family: '[name]', sans-serif;" (or '..., serif,' or '..., cursive,' etc) where you want it.
In css3 there's a "rule" that's called '@font-face' which allows you to use a custom font without tampering with the HTML-code. This is perfect for LJ-users, since we don't have access to said code. So without much fluff I'm going to explain how it's done. Something that's very positive about this is that there's no need to upload or download anything to your webserver.
How to use Google fonts (or most other free fonts as well)
1) Go to Google Webfonts and find a few nice looking fonts that suite your needs.
In this tutorial/example I will just use one font. "Lato", so what I'm going to do is search for it.
Now I can either choose "Quick Use" or "Add to collection" depending on what my intents are.
"Add to collection" is what want if you'd like more than one custom font in your layout.
I chose "Quick Use", since I'm only using one font in this tutorial.
2) Now I will see a list of the font and what "styles" that are available, Lato is such a good font for paragraphs that I most likely only want the normal and bold styles. I actually may want more, like the italic style and so on. But for the sake of simplicity I'm going to only select these two.
3) Close to the bottom you'll see "Add this code to your website", you'll also see "Standard", "@import" and "Javascript". Normally you'll just use the '@import'-code and you'll be fine. But that could cause problems for LJ if you were able to just import code like that, so they've disabled the @import-rule.
But there's a workaround, and that's called "@font-face". In the box named "Add this code to your website" you'll see a link, in this example you'll see this:
< link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css' >
4) What you want to do now is to simply copy the "http://"-part and paste it in your browser. So in this example I'll copy "http://fonts.googleapis.com/css?family=Lato:400,700" and go to that url. (Paste it in your browsers adress bar press enter as you would with just about any website you'd want to visit.)
5) When I enter that url I'll see a page which has this text on it:
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
6) Now I have to copy these lines and place them in my custom css on livejournal. A good practice is to place them at the top, since browsers render pages from top to bottom.
7) All that's left to is declare when and where to use it. So if I want it as default paragraph text on my posts in my flexible squares layout, I'll just add:
.entry_text
{
font-family: 'Lato', sans-serif;
}
This means that the browser will show the text in this div as 'Lato' and if it for some reason can't show that font (this is mostly when considering the more "standard" fonts, as some aren't available on both mac and PC, then it's good to have a fallback like this) it will instead show a standard sans-serif-font.
This is my first tutorial on LJ, I hope you enjoyed it and please let me know what I could improve on!
TLDR-version
1) Google Webfonts. Find a suitable font.
2) Under "Add this code to your website" chose the http:// and copypaste it in your browsers adress bar.
3) If you see "@font-face{ [lots of code] }" copy the all text into the top of your custom style section on your LJ.
4) Declare "font-family: '[name]', sans-serif;" (or '..., serif,' or '..., cursive,' etc) where you want it.