Strange CSS Issue affecting Fonts on PC but not on MAC

j4yj4y

Hey there! So I'm currently trying to migrate from some inline CSS to create scrolls around some of my pages into a few classes that I can then use to mark up the page. While the scroll work CSS seems to work fine, it breaks the font I have defined in the class on Chrome/PC. On IE/PC, Firefox/PC, Chrome/Mac, Safari/Mac it looks great. I would just mark it up to weird browser incompatibility but the font I picked makes some pretty lavish capital letters. As such, I had to make some places where grammatically, a capital would be appropriate, using a lowercase to make it look right. If you strip the font away, it makes the page look like it's written by a three year old.

While I could stick with the in-line [div]/CSS, I fear I'm gonna run into problems in the future when I choose to change something.

Here is the code in question:

In my CSS Page:

/*SCROLL WORK BACKGROUND*/

.scrolltop {width:730px;font-family:IM Fell English;font-size:14pt;line-height:normal;background-image:url('http://cdn.obsidianportal.com/assets/221772/bg_large.jpg');}
.scrollmid {width:730px;font-family:IM Fell English;height:39px;background-image:url('http://cdn.obsidianportal.com/assets/221774/top_large.png');}
.scrollbody {width:650px;font-family:IM Fell English;padding:20px 40px 20px 40px;}
.scrollbottom {width:730px;font-family:IM Fell English;height:39px;background-image:url('http://cdn.obsidianportal.com/assets/221773/bottom_large.png');}

On a page using the classes (With Angle Brackets Switched to Square Brackets so that you can see the code):

[div class="scrolltop"]
[div class="scrollmid"][/div]
[div class="scrollbody"]

Content of the Page

[/div]
[div class="scrollbottom"][/div]
[/div]

You can see this live here:

http://www.obsidianportal.com/campaigns/feywin

Any help would be greatly appreciated! =D

wolfhound

Just checking, does it still do this if 'IM Fell English' is in single quotes?

j4yj4y

Seems like it:

Here's the new code:

/*SCROLL WORK BACKGROUND*/

.scrolltop {width:730px;font-family:'IM Fell English';font-size:14pt;line-height:normal;background-image:url('http://cdn.obsidianportal.com/assets/221772/bg_large.jpg');}
.scrollmid {width:730px;font-family:'IM Fell English';height:39px;background-image:url('http://cdn.obsidianportal.com/assets/221774/top_large.png');}
.scrollbody {width:650px;font-family:'IM Fell English';padding:20px 40px 20px 40px;}
.scrollbottom {width:730px;font-family:'IM Fell English';height:39px;background-image:url('http://cdn.obsidianportal.com/assets/221773/bottom_large.png');}

Belrathius

It seems peculiar that a Google Web Font would only get messed up in the PC version of Google Chrome - most likely their starting test platform.

j4yj4y

I totally agree. I'd hate to switch the font since I really like the characteristic it adds to my campaign but I'm interested if I load up a new one and use that if I see a similar behavior. Will probably test more on this today.

robertkety

Just wanted to toss in a conversation-adjacent comment here.
I'm really disappointed in the implementation of additional fonts. I'm not sure if this is an OP-thing or CSS-thing (it doesn't appear to be browser-based or related to the font hosting service). Customizing a font-family causes a temporary display issue on the entire page that is very apparent on slower networks. I had to switch to a universal font to avoid this effect and I'm really bummed because Morpheus (the font, not the Matrix character) is perfect for my main campaign. I'd prefer that it display no font until my custom font loaded instead of a default font.

j4yj4y

./sign robert's request. I've noticed that as well. Once the font is cached it seems to be fine but yeah, I see the switch often.