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

Johannes Genberg Replied 5 years ago

This made it finally work! I finally got the correct font showing. I just copied it as is:

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

Where should I send the $5?

Arsalan Shah Replied 5 years ago

Yes correct it should be https

Michael Zülsdorff Replied 5 years ago

Yeah, but as I wrote,
it has to be src: url("https://nubo.re/Biysk.ttf");

or simply src: url("//nubo.re/Biysk.ttf");

Arsalan Shah Replied 5 years ago

@Zetman yes indeed, perhaps i missed that when i only added font.tff inthe the code he sent to me , it should be like:

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

updated. : Included https

Michael Zülsdorff Replied 5 years ago

font-face is no allowed css class property, it has to be font-family

(having a look into your site's code it's actually marked with a yellow danger symbol in the firefox dev console)

Besides all that: Since your site is running over https, you have to load the font file via https, too.

You'll also find that warning in the dev console, it's always worth to have a look into these messages.

Rishi B Replied 5 years ago

have you looked at the example from cufonfonts.com? https://www.cufonfonts.com/download/font/biysk has example css + html that works properly for me.

the css looks like this:

/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
font-family: 'Biysk Regular';
font-style: normal;
font-weight: normal;
src: local('Biysk Regular'), url('Biysk.woff') format('woff');
}


@font-face {
font-family: 'Biysk Bold';
font-style: normal;
font-weight: normal;
src: local('Biysk Bold'), url('Biysk-Bold.woff') format('woff');
}

and the html is:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css"
          href="style.css"/>
</head>

<body>

<h1>Generated from: http://www.cufonfonts.com</h1><br/>
<h1 style="font-family:'Biysk Regular';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
<h1 style="font-family:'Biysk Bold';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>


</body>
</html>

seems to work fine for me locally, for both Biysk Regular and Biysk Bold.

Johannes Genberg Replied 5 years ago

Here is the font in question in case you want to take a look at it yourself. It's a free font.

https://drive.google.com/file/d/1sL19yIXJIEGR0SojXJu-3z--7j5uIq_G/view?usp=sharing

Johannes Genberg Replied 5 years ago

OK, I reuploaded the default.php file and just added this to the bottom (except the first part that's there to show the end of the original file):

    }

.menu-section-item-groups:before {
    content: "\f07b" !important
}

@font-face {
    font-family: 'biyskregular';
    src: url('http://nubo.re/biysk-webfont.woff2') format('woff2'),
         url('http://nubo.re/biysk-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.topbar .site-name a {
    font-face: biyskregular !important;  
}

And this:

    }

.menu-section-item-groups:before {
    content: "\f07b" !important
}

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

None of them work after flushing cache. They don't scramble up the site, but they don't do anything either. I've also tried a couple of variations of the code, but the results are the same. I'm also using the latest Firefox so it shouldn't be that.

Arsalan Shah Replied 5 years ago

See : https://www.cufonfonts.com/font/biysk

Johannes Genberg Replied 5 years ago

@Banch.

Then I'll try that too. Thanks!

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.