The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Fonts not working with unoptimized CSS

View previous topic View next topic Go down

Solved Fonts not working with unoptimized CSS

Post by Derp-chan on June 15th 2015, 2:55 am

To get a keyframe animation working, I set the "Optimize CSS" option to No, but along with that the font I set for my username doesn't seem to be working anymore either.

Link:
http://rmadmins.forumotion.com/


Last edited by Derp-chan on June 19th 2015, 11:40 am; edited 1 time in total

Derp-chan
Forumember

Female Posts : 27
Reputation : 1
Language : English

http://forumthingwhatever.forumotion.com/

Back to top Go down

Solved Re: Fonts not working with unoptimized CSS

Post by Sir. Mayo on June 15th 2015, 6:22 pm

Hello,

A few things

Can you show us where you found the tutorial for the key frame animation,
can you paste your css style sheet
can you also paste any scripts you have.

be sure to use the code button its next the the quote button.

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Fonts not working with unoptimized CSS

Post by Derp-chan on June 15th 2015, 8:50 pm

I couldn't find the original code so I got a different one from here (the first 2 parts)
No scripts right now
Full CSS
Code:
@font-face {
  font-family: 'Righteous';
  font-style: normal;
  font-weight: 400;
  src: local('Righteous'), local('Righteous-Regular'), url(http://fonts.gstatic.com/s/righteous/v5/w5P-SI7QJQSDqB3GziL8XT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

a[href="/u2"]{
  font-family: 'Righteous'
  font-size: "134%"
}

#wrap {
width : 985px;
border : 1px solid #004b72;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
}

body{
background-image:url('http://i62.servimg.com/u/f62/14/52/34/74/bg10.jpg'); !important;
}

.introduction, .panel, .post {
background-color: #f8fbff;
border: 1px solid ;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-color: #ccc;
}

blockquote, blockquote blockquote, blockquote blockquote blockquote {
border-color: #9fd1ff;
background-color: #f9f9f9;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

#text_editor_textarea{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 7px;
background-color:#d0e5ff;
border: 1px solid #808080;}

#page-header #search-box {
display: none;
}

li.row:hover dd {
border-left-color: #A1A3A3;
}

li.row {
  border-top: 1px solid #A1A3A3;
  border-bottom: 0px solid #81A3C4;
  }

.row dl dd.dterm {
border-left: none;
}

ul#picture_legend {
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('http://i63.servimg.com/u/f63/14/63/83/43/legend10.png');
  text-align: CENTER;
  padding: 24px 0;
  }

.icon-home{
background: url('http://i63.servimg.com/u/f63/14/63/83/43/icon_h10.gif') no-repeat left;
padding-left: 15px;}


.forabg {
  border: 1px solid #8a8a8a;
  padding: 0px 5px;
-moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -khtml-border-radius: 0px;
    border-radius: 0px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}


.forumbg {
  background-color: #;
  background-repeat: repeat-x;
  background-position: 0 0;
  border: 1px solid #8a8a8a;
  padding: 0px 5px;
  margin-bottom: 4px;
  clear: both;
-moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -khtml-border-radius: 0px;
    border-radius: 0px;
    -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
 }

.navbar ul {
border : none;
}

.forabg .corners-top , .forabg .corners-bottom {
display:none;
}

.forumbg .corners-top, .forumbg .corners-bottom {display:none;}

a.mainmenu:hover img {
opacity : .5;
-khtml-opacity : 0.5;
-moz-opacity : 0.5;
filter : alpha(opacity=50);
opacity : 0.5;
}

#page-header .navbar {
background-image: url("http://i62.servimg.com/u/f62/14/52/65/41/bg310.png");
padding:0px 10px;
}

.postprofile {
color: #666666;
border-left-color: #CCC;
}

p em b a.gensmall { font-style: normal; }
p em { font-style: normal;
}

.postbody .content {
  font-size: 1.4em;
}

