I'm using the Omega 3 theme, and Omega's subtheme CSS files load AFTER font.css, so the font settings do not take effect since the fontyourface css classes are overridden.

Need a way to insure that font.css loads last.

Comments

BarisW’s picture

BarisW commented
Status: Active » Postponed (maintainer needs more info)

It should be loaded as (one of the) last stylesheets. We use the 'theme' weight on drupal_add_css().

For example: my HEAD contents looks like this:

  <style type="text/css" media="print">@import url("http://drupal7.localhost/themes/bartik/css/print.css?lttx6s");</style>
  <style type="text/css" media="all">@import url("http://drupal7.localhost/sites/default/files/fontyourface/font.css?lttx6s");
  @import url("http://drupal7.localhost/sites/default/files/fontyourface/fontsquirrel/3Dumb-fontfacekit/stylesheet.css?lttx6s");</style>
  <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Abel:regular&amp;subset=latin" media="all" />

All font definitions are loaded AFTER bartik. Could you be so kind to test the latest dev version and report your generated HEAD HTML code?

zoon_unit’s picture

zoon_unit commented

Looks like the Omega 3.0 theme uses a theme weight that places some of its files AFTER fontyourface. I'm using the latest dev release of fyf, and here's the critical HEAD HTML code. (note that I renamed the site and subtheme)

@import url("http://xxx.com/sites/all/themes/omega/omega/css/omega-forms.css?ltu3qg");
@import url("http://xxx.com/sites/all/themes/omega/omega/css/omega-visuals.css?ltu3qg");
@import url("http://xxx.com/sites/all/themes/omega/alpha/css/alpha-debug.css?ltu3qg");
@import url("http://xxx.com/sites/default/files/fontyourface/font.css?ltu3qg");</style>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Serif:regular|PT+Sans+Narrow:bold&amp;subset=latin" media="all" />
<style type="text/css" media="all">@import url("http://xxx.com/sites/all/themes/omega-subtheme/css/omega-subtheme-reset.css?ltu3qg");
@import url("http://xxx.com/sites/all/themes/omega-subtheme/css/global.css?ltu3qg");</style>
<link type="text/css" rel="stylesheet" href="http://xxx.com/sites/all/themes/omega-subtheme/css/style-library.css?ltu3qg" media="all" />

May I suggest that you add a "weight" option to the UI so that users can adjust the weight in cases like this.

sreynen’s picture

sreynen commented

What is omega-subtheme? I don't see that in the omega project. Is that your own custom theme? How is that CSS being added?

The solution to this likely involves shifting the weight, but I'd like to make sure we understand the problem first. If we do need to shift the weight, I'd like to avoid adding UI cruft if at all possible. Ideally no one would ever need to think about the weight; it should just work. And in most cases, it already does. I'm not clear on why it doesn't here.

BarisW’s picture

BarisW commented
Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)

I assume it's a problem caused by your own sub-theme.
I've tried the Omega base theme and all works:

<style type="text/css" media="all">
@import url("http://drupal7.localhost/sites/all/themes/omega/alpha/css/alpha-reset.css?ltu8ch");
@import url("http://drupal7.localhost/sites/all/themes/omega/alpha/css/alpha-mobile.css?ltu8ch");
@import url("http://drupal7.localhost/sites/all/themes/omega/alpha/css/alpha-alpha.css?ltu8ch");
@import url("http://drupal7.localhost/sites/all/themes/omega/omega/css/formalize.css?ltu8ch");
@import url("http://drupal7.localhost/sites/all/themes/omega/omega/css/omega-text.css?ltu8ch");
@import url("http://drupal7.localhost/sites/all/themes/omega/omega/css/omega-branding.css?ltu8ch");
@import url("http://drupal7.localhost/sites/all/themes/omega/omega/css/omega-menu.css?ltu8ch");
@import url("http://drupal7.localhost/sites/all/themes/omega/omega/css/omega-forms.css?ltu8ch");
@import url("http://drupal7.localhost/sites/all/themes/omega/omega/css/omega-visuals.css?ltu8ch");
@import url("http://drupal7.localhost/sites/all/themes/omega/alpha/css/alpha-debug.css?ltu8ch");
@import url("http://drupal7.localhost/sites/default/files/fontyourface/font.css?ltu8ch");
@import url("http://drupal7.localhost/sites/default/files/fontyourface/local_fonts/Arvo_bold_test-normal-bold/stylesheet.css?ltu8ch");
</style>
zoon_unit’s picture

