Offer: Get $5 for simple CSS help: custom font for topbar

Johannes Genberg Posted in Technical Support 5 years ago

I am so freaking frustrated. I have been trying to change the top bar font to a custom one for months (to one called Biysk.ttf which is uploaded to server root). I just can't figure out how (my CCS skills sucks!), and I'm equally frustrated that when I ask for help most people just say: "figure it out". Yeah... that usually works when someone asks for help.

So I'm offering the first person who can sucessfully guide me through what I need to do $5 (Paypal). I know I need to do something in app/themes/goblue/plugins/default/css/core/default.php, but after that, I need guidance.

Who wants to make $5?

Replies
us Rishi B Replied 5 years ago

nah, ttf isn't at all the standard. using font-face has pretty good support according to this though: https://caniuse.com/#feat=fontface

it looks like woff, svg, and eot are pretty popular font types as well, but i don't really know anything about them. i think you can generate them from your ttf file here: https://www.fontsquirrel.com/tools/webfont-generator

se Johannes Genberg Replied 5 years ago

@Arsalan. Do you mean the whole snippet of code at the end, leaving the original code untouched?

@Bench. I thought ttf was pretty much the standard nowadays?

us Rishi B Replied 5 years ago

check out this stack overflow post, I believe it tells you everything you need to know: https://stackoverflow.com/questions/24990554/how-to-include-a-font-ttf-using-css

you may need to create some more types of fonts from that ttf file you have.

Indonesian Arsalan Shah Replied 5 years ago

You have to put the code i mentioned in end of css file not altering anything else. Even not touching original topbar '.site-name a class'

se Johannes Genberg Replied 5 years ago

Yes. All the changes I made was lowercase and 20px. All other changes have been removed in order to make the site work again.

I also tried http and https. Same result both times.

I can later try to reupload an unaltered version and see if the changes then work.

And thanks for the help. This has been bugging me for months.

Indonesian Arsalan Shah Replied 5 years ago

So this same code didn't work? Did you reverted previous changes you made to topbar? Because it appears buggy. Well this is the right way i believe.

Yes try to put https://nub... Not http://nub... In css src

se Johannes Genberg Replied 5 years ago

Well, I did post the same question here and I didn't get help. One even told me to bugger off.
I know it's wrong as it didn't work. I actually tried afterwards the very way you write here (which is also what all those online CSS tutorials say), but that just makes the site go bonkers after cache is flushed.

Indonesian Arsalan Shah Replied 5 years ago

I not sure its pretty hard to understand whats written here : https://www.w3schools.com/css/css3_fonts.asp

@font-face {
  font-family: myFirstFont;
  src: url("http://nubo.re/Biysk.ttf");
}
.topbar .site-name a {
    font-face: myFirstFont !important;  
}

Further the code you sent us is buggy its not right way to do so , if you just posted your code here someone may come up and help you with actual code. Also the !important tag is before the ; tag not after.

If fonts are correct i hope the above code will work for you! Just move that code in end of your css and flush your cache after saving the file.

Premium Version

Due to the many requests in the past for additonal features and components we have decided to develope a premium version. Features like Hashtags, Videos, Polls, Events, Stories, Link Preview, etc included in it.

$199 (Life Time)
Learn More

Other Questions