Google Fonts
3 posters
Page 1 of 1
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???Re: Google Fonts
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Google Fonts
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
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???
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???
Re: Google Fonts
Please post what you added to the CSS stylesheet.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Google Fonts
- 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.
Re: Google Fonts
Could you please just post the parts where you added the fonts?
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Google 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,
Re: Google Fonts
If there is a space in the name, you have to use quotes around it.
- Code:
'Unica One'
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Google Fonts
Also the font-face part should be first. I mean at the top of the stylesheet.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Google 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;
}
I've done this, and placed the font face at the very top of the css, but it still isn't working.
Re: Google Fonts
Wait a minute! Your profile says phpBB 2, but your forum is punBB.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Google Fonts
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.
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.
Re: Google Fonts
Are you sure that you have the correct CSS selectors for punBB?
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Google Fonts
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
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
Re: Google Fonts
- Code:
.pun h2, .pun h3
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Google Fonts
Add it and then clear your browser's history and cache.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Google Fonts
Post your CSS again, please.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Google 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');
}
.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;
}
Re: Google Fonts
when adding your font's tray adding it like this
I ran a test on your test forum and used that on all parts and it has changed what you have asked for
- 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
Re: Google Fonts
So i've done that,
But it still isn't working... >w<;; I don't know what I'm doing wrong.
- 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.
Re: Google Fonts
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?
Re: Google Fonts
just a hunch on this but in your main ACP >> Display tab >> Pictures and Colors > > Colors >> what do you have here ?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.
Re: Google Fonts
APE wrote:just a hunch on this but in your main ACP >> Display tab >> Pictures and Colors > > Colors >> what do you have here ?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.
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???
Re: Google Fonts
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.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Google Fonts
Problem solved & topic archived.
|
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
Similar topics
» Google Web Fonts
» Google fonts
» Adding Google Web Fonts to your Forumotion forum
» How does one add new fonts in addition to their old fonts?
» How to remove "free forum" from the google search and change the description google gives
» Google fonts
» Adding Google Web Fonts to your Forumotion forum
» How does one add new fonts in addition to their old fonts?
» How to remove "free forum" from the google search and change the description google gives
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum