Help > Layout & Coding Help > Post Reply     

Custom Fonts

Player Avatar
уαмαѕαωкι
July 31st, 2019 7:20:17am
3,555 Posts

Hi guys!


I've been working on my coding and w3 schools is failing me, perhaps cause I don't understand the html logic. I need some help with adding a custom font! I have the @font family tag and a url but I think what my problem is, is that I don't know how to do the url part! 


Does anyone use custom fonts and can tell me how to go about doing that? Thanks so much! 


xoxo




dogs-cats.gif

 


View Comments 1


Default Avatar
fandango ⛰ soft music drains the oxygen from this room
August 1st, 2019 4:05:03pm
27 Posts

You need to use @import and then specify the font-family later on in the CSS for the element you want to use.

So if you wanted to use Roboto in your H2 header, you'd need something like this:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

h2 {

font-family: 'Roboto', sans-serif;

}

Hope that helps.




tenor.gif
You seem so out of context in this gaudy apartment complex, a stranger with a door key explaining that I'm just visiting, and I am finally seeing why I was the one worth leaving.

 

Player Avatar
vida 🌷
August 1st, 2019 4:16:22pm
4,408 Posts

This is pretty much exactly what fandango just said, but:

 

If you go to google fonts, https://fonts.google.com, if you click the "plus" (forums doesn't let me use the symbol) sign next to the font you want, in the bottom righthand corner a window will show up (it's minimized) and it will show you what to copy and paste as well.  This was the easiest route for me (copying and pasting).

 

If you want to combine more than one font, you can (just click more "plus" signs and it will show you how you can integrate however many fonts you wnat or need :)




 

Player Avatar
уαмαѕαωкι
August 1st, 2019 8:25:48pm
3,555 Posts

Oh okay, that's one route I see, but I had a font I downloaded from a different website at some point that I like, and wanted to use it but it's only on my computer I guess. Is there a way to make that a web font or is it easier to just use google?




dogs-cats.gif

 

Player Avatar
Master Administrator Samantha - see page to know who to contact directly!
August 1st, 2019 10:44:14pm
4,333 Posts

I think you have to have a server to upload them on if they're not already being offered as a web font (plus you will likely run into issues with the font license unless you paid to buy the font if you do this). Like the cursive font we use for our logo, we bought the license for, and then uploaded it onto our server. But I think in most cases when you see fonts in people's layouts they are google fonts.




 

Player Avatar
уαмαѕαωкι
August 2nd, 2019 12:31:22am
3,555 Posts

Ah okay, that makes sense. I didn't even think about licensing! I didn't buy it so that won't work. Thanks, now off to find one I like!




dogs-cats.gif

 

Player Avatar
Jaya • Support Astraeus, Eos & Aja!
August 2nd, 2019 2:02:29am
28,407 Posts

The fonts on your layout right now look pretty, Yama!




PksILXD.png

 

Player Avatar
уαмαѕαωкι
August 2nd, 2019 2:20:02am
3,555 Posts

Thank you Jaya! Those are ones I found after reading these responses :D 

If you can't tell there's a certain aesthetic I'm going for lol!




dogs-cats.gif

 

Player Avatar
Fantasy GSD (Main) 🎀 Courage is being scared to death but saddling up anyways🤠
June 12th, 2024 11:29:43pm
361 Posts

Hi, i am new to coding and trying to figure my way thru it using W3schools and the layout generator, but was wondering where i put the code mention above to change the font on my layout?




T87ZXoY.jpg

I used to think the worst thing in life was to end up all alone. It's not. The worst thing in life is to end up with people who make you feel all alone. Robin Williams

 

Player Avatar
↬ JADE 🖤 shake those stars from your hair, pretty moonchild
June 12th, 2024 11:52:30pm
3,850 Posts

At the top of your CSS coding. Let me know if you continue to have any trouble!




z0dfAZ.gif

 

Player Avatar
Fantasy GSD (Main) 🎀 Courage is being scared to death but saddling up anyways🤠
January 16th, 2025 12:06:47am
361 Posts

is there a list of fonts that we can use on HP that we don't have to download or use addtional coding for?  i am trying to do a different font for the Dog Stylesheet Generator, (example of what i have currently: https://horsephenomena.com/dogs.php?id=184786


 




T87ZXoY.jpg

I used to think the worst thing in life was to end up all alone. It's not. The worst thing in life is to end up with people who make you feel all alone. Robin Williams

 

View Comments 1