Report Blog Entry
If you don't know where to get one, I recommend just grabbing one from Google Fonts. If you hate that website (like I do...) I made a codepen awhile back for my web development practice which converts many of the fonts found on Google Fonts to a more user-friendly experience: You can find that page here. If you want a fancy shmancy stylized font just click the "Stylized" category and take a look at what's available. Once you find a font you like, click it, then in the box "Selected font name" you can erase what's there and type in your own text to see what it'll look like. Easy.
Moving on.
I want to start by sharing my exact code for what I'm currently using on my display name on my page:
<style>
@import url("https://fonts.googleapis.com/css?family=Creepster");
.w-40 h1{
font-family: Creepster;
font-size: 40px;
text-align: center;
background: -webkit-linear-gradient(#000000, #DDDDDD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px black;
}
</style>Which will give you:
This Text Effect
See, nothing too crazy. But lets break it down a bit for those who aren't sure what's going on.
@import url("https://fonts.googleapis.com/css?family=Creepster");This line is what imports the font from Google. Simply replace the url with whatever the url is of your selected font and it'll be imported, but you still need to tell the element to use the font (the syntax is @import url("");. Which brings us to....
.w-40 h1{}This is the element that nests your display name. You can think of this as "everything that falls between the curly brackets will affect only my display name".
font-family: Creepster;Here is the first line that changes the way your display name looks. Here we are updating the font of your name to whatever the font of your choice is. Just make sure it matches the name EXACTLY or it will not work (ex. in your url your font may show as "test-font" but your font name may be "Test Font". Make sure it is the font name as it is). Besides that, you're good to go!
font-size: 40px;
text-align: center;These two lines are for formatting and are totally optional (as is everything else in this blog from this point on...). I like my name centered above my info and a fair bit large than the default size. You can change the
text-align option to right, center, left, or justify (justify attempts to make the text stretch to fit the area but is very hit-or-miss. I would stick with center then adjust the font-size property).background: -webkit-linear-gradient(#000000, #DDDDDD);Now we're getting to the juicy stuff. You need the two lines after this to make the effect work, but I'm splitting it up for readability. I should preface this with one thing:
-webkit functionality could vary between different browsers. This snippet is optimized for chrome and I don't much care to add in the optimizations for older builds of firefox. BUT if you would like to, just google "firefox webkit css" and you should be able to find enough info on your own.Anyway, this line is adding a color gradient to my text. It starts at
#000000 and fades down to #DDDDDD. Of course, you can change this to any two colors you'd like and it will fade them top-to-bottom. If you'd like to add a THIRD color, just slap another comma, another color, and you're good to go (this would make the property:-webkit-linear-gradient(#000000, #DDDDDD, #ABC123);). The webkit properties can get a bit advanced, but I just use them the easy way. No since in complicating things. But, for more learning, you can head here.-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
I'm lumping these two together because they go hand-in-hand. Basically what is happening is the -webkit-background-clip: text; property is cutting the background down to the shape of any text in the element. Your text becomes the only thing visible in the element, however it will be one solid color instead of the gradient like we want. This is where -webkit-text-fill-color: transparent; comes in. It removes the fill color from the text and shows the pretty gradient laying underneath. Neat, right? 3 lines of CSS to make a gradient happen on your text, but it's pretty straight forward.
-webkit-text-stroke: 1px black;The last line we'll be looking at is the stroke property. This will create the outline around the text so it looks strong against any background you choose. You can change the color from black to anything you want, and the stroke size can be increased to any size you want. It's a very easy to read property. Play with it a bit and see what looks best on your page.
And that wraps it up! With this info you should be able to stylize your display name on your profile and make it look a bit better than the default.
Feel free to comment below letting me know you got this working on your page so I can check it out, and if you have any questions please feel free to ask!
Comments
Displaying 10 of 10 comments ( View all | Add Comment )
Live Free or John Hard
im looking for a way to do this but with an image made in something like paint.net (scale the image down to fit, choose then make the background transparent), is there anyway to import with this method? srry if it's confusing the way i've explained it
Actually I know exactly what you're looking to do, in fact I have a tool that can generate the CSS you need to pull that off!
- Head to tommypanzram.neocities.org
- Click "CSS/HTML Page Decorations" at the top
- Drop down "code snippets"
- Look for "display name image"
Just put in the URL for the image you want to use (upload it to a site like imgbb.com and copy the direct link to the image) and click "Generate". Your code will be in the CSS box below it.
by Tommy Panzram; ; Report
Actually I know exactly what you're looking to do, in fact I have a tool that can generate the CSS you need to pull that off!
- Head to tommypanzram.neocities.org
- Click "CSS/HTML Page Decorations" at the top
- Drop down "code snippets"
- Look for "display name image"
Just put in the URL for the image you want to use (upload it to a site like imgbb.com and copy the direct link to the image) and click "Generate". Your code will be in the CSS box below it.
by Tommy Panzram; ; Report
this all works ty, i just also want to know if it's not an issue on how to hide the text version of my name? when i tested it on the thing people use to do so it replaced it just fine but when i did it on my actual profile my text name was still there, unless it's one of the things i've added to my profile that's causing conflicts with it
by Live Free or John Hard; ; Report
Yeah looking on your page you've styled it somewhere in your css that makes it still show up. You'd need to locate that and remove it. Sorry I can't help you there.
by Tommy Panzram; ; Report
it's alr man, i'll probably just keep it this way then, ty for helping me out with this tho
by Live Free or John Hard; ; Report
Silly Fella. Friend me now.
thank you
SPACESANDY
hi! i wanted to add a custom font for my friends names on my profile but its not working. can you help me?
this is the code im using:
@import url("https://pastebin.com/raw/vuvgxBhr");
.profile .friends .person p {font-family: 'Emojifont'}
this is what the link has:
@font-face {
font-family: 'Emojifont';
font-style: normal;
font-weight: normal;
src: url('https://drive.google.com/uc?export=download&id=1q2Mo2gn6V5qegbBkSj6btpwKx1vPxy3g') format('woff2'),
url('https://drive.google.com/uc?export=download&id=1w7qzBwSZ0Xk-W7vwKwWi_Wyuw5OyWHFh') format('woff');
}
both files are public and view-only. is it because its drive? i did all of this with chatgpt's help since i have no idea about this, so it could have errors.
landon
thanx, using w a diff font :D
Kaspurr
This is the first tutorial for me that worked, thank you!
godj ⋆⋆⋆⋆
pleazze grrrr help how to make this with a font from dropbox..................
Sooooo using custom fonts online isn't as straight forward as using them on your PC. The short version is you cannot host a font in dropbox/drive/etc. and be able to use it on a website. It is technically possible to make a custom font work online but it's a good bit of work, could involve converting it to the WOFF2 format, and usually not worth the hassle.
I would recommend just sticking with web fonts you can find from Google Fonts.
Alternatively, you can replace your display name with an image and just make that image a PNG with what you want and give it a transparent background (Photopea.com will be your friend here). I can give you instructions on how to get the code for that easily if you'd like....I'd do this before I'd go down the path of messing with a custom font, tbh.
by Tommy Panzram; ; Report
another person did it luv but their links broke so i figured out how to upload dropbox fonts to CSS: just copy font link and replace with dl.dropbox cant remember exactly yall google iFF YALL HAVE UR OVVN FONTZ suchas y2k frutiger metro and any fontz. have fun DL ANY font out there peace out muah!!
by godj ⋆⋆⋆⋆; ; Report
yuyucoke
OMG THANK YOU SO MUCH !!
Free Bagels
how do I make this work with a font not on google fonts? like a font from dafont or something? I've tried uploading the .ttf file to a website like Catbox and even File Garden and grabbing the link, but that doesn't work either
So that can be a little more complicated - but it is possible to do.
Currently what you're doing is uploading the file to a file hosting site for downloading, this is different than having the file available to be read and used by a website. It's a different protocol.
If you have a font you really want to use you'll need to get it in a .woff or .woff2 format (fontsquirrel has a generator for that), use the font on a website hosting platform like neocities, then you can hotlink that to another website like SpaceHey. Keep in mind that those services (like neocities) can prevent hotlinking to save on their bandwidth if they really wanted to so it's not a 100% guarantee that it'll always work.
Honestly, it'd be a lot easier to find a suitable font that's already hosted somewhere. Doing all that is kind of a pain. fonts.bunny.net is another source I could recommend if you just want more options
by Tommy Panzram; ; Report
florsita la flor feliz
tysmm!! ^_^
Olive Oyl
Thank you!