.content {
color: #333333;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
}

li.row:hover {
background: url(http://i62.servimg.com/u/f62/14/52/65/41/mc10.png) 100% 100% repeat;
background-position: right;
background-repeat: no-repeat;
background-color: #F0F9FF;}

.copyright a {
color: #333 !important;
}

#page-footer .navbar{
padding-bottom: 15px;
background: url(http://i63.servimg.com/u/f63/14/73/12/96/maki10.png) no-repeat bottom right !important;}

.LGlike {
  background: #5D69C9;
  padding: 3px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-shadow: -1px 0.5px #999;
  box-shadow: 1px 1px 1px #999;
  cursor: pointer;
  margin-right: 4px;
 }
 .LGvote { margin: 0 5px; }
 .LGnovote {
  filter:Alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
  text-shadow: none;
 }
 .LGvote { margin: 0 5px; }
 .LGnovote {
  filter:Alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
  text-shadow: none;
 }

.keyframe {
  -webkit-animation: keyframe infinite; /* Safari 4+ */
  -moz-animation:    keyframe 5s infinite; /* Fx 5+ */
  -o-animation:      keyframe 5s infinite; /* Opera 12+ */
  animation:        keyframe 5s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes keyframe {
  0%  { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes keyframe {
  0%  { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes keyframe {
  0%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes keyframe {
  0%  { opacity: 0; }
  100% { opacity: 1; }
}

Derp-chan
Forumember

Female Posts : 27
Reputation : 1
Language : English

http://forumthingwhatever.forumotion.com/

Back to top Go down

Solved Re: Fonts not working with unoptimized CSS

Post by Sir. Mayo on June 16th 2015, 6:06 pm

try this in your css:
Code:
@import url(http://fonts.googleapis.com/css?family=Righteous);


a[href="/u2"]{
  font-family: 'Righteous'
  font-size: "134%"
}

#wrap {
width : 985px;
border : 1px solid #004b72;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
}

body{
background-image:url('http://i62.servimg.com/u/f62/14/52/34/74/bg10.jpg'); !important;
}

.introduction, .panel, .post {
background-color: #f8fbff;
border: 1px solid ;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-color: #ccc;
}

blockquote, blockquote blockquote, blockquote blockquote blockquote {
border-color: #9fd1ff;
background-color: #f9f9f9;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

#text_editor_textarea{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 7px;
background-color:#d0e5ff;
border: 1px solid #808080;}

#page-header #search-box {
display: none;
}

li.row:hover dd {
border-left-color: #A1A3A3;
}

li.row {
  border-top: 1px solid #A1A3A3;
  border-bottom: 0px solid #81A3C4;
  }

.row dl dd.dterm {
border-left: none;
}

ul#picture_legend {
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('http://i63.servimg.com/u/f63/14/63/83/43/legend10.png');
  text-align: CENTER;
  padding: 24px 0;
  }

.icon-home{
background: url('http://i63.servimg.com/u/f63/14/63/83/43/icon_h10.gif') no-repeat left;
padding-left: 15px;}


.forabg {
  border: 1px solid #8a8a8a;
  padding: 0px 5px;
-moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -khtml-border-radius: 0px;
    border-radius: 0px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}


.forumbg {
  background-color: #;
  background-repeat: repeat-x;
  background-position: 0 0;
  border: 1px solid #8a8a8a;
  padding: 0px 5px;
  margin-bottom: 4px;
  clear: both;
-moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -khtml-border-radius: 0px;
    border-radius: 0px;
    -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
 }

.navbar ul {
border : none;
}

.forabg .corners-top , .forabg .corners-bottom {
display:none;
}

.forumbg .corners-top, .forumbg .corners-bottom {display:none;}

a.mainmenu:hover img {
opacity : .5;
-khtml-opacity : 0.5;
-moz-opacity : 0.5;
filter : alpha(opacity=50);
opacity : 0.5;
}

#page-header .navbar {
background-image: url("http://i62.servimg.com/u/f62/14/52/65/41/bg310.png");
padding:0px 10px;
}

.postprofile {
color: #666666;
border-left-color: #CCC;
}

p em b a.gensmall { font-style: normal; }
p em { font-style: normal;
}

.postbody .content {
  font-size: 1.4em;
}

.content {
color: #333333;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
}

li.row:hover {
background: url(http://i62.servimg.com/u/f62/14/52/65/41/mc10.png) 100% 100% repeat;
background-position: right;
background-repeat: no-repeat;
background-color: #F0F9FF;}

.copyright a {
color: #333 !important;
}

#page-footer .navbar{
padding-bottom: 15px;
background: url(http://i63.servimg.com/u/f63/14/73/12/96/maki10.png) no-repeat bottom right !important;}

.LGlike {
  background: #5D69C9;
  padding: 3px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-shadow: -1px 0.5px #999;
  box-shadow: 1px 1px 1px #999;
  cursor: pointer;
  margin-right: 4px;
 }
 .LGvote { margin: 0 5px; }
 .LGnovote {
  filter:Alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
  text-shadow: none;
 }
 .LGvote { margin: 0 5px; }
 .LGnovote {
  filter:Alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
  text-shadow: none;
 }

.keyframe {
  -webkit-animation: keyframe infinite; /* Safari 4+ */
  -moz-animation:    keyframe 5s infinite; /* Fx 5+ */
  -o-animation:      keyframe 5s infinite; /* Opera 12+ */
  animation:        keyframe 5s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes keyframe {
  0%  { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes keyframe {
  0%  { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes keyframe {
  0%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes keyframe {
  0%  { opacity: 0; }
  100% { opacity: 1; }
}

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Fonts not working with unoptimized CSS

Post by Derp-chan on June 16th 2015, 9:27 pm

Still doesn't show up.
Hope there's a way, but if not I can deal without the keyframe stuff

Derp-chan
Forumember

Female Posts : 27
Reputation : 1
Language : English

http://forumthingwhatever.forumotion.com/

Back to top Go down

Solved Re: Fonts not working with unoptimized CSS

Post by Sir. Mayo on June 16th 2015, 10:14 pm

can you screen shot what your trying to change and draw a box around it, that way i can get a better idea.

Also add this script to you javascript, page
Place it into all pages.
Code:
WebFontConfig = {
  google: { families: [ 'Righteous::latin' ] }
 };
 (function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
 })();

Then try your original CSS

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Fonts not working with unoptimized CSS

Post by Derp-chan on June 17th 2015, 6:26 am

Still nothing scratch

To be a bit more helpful, here's a screenshot/better explanation (name underlined):
With optimized CSS, the font is applied normally to my name like so -
Spoiler:

Keyframe animations only work with unoptimized CSS. Unoptimizing it allows the animation to work, but changes my name to the default font for some reason.
Spoiler:

I don't change anything in the CSS when I select the Unoptimize option, so not sure why it wouldn't work.

Derp-chan
Forumember

Female Posts : 27
Reputation : 1
Language : English

http://forumthingwhatever.forumotion.com/

Back to top Go down

Solved Re: Fonts not working with unoptimized CSS

Post by Sir. Mayo on June 17th 2015, 3:37 pm

Could you provide a test account, and are the codes still active so i can inspect your forum?

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Fonts not working with unoptimized CSS

Post by Derp-chan on June 19th 2015, 11:40 am

Oh, I figured it out... adding "cursive" after the font name fixed it.
The font size won't work, but that's no big deal cause I can fix it with Javascript Got the size working too

Thank you again for all the help! This is solved.

Derp-chan
Forumember

Female Posts : 27
Reputation : 1
Language : English

http://forumthingwhatever.forumotion.com/

Back to top Go down

Solved Re: Fonts not working with unoptimized CSS

Post by SLGray on June 19th 2015, 7:57 pm

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum