Carly (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
veryroundbird) wrote2012-01-11 09:29 am
veryroundbird) wrote2012-01-11 09:29 am
Entry tags:
How to use custom fonts on your Dreamwidth layout~!
Perhaps you're a little bored with the standard Georgia, Times New Roman, Arial, or Lucida Grande? Or you'd like to spice up your layout with script fonts other than Brush MT or whatever. Certainly, you can assign whatever fonts you want, and if they're on the user's computer, they'll see that font instead. However, what if they don't have that font?
That's where webfonts come in!
If you have webspace, you can upload your font files to it (just make sure and read the license agreement in case they don't like that) or use a service like Google Webfonts, which has a lot of what you might use anyway. FontSquirrel also has pre-packaged downloads of webfonts and the code you need to use them.
Basically, what you need to do is load the fonts into your stylesheet, and then you can use those fonts in the font-family property of any element like you would normally do.
Generally the code looks something like this:
If you're using something like Google Webfonts, what you do is click on "Quick-use" when you find a font you like. It'll take you to a page with information on how to use it. Scroll down, find the bit that says "add this font to your website", and then don't do what it says. What you're going to do is copy the URL from the href attribute and paste it into your browser. Copy everything inside, but not including the "@media screen" bracket, and paste it into your custom CSS box. You can now use those fonts in your layout!
Questions? Ways I can improve this? Plz to be letting me know in comments.
That's where webfonts come in!
If you have webspace, you can upload your font files to it (just make sure and read the license agreement in case they don't like that) or use a service like Google Webfonts, which has a lot of what you might use anyway. FontSquirrel also has pre-packaged downloads of webfonts and the code you need to use them.
Basically, what you need to do is load the fonts into your stylesheet, and then you can use those fonts in the font-family property of any element like you would normally do.
Generally the code looks something like this:
@font-face {For font variations, such as italics or bold text, you would create another @font-face section, set the font-style or font-weight to what you want to use the font for, and change the sources to the alternate font you want to use. (If that makes sense??? I'm not sure I'm explaining this well, but you can ask questions.)font-family: 'Fredericka the Great';}
font-style: normal;
font-weight: normal;
src: local('Fredericka the Great'), local('FrederickatheGreat'), url('http://themes.googleusercontent.com/static/fonts/frederickathegreat/v2/7Es8Lxoku-e5eOZWpxw18vc3vBAn7YvtW9hNjxWZBR0.woff') format('woff');
If you're using something like Google Webfonts, what you do is click on "Quick-use" when you find a font you like. It'll take you to a page with information on how to use it. Scroll down, find the bit that says "add this font to your website", and then don't do what it says. What you're going to do is copy the URL from the href attribute and paste it into your browser. Copy everything inside, but not including the "@media screen" bracket, and paste it into your custom CSS box. You can now use those fonts in your layout!
Questions? Ways I can improve this? Plz to be letting me know in comments.