zoon_unit commented

What is omega-subtheme? I don't see that in the omega project. Is that your own custom theme? How is that CSS being added?

If you go back and look, I stated that I renamed the website and subtheme. "Omega-subtheme" is just a substitute name for my own sub-theme based on Omega's html5 starterkit. Nothing exotic here. Just a straight copy of Omega's starterkit. The CSS is being added through Omega's standard subtheme methods. Again, nothing fancy or custom here. I suspect that Omega is just setting their CSS files to have a weight greater than FYF.

Using Omega's base theme for testing won't tell you anything, because Omega 3.0 is not intended as a functioning theme, only as a base theme. Follow the Omega directions to create a subtheme using their html5 starterkit, and test with that. Another option would be to install Alphorn or Conch, which are both subthemes of Omega 3.0.

sreynen’s picture

sreynen commented
Title: font.css not loading last in CSS queue » Make font.css load last with Omega subtheme
Version: 7.x-2.0-beta1 » 7.x-2.x-dev
Category: bug » feature
Status: Closed (cannot reproduce) » Postponed (maintainer needs more info)

"Omega's html5 starterkit" is more clear than "Omega's subtheme," thanks.

The CSS you listed includes files that are not included in omega-html5, and you didn't answer my question about how the CSS is being added, so I can only guess you added those by copying the CSS reference already in the .info file for global.css. That looks like this:

css[global.css][options][weight] = 10

That seems likely to be the source of the problem. The problem is, I'm still not clear on how that's actually adding CSS, since "css" isn't a defined property of theme .info files. Normally CSS is added via "stylesheets" declarations in .info files.

Themes that load CSS the standard way work fine, so the problem is specific to Omega's non-standard method of adding CSS, which isn't explained in any documentation I could find. If you're not able to explain how Omega adds the CSS, perhaps someone else can. Meanwhile, I'm marking this as postponed, and also a feature request. Working with themes that don't follow Drupal CSS conventions isn't really a broken feature; it's just not a feature at all yet.

zoon_unit’s picture

zoon_unit commented

Sorry to be so confusing with the theme naming, but I'm just protecting the privacy of my client. Here's the significant code that loads the CSS files that appear after font.css:

Content from .info file
========================
; OPTIONAL STYLESHEETS
css[html5-starterkit-reset.css][name] = html5-starterkit reset styles
css[html5-starterkit-reset.css][description] = This file holds all the Reset CSS of html5-starterkit theme.
css[html5-starterkit-reset.css][options][weight] = 9

css[global.css][name] = Your custom global styles
css[global.css][description] = This file holds all the globally active custom CSS of html5-starterkit theme.
css[global.css][options][weight] = 10

; OPTIONAL LIBRARIES
libraries[html5-starterkit-custom][name] = html5-starterkit custom script
libraries[html5-starterkit-custom][description] = Custom script file
libraries[html5-starterkit-custom][js][1][file] = custom.js
libraries[html5-starterkit-custom][js][1][options][weight] = 2

Code from template.php:
========================
function html5-starterkit_preprocess_html(&$vars) { 
  $file = 'style-' . theme_get_setting('theme_color') . '.css';
  drupal_add_css(path_to_theme() . '/css/'. $file, array('group' => CSS_THEME, 'weight' => 115,'browsers' => array(), 'preprocess' => FALSE));
 }

