I'm having problems with video.js. On the main domain everthings works fine. But on the www. subdomain the buttons are not showing correctly (It's just showing ).
It looks like the font doesn't work on the subdomain. Any ideas to fix this?
VideoJS uses a custom font, defined using the #font-face directive in video-js.css. The paths defined inside are relative. When FireFox goes to load the fonts, it uses the root URL of the CSS file and concatenates the font paths.
The custom fonts are thus being loaded from your main domain when viewing the subdomain. Doesn't sound like a problem, right? But Firefox does not allow cross-domain fonts without access control headers for security.
In other words, FireFox normally requires every custom font to be loaded from the domain of the page that's showing. If you're viewing www.example.com, your fonts have to come from www.example.com, not example.com.
You can either
Use the solution linked above to add the appropriate headers to your server (if you have control) to allow the "cross-domain" fonts (www.example.com is considered a different domain from example.com)
Load the VideoJS CSS file dynamically from whichever domain is active.
If you want to go the latter route, when the user's viewing www.example.com, load http://*www.*example.com/path/to/video-js/video-js.min.css. When viewing example.com, load http://example.com/path/to/video-js/video-js.min.css.
Note that Webkit doesn't care -- seems to just be a Firefox problem.
Apply this css and get output
#font-face {
font-family: 'VideoJS';
src: url('https://vjs.zencdn.net/f/1/vjs.eot');
src: url('https://vjs.zencdn.net/f/1/vjs.eot?#iefix') format('embedded-opentype'),
url('https://vjs.zencdn.net/f/1/vjs.woff') format('woff'),
url('https://vjs.zencdn.net/f/1/vjs.ttf') format('truetype');
}
.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before, .vjs-icon-pause:before {
content: "\f103";
font-family: 'VideoJS';
}
.video-js .vjs-mute-control .vjs-icon-placeholder:before, .vjs-icon-volume-high:before {
content: "\f107";
font-family: 'VideoJS';
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .vjs-icon-play:before {
content: "\f101";
font-family: 'VideoJS';
}
.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before, .vjs-icon-picture-in-picture-enter:before {
content: "\f121";
font-family: 'VideoJS';
}
.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before, .vjs-icon-fullscreen-enter:before {
content: "\f108";
font-family: 'VideoJS';
}
This solution worked for me when the icons were rendering blank:
#font-face {
font-family: VideoJS;
src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff");
font-weight: normal;
font-style: normal;
}
Related
I have a next JS application and my custom fonts are in my public folder.
My task is to prevent FOUT (flash of unstyled text) on site load and so I have settled for using font-display:block;
#font-face {
font-family: 'Proxima Nova';
src: url('/fonts/ProximaNova-Regular.woff2') format('woff2'),
url('/fonts/ProximaNova-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display:block;
}
in document.tsx I am preloading the fonts in the Head component as such :
<link
rel="preload"
href="/fonts/ProximaNova-Bold.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
in _app.tsx I am importing global styles as such import './styles.css';
When i check load time for my fonts in the nextwork tab, it is roughly 3 seconds (please refer to screenshot).
Any suggestions on making my font load faster?
I'm working with laravel in a project and I downloaded a google font using the google-webfonts-helper app to use the font offline, but i'm getting this error in my browser:
GET http://127.0.0.1:8000/css/public/fonts/nunito-v14-latin-800.woff2 net::ERR_ABORTED 404 (Not Found)
this is the css call
<link href="{{asset('css/fonts.css')}}" rel="stylesheet">
and this is a part of fonts.css file (i didn't put all the code because it's basically the same just different font weights)
#font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 200;
src: url('public/fonts/nunito-v14-latin-200.eot');
/* IE9 Compat Modes */
src: local('Nunito ExtraLight'), local('Nunito-ExtraLight'), url('public/fonts/nunito-v14-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('public/fonts/nunito-v14-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
url('public/fonts/nunito-v14-latin-200.woff') format('woff'), /* Modern Browsers */
url('public/fonts/nunito-v14-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
url('public/fonts/nunito-v14-latin-200.svg#Nunito') format('svg');
/* Legacy iOS */
}
I pasted the fonts files in public/fonts, the browser actually recongizes the css file but I dont know what i'm doing wrong
in laravel the url function is rooted in the public folder. So if you paste your font file into public/font/file.ttf please use url('font/file.ttf') instead of url('public/font/file.tff'). Because it will point to the public/public/font/file.ttf file
I'm trying to get my PDF's created using DOMpdf to work correctly with Japanese characters. I have it working fine with French etc, but Japanese characters don't show (just get ???)
Here is how the HTML page looks:
...but the PDF comes out as:
The code I'm using is pretty simple:
<?php
// include autoloader
require_once '/path/to/admin/invoices/autoload.inc.php';
define("DOMPDF_ENABLE_REMOTE", true);
define("DOMPDF_UNICODE_ENABLED", true);
// reference the Dompdf namespace
use Dompdf\Dompdf;
$order_id = $argv[1];
$content = file_get_contents("/path/to/admin/invoices/html_versions/$order_id.html");
// // instantiate and use the dompdf class
$dompdf = new Dompdf();
$dompdf->loadHtml($content);
// Render the HTML as PDF
$dompdf->render();
// Output the generated PDF to Browser
$dompdf->stream();
?>
From what I can see, it wants a font specifically for Japanese.
What font would work?
Can I have it running alongside the normal font? i.e I still want to be able to show stuff like íóé etc
UPDATE: I'm getting a bit closer!
I've downloaded the CyberCJK TTF font (as suggested here: https://github.com/dompdf/dompdf/issues/938 )
Then I tweaked my CSS to:
#font-face {
font-family: CyberCJK;
font-style: normal;
font-weight: normal;
src: url("https://example.com/cgi-bin/admin/invoices/lib/fonts/DejaVuSerif.ttf") format("truetype");
}
* {
font-family: 'CyberCJK', sans-serif;
}
#page { margin: 0px; } body { margin: 0px; }
html { font-size: 14px/1; font-family: 'CyberCJK', sans-serif; overflow: auto; }
..and now I get partial characters:
I have also tested uploading my HTML page on: http://www.htm2pdf.co.uk , and it comes out perfectly as a PDF, and is also only 64kb, compared to 13mb+ using DOMPdf. Something must be up!
I'm really at a loss as to what else to try :/
I noticed Firefox refuses to load custom fonts on one of my web pages. I'm 90% sure it worked one month ago. Now I use Firefox 43.04 (Windows). The error in the console is:
downloadable font: rejected by sanitizer (font-family: "PT Serif" style:normal weight:bold stretch:normal src index:0) source: https://localhost:8443/project/fonts/2/pt-serif-v8-latin_latin-ext-700.eot
and the html text is rendered with a system font (Times New Roman) instead.
The relevant CSS is:
#font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 700;
src: url('../fonts//pt-serif-v8-latin_latin-ext-700.eot'); /* IE9 Compat Modes */
src: local('PT Serif Bold'), local('PTSerif-Bold'),
url('../fonts//pt-serif-v8-latin_latin-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts//pt-serif-v8-latin_latin-ext-700.woff') format('woff'), /* Modern Browsers */
url('../fonts//pt-serif-v8-latin_latin-ext-700.ttf') format('truetype'), /* Safari, Android, iOS */
}
If I remove both lines with eot, then it works correctly (web font is used).
The question is, why does it reject the entire font family when the problem is just with one format?
I need eot for IE (strange, caniuse claims IE supports WOFF since v9, but it does not seem to work with my IE11).
I downloaded the font files thru https://google-webfonts-helper.herokuapp.com/fonts
The CSS line (the one with "Safari, Android, iOS") ends with a comma instead of semicolon. (blush)
The correct (tested to work) version is:
#font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 700;
src: url('../fonts//pt-serif-v8-latin_latin-ext-700.eot'); /* IE9 Compat Modes */
src: local('PT Serif Bold'), local('PTSerif-Bold'),
url('../fonts//pt-serif-v8-latin_latin-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts//pt-serif-v8-latin_latin-ext-700.woff') format('woff'), /* Modern Browsers */
url('../fonts//pt-serif-v8-latin_latin-ext-700.ttf') format('truetype'); /* Safari, Android, iOS */
}
Hello and thanks a ton for any help with my problem. Here are the facts:
The URL is www.thecloudz.net, regarding the navigation links at the very top, the font is called brooklyn. The font on the URL appears correctly in Safari and Chrome, but not in Firefox. I was told I may have a plugin installed that's interfering with font-face.
The font-face settings for the URL are below, 'rock salt' is the default font showing up in FF, but according to the code below it should first show brooklyn. Why is it working on every browser except Firefox? Please help if you can, thank you!
`/* CHANGES FONT FOR NAVIGATION */
#font-face {
font-family: brooklyn;
src: url('http://thecloudz.net/files/BROOKLYN.eot');
src: url('http://thecloudz.net/files/BROOKLYN.eot?#iefix') format('embedded- opentype'),
url('http://thecloudz.net/files/brooklyn.woff') format('woff'),
url('http://thecloudz.net/files/BROOKLYN.TTF') format('truetype');
}
#navigation ul li a {
font-family: brooklyn, 'rock salt', serif;
font-size: 1.3em;
padding-top: 7px;
height: 50px;
}`
Firefox enforces a same origin policy.
http://thecloudz.net/ and http://www.thecloudz.net/ are not the same.