paperforest: touhou project (0)
Mori ([personal profile] paperforest) wrote in [personal profile] dancinpenguins 2016-02-04 12:44 pm (UTC)

USING CUSTOM FONTS

Since I figured some people would want this/be curious on how to do this! Plurk hates the @import code that would make this way simpler, so you instead you have to use a slightly more tedious method, though it's still pretty simple.

First, we will be sourcing our fonts from Google Fonts, so go over there and take a gander. After you've chosen a custom font, go to https://fonts.googleapis.com/css?family=[fontname], replacing [fontname] with...well, the name of the font you want to use. For example, I want to use the Lato font, so I will put https://fonts.googleapis.com/css?family=Lato in my address bar.

You should see something like this:

@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
}


C/P that code! If there is any other line after the src line (like unicode-range or something) feel free to delete it or the font might not show up properly. I recommend pasting it at the top of your code, for easy reference and to ensure that it will play nicely with the rest of your code.

After you have c/p'ed the @font-face code you can use your new font to change the font on your plurk or elements of it as you would normally! For example:

body { font-family: 'Lato';} will change it so that the default font used for your plurk is the Lato font.

If you're interested in learning the more nitty-gritty bits about using @font-face this post goes into it, including stuff like web browser compatibility.

Post a comment in response:

This account has disabled anonymous posting.
If you don't have an account you can create one now.
HTML doesn't work in the subject.
More info about formatting