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:
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 5 of 5 comments ( View all | Add Comment )
just me ⋆⋆⋆⋆
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 just me ⋆⋆⋆⋆; ; Report
yuyucoke
OMG THANK YOU SO MUCH !!
stanley
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!