Report Blog Entry
HOW TO GET CUSTOM FONTS
Note: this is the most complicated code, and looks very intimidating. I promise it's not.
main font: the font that makes up the majority of your profile: the interests section, blog previews, "contact" box, etc.
header font: the font that makes up the "blurbs", "contacting x", "friends", and "comments" sections. (on my blog, the typewriter-looking text)
your name font: the font for your profile's name/title. (on my blog, cat_dragged_in).
code for the main text:
- go to https://fonts.google.com/ and find the font you want. click it.
- click on "get font".
- click on "get embed code".
- select @import.
- the first box is "embed code in the <head> of your html." copy this code.
- paste it into the "about me" section. you'll have this:
----
<style>
@import url('https://(lots of letters and numbers)');
</style>
----
Add the bolded portion:
----
<style>
@import url('https://yourfontchoice');
font-family: 'The Name of Your Main Text Font', system-ui; }
</style>
code for the header font:
delete the "main text" font from your "basket" before copying the second font's code.
repeat steps 1-6 for the main text code. add the bolded portion below.
you should have this:
----
<style>
@import url('https://yoursecondfontchoice');
font-family: 'The Name of Your Headers Font', system-ui; }
</style>
to make the main font and header font work, plug your font names into this code:
----
<style>
a:hover, a:active, a, p, nav label, .section {
font-family: var(--mainfont) !important;
}
h2, h3, h4, h5, DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B {
font-family: "The Name of Your Headers Font"
}
:root { --mainfont: "The Name of Your Main Text Font" }
</style>
code for your name font:
go to google fonts, pick your font.
click on "get font".
Delete all other fonts from your "basket", hit @import, copy the code. You'll have this:
----
<style>
@import url('https://yourfontchoice);
</style>
----
Add the bolded portion.
----
<style>
@import url('https://your font choice');
.w-40 h1{
font-family:
font-size:
text-align:
background:
-webkit-background-clip: text;
-webkit-text-fill-color: ;
}
</style>
----
Input your choices.
----
<style>
@import url('https://your font choice');
.w-40 h1{
font-family: The Name of Your Font (make it EXACTLY match the name in the URL);
font-size: how big you want it to be, in px (mine's 35px);
text-align: pick either left, right, center, or justify (mine's justify);
background:
-webkit-background-clip: text;
-webkit-text-fill-color: HEX Code for the Color You Want;
}
</style>
Overall, your code should look something like this (my code, for example):
----
<style>
@import url('https://fonts.googleapis.com/css2?family=Stylish&display=swap');
font-family: 'Stylish', system-ui; }
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
font-family: 'Special Elite', system-ui; }
</style>
<style>
a:hover, a:active, a, p, nav label, .section {
font-family: var(--mainfont) !important;
}
h2, h3, h4, h5, DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B {
font-family: "Special Elite"
}
:root { --mainfont: "Stylish" }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap");
.w-40 h1{
font-family: Henny Penny;
font-size: 35px;
text-align: justify;
background:
-webkit-background-clip: text;
-webkit-text-fill-color: #374FD1;
}
</style>
Congratulations! You've added custom fonts to your profile. :)
Comments
Displaying 0 of 0 comments ( View all | Add Comment )