Obviously the weights here are fairly large. (especially in the template.php code!)

I can perhaps reset these weights to a lower value. Omega 3.0 does add a lot of CSS files at different times, due to its "responsive" nature. (loading browser width files on the fly) However, it does look like it's only the subtheme specific files that are misbehaving, so a weight change may be all that's needed.

What weight does font.css use?

Lloyd’s picture

Lloyd commented

Any update on this? I can confirm I'm having the same issue.

zoon_unit’s picture

zoon_unit commented

I did reduce the weights in the above code to below 0, and that seemed to fix the problem with fontyourface.

However, I am noticing that some CSS in the subtheme is falling above the original omega-alpha CSS in the cascade. I suspect this may be because of the lower weights, so proceed with caution.

Dale Baldwin’s picture

Dale Baldwin commented

I am having a similar issue except it's only happening with IE8, does anyone know of a work around?

cellar door’s picture

cellar door commented

My recommendation in using FYF with Omega is to not load the css from FYF but rather do it in your Omega subtheme's css files by using the "add selector in theme CSS" option. This allows you to have full control over it in your omega css files and not run into potential issues down the road when you try to update things.

Also it allows you to change fonts for different screen sizes :) Kinda fun to do at times

Dale Baldwin’s picture

Dale Baldwin commented

Cellar Door I tried it and it works fine in webkit browsers, FF and IE9 but still breaks in IE8.

cellar door’s picture

cellar door commented

Make sure you put it either in your global.css, default.css, or normal.css as those are the only ones that load in IE8 (and IE7). If you have it in the narrow or wide it will not load. This is because the narrow/wide are held in media queries that IE8 cannot read and thus don't import the stylesheet.

Dale Baldwin’s picture

Dale Baldwin commented

Tried that and it hasn't worked at all, It think when the css is cached that it breaks it again.

cellar door’s picture

cellar door commented

Dale - Hop onto the IRC #drupal-omega if you get a chance and I can help you more there. I'm not sure why the caching would cause anything to break, other than it is being overwritten by another styling that is taking precedence. In which case you need to find out where it's located and either remove it, override it with the exact naming in your stylesheet or use !important. I've used the selector many times w/ no issues in Omega yet.

The other thing to look into (as I'm not a FYF guy) is if IE8 works with FYF. It may or it may not, but if it's a css aggregation thing you should be able to get around it with the global/default/normal stylesheets as those are at the top of the stack on any omega site in IE8 (other than the grids).

sreynen’s picture

sreynen commented
Status: Postponed (maintainer needs more info) » Closed (won't fix)

This is turning into a general discussion thread, so I'm closing it. As far as I can tell, some Omega subthemes over-ride the CSS from @font-your-face and you can solve this problem by adjusting the weight on your theme CSS or removing the conflicting CSS entirely or using more specific selectors. The only thing I see we could do about this in the module is increasing the CSS weight there, but that would just turn into a weight race and not really solve the problem.

minneapolisdan’s picture

minneapolisdan commented

I always set the weight of my global.css to "0", or else any IE-specific stylesheets I create will get rendered before my global.css.

To get the font I want, I just call it via global.css. For example, h1 { font-family: customfont, san-serif;}

Then I don't need to use the selectors that Font Your Face offers in the Admin. Although, if I do not have the font specified in my global.css, then it will work to set the font within the Admin.

minneapolisdan’s picture

minneapolisdan commented

I always set the weight of my global.css to "0", or else any IE-specific stylesheets I create will get rendered before my global.css.

To get the font I want, I just call it via global.css. For example, h1 { font-family: customfont, san-serif;}

Then I don't need to use the selectors that Font Your Face offers in the Admin. Although, if I do not have the font specified in my global.css, then it will work to set the font within the Admin.

Odawayi’s picture

Odawayi commented
Issue summary: View changes

Hi,
Any update on this? I can confirm I'm having the same issue the d8w3css theme...