Google Fonts

Technical Details

Forum version : #PunBB
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Screenshot of problem : https://i.imgur.com/JXR18s8.png https://i.imgur.com/P9O8Qe9.png https://i.imgur.com/vV1Lzn9.png
Who the problem concerns : All members
When the problem appeared : When I first tried to get google fonts to work through the over all header of the page.
Forum link : http://oppntestsite.forumotion.com/

Description of problem

Alright, so I'm working on this skin for a different site, but I'm using a test site before I transfer over, I have imported the skin that the other site had, and worked with the same version and everything else. Through bumpy ties and other things I've manged pretty good for far, however I've run into an issue of not being able to get google fonts to work, when I do it in a post format it works, but going through the over-all header in the templates section of the admin panel didn't, nor did java script, now these other codes are also older, which I expected half way to not work. But my biggest and main concern here is that going through that header isn't working. And I'm stumped, I've tried going through other issues similar, trying just about everything and gotten no where. Does anyone know whats going on???

Please read:  https://help.forumotion.com/t136233-changing-fonts#918817

That doesn't work, like I said I've tried everything, I have 6 different fonts that I want to utilize, for different parts of the forum.

1) I tried using the regular

Code:

<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">


In the over all header of the templates, this did not work.

2) I tried installing through javascript, this also did not work.

3) I tried doing it the font face way, and it didn't work.

I now have tried your wild card, and that hasn't worked. I'm at my wits end here, is there any way to get these fonts to work???

Please post what you added to the CSS stylesheet.

Code:

.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }
.profile_field_list li { display:inline-block }
input#message.post{
color: #FFF !important;
background:#000;
}

.sceditor-container iframe, .sceditor-container textarea {
    color:  #ffffff!important;
}
.pun .main .main-content p.message {
   margin: 1.7em;
   padding: 1em;
   background-color: #918E8E;
   border: 1px solid #474746;
   }

.postmain blockquote {
background-color: #3E3738;
border: 1px solid #474746;
}

blockquote cite {
   display: block;
   margin: -8px -8px 8px -8px;
   padding: 3px;
   background-image: url("https://i.imgur.com/wlNu2Tw.png?3");
   background-repeat: no-repeat;
   background-position: top right;
   font-style: normal;
   font-size: 11px;
   background-color: #726264;
   color: #fff;
   }

.user-info {
   color: #fff !important;
   line-height: 1.8em;
   }

#fa_chat_container {
  background:#FFF;
  border:1px solid #556682;
  border-radius:3px;
  position:fixed;
  right:3px;
  z-index:999;
  overflow:hidden;
  min-width:500px;
  min-height:250px;
  transition:300ms;
}
 
#fa_chat {
  border:none;
  width:100%;
  height:100%;
}
 
#fa_chat_button {
  color:#FFF;
  line-height:30px;
  margin-left:10px;
  padding:0 5px;
  cursor:pointer;
}
 
#fa_chat_button.fa_chat_active {
  color:#333;
  background:#FFF;
}

.fa_avatar img {
  width:30px;
  height:30px;
  margin-right:5px;
  margin-bottom:-6px;
  -webkit-border-radius:50px;
    -moz-border-radius:50px;
          border-radius:50px;
}

.main .main-head, .main .main-foot {
   padding: 0.7em 1.3em;
   font-weight: normal;
     font-family: Unica One;
   color: #dedfdf;
   background-color: #383838;
   }

