Report Blog Entry
chapters:
--------------------------------------------------------------------------------------------
this is part 2 to my layout tutorial where i try to break down CSS in the most simple way i possibly can. in this blog i will be explaining fonts! i will be going over how to import fonts (google fonts & custom fonts), font sizes, colors, and more. ill even be adding an extra thing on how to animate the name text!
i will be going through this tutorial with the assumption that you understand how <(/)style> tags work. if you dont understand it, pt1 has the explanation (its very simple, dont worry). also, i'll be saying this in every intro, all code goes in your about me section unless said otherwise. alright thats about it i can get started.
disclaimer: this is a tutorial for what looks good on pc/laptop/chromebook, idk how well a lot of these would look on phones or tablets or whatever. please take that into consideration as youre reading, thanks :)
--------------------------------------------------------------------------------------------
part 1: importing fonts
importing fonts basically tells the code "this is what the text should look like on the profile." the fonts can help make the theme of your profile look even more cohesive. getting the code for fonts right is crucial for it working; its all very finicky and easy to "break" (at least it is when i mess with it lol).
adding this here to say that ive seen some ppl say that the font import stuff should be the first lines of code on your about me thing? i dont entirely know if thats true but ive never challenged it and kept it at least high up in the code so take that as you will.
anyways theres two different types of text on your profile, the "headings" and "the rest of the text on the profile." the headings are the things like your name, the "about me" text, the "(names) interests" text, etc. the "the rest of the text on the profile" is the rest of the text on the profile.
i will be showing how to import fonts from google fonts first, and then how to import custom fonts. after that, i will be showing the different ways you can customize the fonts.
1a: google fonts
im gonna show the code for everything, then show how to get both google fonts and custom fonts in the next subsection (my profile uses custom fonts so im using my test acc to showcase google fonts). i also color coded them bc it might help visually lol
<style>
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
font-family: 'Luckiest Guy', cursive; }
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poltawski+Nowy&display=swap');
font-family: 'Poltawski Nowy', serif; }
</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: "Luckiest Guy"
}
:root { --mainfont: "Poltawski Nowy" }
</style>
ive seperated the three text things for sake of clarity while im explaining, but they dont have to be seperated. the custom fonts code will not be seperated.
anyways in order to do this you have to go to google fonts and choose a font you like. when you find a font you like, click it and you should be on a page that looks something like this:
scroll down and youll see the different "looks" of the font (the font i chose doesnt have that unfortunately). choose one by selecting "select (font)" on the right of your screen. a popup shouldve popped up. underneath the text "To embed a font, copy the code into the <head> of your html," there are two buttons: <link> and @import. you want to click @import and copy the code, then paste it to your profile.
scrolling slightly down you'll see "CSS rules to specify families." you'll want to copy/paste that as well.
now look at the purple code. you'll see that theres a lot there and it looks complicated. and it is (/hj). i dont understand HOW it works, i just understand that it does. what i do know is that the h# parts are the headings, and you want to use the name of the font at that part (thats why the specify families code is important). put it where i have the red name. same with the everything else font (mainfont), youll want to put the name of it at the blue name.
thats it for google fonts! lets look at how to import custom fonts now (its a bit more intimidating than importing google fonts, but its not that complicated).
2a: custom fonts
for this youll need something to hold files that you can then link. i personally use file.garden, so thats what im gonna use to explain.
first, the code, and then the explanation.
<style>
@font-face {
font-family: "KeeponTruckin";
src: url("https://file.garden/ZCTlbRQZY2RSmYXG/KeeponTruckin.ttf");
}
@font-face {
font-family: "Corben-Regular";
src: url("https://file.garden/ZCTlbRQZY2RSmYXG/Corben-Regular.ttf");
}
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: "KeeponTruckin"
}
:root { --mainfont: "Corben-Regular" }
</style>
first, youll need to download the font. i like using dafont.com, its a great site for looking for fonts to download that google doesnt have. once you find a font you like, on the right you'll see a button that says download. click on that and itll download the .zip file to your device. if you open that .zip file and youll see a .ttf file and a .pdf. the .pdf is just legal stuff, the .ttf is the font itself.
now, make an acc on file garden. once you have that, you should have a screen that looks like this (obviously with empty files if your acc is new):
upload the .ttf file of the font youve downloaded using the orange upload button on the top left-hand corner (you can also do the .zip file if you want).
after you've done that, click the file on the site and a popup on the right appears. copy the file.garden link that it provides, then paste it after the src: url, replacing my link. do the same with the second font on the second line of code.
after youve copied the links and pasted them on the profile, rename the font family section to the name of the file. with file garden, the name of the file is after the spammy looking thing. example:
https://file.garden/ZCTlbRQZY2RSmYXG/KeeponTruckin.ttf
then do the name stuff with the purple section that i explained in the google fonts section and youre done!! can you tell that ive gotten tired writing this lmao im gonna get myself some coffee
part 2: customizing text
now we get to the cool stuff, how to edit the text to make it more fun!! this part is mostly for basic edits + the special animation thing i teased above. i will be editing and adding to this part as i learn more about how to edit the text.
1b: changing font sizes/colors
this part is pretty simple, im gonna go over how to change different properties of the text! this WONT be a tutorial on how to change specific parts of your layout (they get their own separate thing), this is just showing what you CAN do, and how to typically make it work.
this is smth you can expect to see when changing text properties (the real basic of basics):
<style>
.nameofsection {
font-size: 12px;
font-weight: bold;
color: #000000;
font-family: "KeeponTruckin";
}
</style>
these are very self-explanatory but i'll still go over them individually just in case.
font-size: this one changes the size of the text. you can make it giant or itty bitty. you can also use different measurements for the size instead of px (pixels), but i have NO idea how any of them work lmao
font-weight: this changes if the text is bold, italic, underlined, etc. this would change the ENTIRE body of text and not individual lines/words, so use carefully
color: this changes the color of the text. you can use a hex code or the name of a color (i went over this more on my layout tutorial pt1)
font-family: this changes the font that the text uses. for example, if you want a section to have a specific font that no other part of your profile has, you'd use that (you would have to import it using steps above though).
alright now that thats out of the way, we can get to the fun extra part, the animated name text!!
2b: animated name
this is such a cool thing that i needed an entire section just for it. basically it makes the name on your profile move, bounce, fade, etc. its not even that complicated either!!
code then tutorial GO!!!!!!! (its long im sorry)
<style>
.profile h1{
font-size: 40px;
font-family: KeeponTruckin;
font-weight: 550;
background: url(https://img.wattpad.com/690639fa7ea8d798338478692d92aff518e7eb22/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f354c6d766a346533545333716e513d3d2d313031303736373935322e313636363133633964643433643262363931333632353038363433322e676966) ;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: hhaha 2s linear 0s infinite normal forwards;
z-index: 100;
}
@keyframes hhaha {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
100% {
transform: translate(0);
}
}
</style>
first, go onto this site, its a CSS animation maker which basically makes the animations for you. play around with all the different settings and things until you find something you are happy with. dont copy paste it yet, just keep the tab open as you go on to the next step.
next, edit the properties of the text (the font and the weight and stuff) to how you'd like it to look. youll notice that theres a background link and a "webkit" thing. those are for if you want a pic/gif to be the background of the name! what webkit means i dont know but i do know that it makes the pic/gif clip to the text. if you dont want a bg for the name then just remove that part (i dont think it works for normal bodies of text, which is why i didnt include it in 1b).
now that the text is how you want it to look, go back to the animation site and copy the FIRST piece of code, then paste it to your profile. put it within the { } bracket as shown above, then add "z-index: 100;" (for some reason it doesnt come with the copied code and it wont work without it).
and thats it!! thats how to make an animated name for yourself! you can animate tons of things on your profile but thats for a future tutorial.
--------------------------------------------------------------------------------------------
and thats it for fonts!!
i really hope this made sense, fonts pretty much make or break a layout (imo anyways) so im really hoping i explained this right. ill be editing this with more info as i learn more about CSS so feel free to check back every once in a while to see if anything gets added!
next is gonna be the header/nav and the footer. im not exactly great at either so im gonna have to do a shit ton of experimenting in order to make the tutorial worthwilde. if the next one isnt that its gonna be what i call "misc essentials" such as custom cursor, animated pfp, autoplaying music, etc.
anyways thats all press buttons drink water buy gold bye!!!!
Comments
Displaying 11 of 11 comments ( View all | Add Comment )
Polentitaaasada!ඞ
Thanks :D
击 jaime!!
thank you so much this was so incredibly helpful
☆ Matt ☆
you're literally an angel, this helped me so much
V
could you help me? im trying to change the font in a css code made from another template
heres what some off the css looks like (not changed to the font i want)
:
.search-wrapper input[type=text] {
font-family: times;
background-color: white!important;
border: 1px solid black!important;
border-radius: 0px !important;
font-size: 9px;
color: black!important;
and i want to change this font and all the fonts on my profile to this font:
https://fonts.google.com/selection/embed
(the font is called "Reenie Beanie")
any help is greatly appreciated! if it would be possible to maybe msg you the css code of my entire profile so you could help me change the font i would REALLY REALLY appreciate it!
₊˚⊹ komi
goddd i've been trying to get this to work for WEEKS ... this is the only tutorial that got it to work thank u sm ily ily
Ahriadne
Thank you so much!!!! This is very informative I was stuck as to why the fonts weren't working at all until I realized I hadn't told them where to go xD Have a beautiful day!
A1_MOREL
thanks SM, exactly what i needed. This blog is super helpful!
Pacts2003
@Donkey Kong Instructions are very easy to understand. Thank you for this help.
zee ☆
its not working for me :( idk what im doing wrong
what part isnt working?? ill see if theres anything that needs to be fixed :))
by eli!! 𓇉; ; Report
adding the font ! maybe i’m writing the code wrong ?? idk
by zee ☆; ; Report
can you reply with the code youre using so i can take a look?
by eli!! 𓇉; ; Report
Did you ever get this fixed? I'm in the same boat too and I'm struggling lol
by cath; ; Report
yaa i think i used a code from someone else ot a template !!
by zee ☆; ; Report
salem @.@
tysmmm (.❛ ᴗ ❛.) you saved my lfieee
gren
Thank you for your tutorials, they help me so much with the customizations i want to make!
of course!! im so glad theyre helping :D
by eli!! 𓇉; ; Report