Question / Help @font-face not working in CLR browser on Mac, but works on PC

[Korlian]

Hi (This might actually be a bug, but I filed is under question/help since I'm unsure)

Anyone else experienced this and know how to fix this? I use @font-face in my overlay that goes through the CLR browser. The overlay works just fine online as a webpage, it also works just fine in CLR on Windows, however it doesn't work when using OBS 0.8.3 in OS X. I'm no webdesigner, I only know enough html/css to do some minor stuff so hopefully this has an obvious solution to someone here. I tried converting the font into other formats (.ttf and .woff) without that changing anything. I also tried installing the fonts locally on my computer, still didn't work. Here is the strange thing; It works if I try using a standard font like Arial, those are not using the @font-face thing though.

PS: There is no difference running the site locally or pulling it from my online server either.

@font-face {
font-family: 'MyFontL';
src: url('../fonts/MyFont-Light.otf');
}

.test { font: 1em/1.5em 'MyFontL'; }

 

[Simes]

Does it work if you retrieve it using an https url rather than http?

 

[Korlian]

Does it work if you retrieve it using an https url rather than http?

No

 

[Simes]

Worth a try, I had some problems with background-images in CSS which were resolved when I retrieved them over https.

 

[dodgepong]

Small pet peeve: The Mac browser source is just called "Browser Source"; it does not rely on the CLR.

 

[Korlian]

Small pet peeve: The Mac browser source is just called "Browser Source"; it does not rely on the CLR.

Oh, so it's not CLR? I downloaded and installed the CLR browser, maybe that didn't work and I've messed up something there. Going to try to download it again and see what happen.

 

[dodgepong]

This is the OBS Multiplatform browser plugin: https://obsproject.com/forum/resources/browser-plugin.115/

CLR isn't a brand name or a company name. The CLR is the Common Language Runtime, which is a program that runs .NET programs. The CLR Browser Plugin is a browser plugin that was written in C# (a .NET langauge) and interfaces with OBS via the CLR Host plugin (a plugin that allows people to make OBS plugins with .NET languages). So the CLR Browser plugin is a Browser plugin that runs on the CLR.

The OBS Multiplatform Browser Source does not run on the CLR, so it's just called Browser Source. Both plugins were made by the same person.

 

[Korlian]

Oh I gotcha, I think. I have the correct plugin installed then, and you were simply trying to say I was calling it by the wrong name? I do assume that @font-face is supposed to work in this Browser Source though?

 

[Osiris]

Does the url you are pointing to actually exist? Because it works just fine on the windows version of this plugin.

 

[Korlian]

Yes the url loads just fine except for @font-face not working. In other words; Everything loads, text, images everything, except @font-face not using the custom font as it does online in any browser and as it does in the windows version of obs with the clr browser plugin.

I'm scratching my head really hard on this one.

 

[Korlian]

I've tried converting my fonts to every possible filetype I could think of without any luck, those are .eot, .svg, .ttf, .woff, .woff2 and .otf

As this and all my previous attempts all works in every browser out there I guess there is something specific about this Browser Source that I don't know about. Pulling in a font via the google font directory works in Browser Source and they use the same file types as I do. I'm also using the same CSS as google font does, so what makes their fonts work in Browser Source and not mine is beyond me. Maybe there is some extra code somewhere that I'm unaware of on the google side.

I guess I should point this thread towards the plugin author at this point. Thanks for all the replies so far.

 

[Simes]

I think this might be a Cross-Origin Resource Sharing issue, which would explain why it works from Google Fonts and not from your own site. A workaround would be to store the font on a server which supports CORS, and making it publicly accessible; Dropbox might work for this.

 

[Korlian]

I think this might be a Cross-Origin Resource Sharing issue, which would explain why it works from Google Fonts and not from your own site. A workaround would be to store the font on a server which supports CORS, and making it publicly accessible; Dropbox might work for this.

Thanks for the suggestion, but I don't think that's it since it works fine as long as I use the Windows version of OBS with the CLR Browser. Shouldn't that too then be affected?

 

[Simes]

My understanding is that they're not the same code base, so there's a possibility that there would be differences. I don't know for certain, though.