@font-face {
  font-family: 'Unica One';
  font-style: normal;
  font-weight: 400;
  src: local('Unica One'), local('Unica One'), url(http://files.jcink.net/uploads/onepieceonline/UnicaOne_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Stint Ultra Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Stint Ultra Condensed'), local('Stint Ultra Condensed'), url(http://files.jcink.net/uploads/onepieceonline/StintUltraCondensed_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Iceland';
  font-style: normal;
  font-weight: 400;
  src: local('Iceland'), local('Iceland'), url(http://files.jcink.net/uploads/onepieceonline/Iceland_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Libre Barcode 128 Text';
  font-style: normal;
  font-weight: 400;
  src: local('Libre Barcode 128 Text'), local('Libre Barcode 128 Text'), url(http://files.jcink.net/uploads/onepieceonline/LibreBarcode128Text_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Gruppo';
  font-style: normal;
  font-weight: 400;
  src: local('Gruppo'), local('Gruppo'), url(http://files.jcink.net/uploads/onepieceonline/Gruppo_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Flamenco';
  font-style: normal;
  font-weight: 400;
  src: local('Flamenco'), local('Flamenco'), url(http://files.jcink.net/uploads/onepieceonline/Flamenco_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  src: local('Cairo'), local('Cairo'), url(http://files.jcink.net/uploads/onepieceonline/Cairo_Regular.ttf) format('ttf');
}

Thats the whole css, these fonts are google fonts, their in the ttf format, not the woff; with that I don't need these in the css, they can be anywhere, I just need them to work.

Could you please just post the parts where you added the fonts?

Code:


.main .main-head, .main .main-foot {
   padding: 0.7em 1.3em;
   font-weight: normal;
     font-family: Unica One;
   color: #dedfdf;
   background-color: #383838;
   }

@font-face {
  font-family: 'Unica One';
  font-style: normal;
  font-weight: 400;
  src: local('Unica One'), local('Unica One'), url(http://files.jcink.net/uploads/onepieceonline/UnicaOne_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Stint Ultra Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Stint Ultra Condensed'), local('Stint Ultra Condensed'), url(http://files.jcink.net/uploads/onepieceonline/StintUltraCondensed_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Iceland';
  font-style: normal;
  font-weight: 400;
  src: local('Iceland'), local('Iceland'), url(http://files.jcink.net/uploads/onepieceonline/Iceland_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Libre Barcode 128 Text';
  font-style: normal;
  font-weight: 400;
  src: local('Libre Barcode 128 Text'), local('Libre Barcode 128 Text'), url(http://files.jcink.net/uploads/onepieceonline/LibreBarcode128Text_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Gruppo';
  font-style: normal;
  font-weight: 400;
  src: local('Gruppo'), local('Gruppo'), url(http://files.jcink.net/uploads/onepieceonline/Gruppo_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Flamenco';
  font-style: normal;
  font-weight: 400;
  src: local('Flamenco'), local('Flamenco'), url(http://files.jcink.net/uploads/onepieceonline/Flamenco_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  src: local('Cairo'), local('Cairo'), url(http://files.jcink.net/uploads/onepieceonline/Cairo_Regular.ttf) format('ttf');
}

This is the first attempt to get it to work,

If there is a space in the name, you have to use quotes around it.

Code:

'Unica One'

Also the font-face part should be first.  I mean at the top of the stylesheet.

Code:

.main .main-head, .main .main-foot {
  padding: 0.7em 1.3em;
  font-weight: normal;
    font-family: 'Unica One';
  color: #dedfdf;
  background-color: #383838;
  }

I've done this, and placed the font face at the very top of the css, but it still isn't working.

Wait a minute!  Your profile says phpBB 2, but your forum is punBB.

I stated the form I was working on was a Punbb, as newfoundstories is an old forum, that died a while ago.

OPPN is a forum for a friend that I'm making a skin for. The site you see is the test site, which belongs to me.

Are you sure that you have the correct CSS selectors for punBB?

I'm pretty sure, I got them off of the basic css, as well as I can make the font bigger, just not change the type.





However, I only want the widget titles to be effected for this, but I want to change the over-all form font, the widget title fonts, the category fonts, and the fonts for the form titles

Code:

.pun h2, .pun h3

Font still isn't showing.

Add it and then clear your browser's history and cache.

Nothing changed =(

Post your CSS again, please.

Code:

@font-face {
  font-family: 'Unica One';
  font-style: normal;
  font-weight: 400;
  src: local('Unica One'), local('Unica One'), url(http://files.jcink.net/uploads/onepieceonline/UnicaOne_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Stint Ultra Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Stint Ultra Condensed'), local('Stint Ultra Condensed'), url(http://files.jcink.net/uploads/onepieceonline/StintUltraCondensed_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Iceland';
  font-style: normal;
  font-weight: 400;
  src: local('Iceland'), local('Iceland'), url(http://files.jcink.net/uploads/onepieceonline/Iceland_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Libre Barcode 128 Text';
  font-style: normal;
  font-weight: 400;
  src: local('Libre Barcode 128 Text'), local('Libre Barcode 128 Text'), url(http://files.jcink.net/uploads/onepieceonline/LibreBarcode128Text_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Gruppo';
  font-style: normal;
  font-weight: 400;
  src: local('Gruppo'), local('Gruppo'), url(http://files.jcink.net/uploads/onepieceonline/Gruppo_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Flamenco';
  font-style: normal;
  font-weight: 400;
  src: local('Flamenco'), local('Flamenco'), url(http://files.jcink.net/uploads/onepieceonline/Flamenco_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  src: local('Cairo'), local('Cairo'), url(http://files.jcink.net/uploads/onepieceonline/Cairo_Regular.ttf) format('ttf');
}

.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }
.profile_field_list li { display:inline-block }
input#message.post{
color: #FFF !important;
background:#000;
}

.sceditor-container iframe, .sceditor-container textarea {
    color:  #ffffff!important;
}
.pun .main .main-content p.message {
   margin: 1.7em;
   padding: 1em;
   background-color: #918E8E;
   border: 1px solid #474746;
   }

.postmain blockquote {
background-color: #3E3738;
border: 1px solid #474746;
}

blockquote cite {
   display: block;
   margin: -8px -8px 8px -8px;
   padding: 3px;
   background-image: url("https://i.imgur.com/wlNu2Tw.png?3");
   background-repeat: no-repeat;
   background-position: top right;
   font-style: normal;
   font-size: 11px;
   background-color: #726264;
   color: #fff;
   }

.user-info {
   color: #fff !important;
   line-height: 1.8em;
   }

#fa_chat_container {
  background:#FFF;
  border:1px solid #556682;
  border-radius:3px;
  position:fixed;
  right:3px;
  z-index:999;
  overflow:hidden;
  min-width:500px;
  min-height:250px;
  transition:300ms;
}
 
#fa_chat {
  border:none;
  width:100%;
  height:100%;
}
 
#fa_chat_button {
  color:#FFF;
  line-height:30px;
  margin-left:10px;
  padding:0 5px;
  cursor:pointer;
}
 
#fa_chat_button.fa_chat_active {
  color:#333;
  background:#FFF;
}

.fa_avatar img {
  width:30px;
  height:30px;
  margin-right:5px;
  margin-bottom:-6px;
  -webkit-border-radius:50px;
    -moz-border-radius:50px;
          border-radius:50px;
}

.pun h2, .pun h3 {
  font-weight: normal;
    font-family: 'Unica One';
  color: #dedfdf;
  font-size: 15px;
  }

.main-head {
    font-weight: normal;
    font-family: 'Unica One';
  color: #dedfdf;
  font-size: 20px;
}


Theres all of it, and heres the stuff just about the fonts

Code:

@font-face {
  font-family: 'Unica One';
  font-style: normal;
  font-weight: 400;
  src: local('Unica One'), local('Unica One'), url(http://files.jcink.net/uploads/onepieceonline/UnicaOne_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Stint Ultra Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Stint Ultra Condensed'), local('Stint Ultra Condensed'), url(http://files.jcink.net/uploads/onepieceonline/StintUltraCondensed_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Iceland';
  font-style: normal;
  font-weight: 400;
  src: local('Iceland'), local('Iceland'), url(http://files.jcink.net/uploads/onepieceonline/Iceland_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Libre Barcode 128 Text';
  font-style: normal;
  font-weight: 400;
  src: local('Libre Barcode 128 Text'), local('Libre Barcode 128 Text'), url(http://files.jcink.net/uploads/onepieceonline/LibreBarcode128Text_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Gruppo';
  font-style: normal;
  font-weight: 400;
  src: local('Gruppo'), local('Gruppo'), url(http://files.jcink.net/uploads/onepieceonline/Gruppo_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Flamenco';
  font-style: normal;
  font-weight: 400;
  src: local('Flamenco'), local('Flamenco'), url(http://files.jcink.net/uploads/onepieceonline/Flamenco_Regular.ttf) format('ttf');
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  src: local('Cairo'), local('Cairo'), url(http://files.jcink.net/uploads/onepieceonline/Cairo_Regular.ttf) format('ttf');
}

.pun h2, .pun h3 {
  font-weight: normal;
    font-family: 'Unica One';
  color: #dedfdf;
  font-size: 15px;
  }

.main-head {
    font-weight: normal;
    font-family: 'Unica One';
  color: #dedfdf;
  font-size: 20px;
}


when adding your font's tray adding it like this

Code:

font-family: 'Unica One' !important;

I ran a test on your test forum and used that on all parts and it has changed what you have asked for

So i've done that,

Code:

.pun h2, .pun h3 {
  font-weight: normal;
font-family: 'Unica One' !important;
  color: #dedfdf;
  font-size: 15px;
  }

.main-head {
    font-weight: normal;
font-family: 'Unica One' !important;
  color: #dedfdf;
  font-size: 20px;
}


But it still isn't working... >w<;; I don't know what I'm doing wrong.

Scratch that! I got it to work, it appears that the over all header is finally taking the google fonts. Now its a matter of the codes for punBB, as I'm still unable to get the fonts to go in the proper places. Is there a list of them somewhere so I can get the proper codes for the categories and what not?

NewFoundStories wrote:So i've done that,

Code:

.pun h2, .pun h3 {
  font-weight: normal;
font-family: 'Unica One' !important;
  color: #dedfdf;
  font-size: 15px;
  }

.main-head {
    font-weight: normal;
font-family: 'Unica One' !important;
  color: #dedfdf;
  font-size: 20px;
}


But it still isn't working... >w<;; I don't know what I'm doing wrong.

just a hunch on this but in your main ACP >> Display tab >> Pictures and Colors > > Colors >> what do you have here ?

APE wrote:

NewFoundStories wrote:So i've done that,

Code:

.pun h2, .pun h3 {
  font-weight: normal;
font-family: 'Unica One' !important;
  color: #dedfdf;
  font-size: 15px;
  }

.main-head {
    font-weight: normal;
font-family: 'Unica One' !important;
  color: #dedfdf;
  font-size: 20px;
}


But it still isn't working... >w<;; I don't know what I'm doing wrong.

just a hunch on this but in your main ACP >> Display tab >> Pictures and Colors > > Colors >> what do you have here ?

Their just the regular fonts that were plugged in before I started touching anything, I know if you put them there, they won't work unless their installed into the computer.

NewFoundStories wrote:Scratch that! I got it to work, it appears that the over all header is finally taking the google fonts. Now its a matter of the codes for punBB, as I'm still unable to get the fonts to go in the proper places. Is there a list of them somewhere so I can get the proper codes for the categories and what not?

However, I did manage to get it to work, when I first tried to plug in the fonts through the over all header, I threw them all into one link, which caused something to not work, so I did them all separate, and it ended up working. (I'm use to Jcink, and we're able to do that on there... I didn't think of anything until now! I apologize for this!!) However, I'm wondering now if there is a list of the css div variables so I can continue to change the fonts, as I want certain fonts certain sizes, and others different fonts but a lot of them clash in together???

Hover your cursor over an area you want to change and right click on it.  Then select inspect element.  This will open your browser's console.

Hmm, alrighty.

Thank you both for the help ^_^

This has be solved!

Problem solved & topic archived. Please read our forum rules: ESF General Rules

Please remember when you say this is solved please click on the mark as solved button found at the top of your thread's

Thank you

APE