how to add fancy font support to your theme

cultural-deleonism:

ranty-ramblestein:

cultural-deleonism:

hey y’all here’s a quick tut on how to get that new fancy cursive font to display on your all’s blogs because otherwise it just looks like normal text!

(this is the font i’m talking about btw)

okay so go into your theme customize page (it’s the palette icon in the top-right corner on desktop), click “edit html”, and paste this in directly under <style type="text/css">:

@font-face {
     font-family: fairwater;
     src: url('https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff2?v=b7ab7a58cded3365889a447bfd9e9c45');
}
.npf_quirky {
     font-family: fairwater, serif;
     font-size: 14pt;
}

to quickly explain what that does:

the @font-face bit imports the font from tumblr’s servers to your blog, because the vast majority of computers don’t have it natively installed and so if you didn’t do that it would just show up as a standard serif font like times new roman or some shit (whatever’s default for your browser).

the .npf_quirky bit is what actually changes the font in paragraphs/whatever that have class="npf_quirky" tacked onto them (as in <p class="npf_quirky"></p>). i also set the size to larger than my theme’s usual because it’s kind of a tiny font.

anyways i hope this is helpful and have fun!

I am so confused…

My theme doesn’t have a ‘<style type=“text/css”>‘, but it has 4 instances of ‘<style type=“text/css” media=“screen”>’

Anyway, this is why is im crap at coding.

sorry about that, those are basically the same thing. put it after the first one, and if that doesn’t work, move it to the second, and so on and so forth

Thanks! It works now!

how to add fancy font support to your theme

cultural-deleonism:

hey y’all here’s a quick tut on how to get that new fancy cursive font to display on your all’s blogs because otherwise it just looks like normal text!

(this is the font i’m talking about btw)

okay so go into your theme customize page (it’s the palette icon in the top-right corner on desktop), click “edit html”, and paste this in directly under <style type="text/css">:

@font-face {
     font-family: fairwater;
     src: url('https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff2?v=b7ab7a58cded3365889a447bfd9e9c45');
}
.npf_quirky {
     font-family: fairwater, serif;
     font-size: 14pt;
}

to quickly explain what that does:

the @font-face bit imports the font from tumblr’s servers to your blog, because the vast majority of computers don’t have it natively installed and so if you didn’t do that it would just show up as a standard serif font like times new roman or some shit (whatever’s default for your browser).

the .npf_quirky bit is what actually changes the font in paragraphs/whatever that have class="npf_quirky" tacked onto them (as in <p class="npf_quirky"></p>). i also set the size to larger than my theme’s usual because it’s kind of a tiny font.

anyways i hope this is helpful and have fun!

I am so confused…

My theme doesn’t have a ‘<style type=“text/css”>‘, but it has 4 instances of ‘<style type=“text/css” media=“screen”>’

Anyway, this is why is im crap at coding.

how do you make that cursive/italic font?👀

dazzlingkai:

after writing whatever you want to post in cursive, set your text editor to html (the wheel in your top right corner). add the following code in front of your text <p class=“npf_quirky”> if you click to preview the text, it doesn’t show up. but once you publish it, it’ll turn cursive (or just to be safe, you can save the post as a draft and look at it afterward to see if it worked).

here’s an example:

<p class="npf_quirky"> your text here </p>