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
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 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 */
}
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,d09GRgABAAAAABDkAAsAAAAAG6gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3hY21hcAAAAYQAAADaAAADPv749/pnbHlmAAACYAAAC3AAABHQZg6OcWhlYWQAAA3QAAAAKwAAADYZw251aGhlYQAADfwAAAAdAAAAJA+RCLFobXR4AAAOHAAAABMAAACM744AAGxvY2EAAA4wAAAASAAAAEhF6kqubWF4cAAADngAAAAfAAAAIAE0AIFuYW1lAAAOmAAAASUAAAIK1cf1oHBvc3QAAA/AAAABJAAAAdPExYuNeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGS7wTiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGJHcRdyA4RZgQRADK3CxEAAHic7dFZbsMgAEXRS0ycyZnnOeG7y+qC8pU1dHusIOXxuoxaOlwZYWQB0Aea4quIEN4E9LzKbKjzDeM6H/mua6Lmc/p8yhg0lvdYx15ZG8uOLQOGjMp3EzqmzJizYMmKNRu27Nhz4MiJMxeu3Ljz4Ekqm7T8P52G8PP3lnTOVk++Z6iN6QZzNN1F7ptuN7eGOjDUoaGODHVsuvU8MdTO9Hd5aqgzQ50b6sJQl4a6MtS1oW4MdWuoO0PdG+rBUI+GejLUs6FeDPVqqDdDvRvqw1CfhpqM9At0iFLaAAB4nJ1YDXBTVRZ+5/22TUlJ8we0pHlJm7RJf5O8F2j6EymlSPkpxaL8U2xpa3DKj0CBhc2IW4eWKSokIoLsuMqssM64f+jA4HSdWXXXscBq67IOs3FXZ1ZYWVyRFdo899yXtIBQZ90k7717zz3v3HPPOfd854YCCj9cL9dL0RQFOqCbGJnrHb5EayiKIWN8iA/hWBblo6hUWm8TtCDwE80WMJus/irwyxOdxeB0MDb14VNJHnXYoLLSl6FfCUYO9nYPTA8Epg9090LprfbBbZ2hY0UlJUXHQp3/vtWkS6EBv8+rPMq5u9692f/dNxJNiqwC1xPE9TCUgCsSdQWgE3XQD25lkG4CN2xmTcOXWBOyser6RN6KnGbKSbmQ3+d0OI1m2W8QzLLkI2sykrWAgJJEtA8vGGW/2Q+CmT3n8zS9wZwu2DCvtuZKZN3xkrLh36yCZuUomQSqGpY8t/25VfHVhw8z4ebGBtfLb0ya9PCaDc+8dGTvk2dsh6z7WzvowlXKUSWo9MJ15a3KrEP2loOr2Ojhw6iW6hf2BDdEccQvZGpaAy7YovSwq8kr7HGllxpd71rkS6G0Sf11sl9OvMK1+jwPPODxjUwkOim9CU3ix1wNjXDfmJSEn618Bs6lpWwUpU+8PCqLMY650zjq8VhCIP17NEKTx3eaLL+s5Pi6yJWaWjTHLR1jYzPSV9VF/6Ojdb/1kO3Mk3uhHC0x6gc1BjlKQ+nQFxTYdaJkZ7ySVxLBbhR1dsboNXp1tCYKW2LRaEzpYcIx2BKNxaL0ZaUnSqfFoiNhHKR/GkX6PWUSAaJelQaqZL1EpoHNsajSEyPSoJ9IjhIxTdjHLmwZvhRDOiFTY/YeQnvrVZmiTQtGncECXtFTBZLOVwwMRgoXHAkXzMzPn1nAJJ8jYSbMDaqN2waGLzNhih/bZynUBMpIWSg7VYi7DRx2m8ALkIdRCJwI6ArJx2EI8kaDWeTQKeAFk9fjl/1AvwktjQ1P7NjyMGQyfd4vjipX6M/i52D7Cq80kqlcxEcGXRr/FEcgs0u5uGgB4VWuMFfpdn2Re6Hi3PqzmxWKsz6+ae2Pn9hXXw/fqM859UiGC0oKYYILJBqJrsn1Z1E5qOs9rQCiUQRREjm8yJcbHF5cUJufX1vAHlefw0XgUoboS3ETfQlTxBC4SOtuE8VPRJTBSCQSjZCpk7Gqzu+masaZ2y7Zjehho4F3g82BNDkAHpORG4+OCS+f6JTPmtRn/PH1kch6d04sp7AQb25aQ/pqUyXeQ8vrebG8OYQdXOQ+585u0sdW9rqalzRURiJ+9F4MweRFrKUjl1GUYhH1A27WOHw5cTFSFPMo9EeUIGnQTZHIaJ7AHLaOKsOODaNF9jkBjYG2QEsQ2xjMUAx2bBEbeTBWMHwskBjngq56S/yfgkBnWBa4K9sqKtq2t1UI8S9He5XuBRbawAdatrQEAi30Aks2+LM8WeCbalVZkWNylvJ+dqJnzVb+OHlSoKW8nPCP7Rd+CcZ2DdWAGqJ2CBFOphgywFFCFBNtfAbGtNPBCwxvygHeYMZMY9ZboBqwq/pVrsbgN5tkv152ODlbMfiqwGMBgxa4Exz3QhovRIUp6acqZmQzRq0ypDXS2TPLT02YIkQETnOE445oOGxOmXAqUJNNG7XgupMjPq2ua9asrj5yY/yuKteO1Kx0YNJTufrirLe1mZnat7OL6rnUdCWenpW6I8mAnbsY8KWs1PuSovCW9A/Z25PQ24a7cNOqgmTkLmBMgh4THgc4b9k2IVv1/g/F5nGljwPLfOgHAzJzh45V/4+WenTzmMtR5Z7us2Tys909UHqrPY7KbckoxRvRHhmVc3cJGE97uml0R1S0jdULVl7EvZtDFVBF35N9cEdjpgmAiOlFZ+Dtoh93+D3zzHr8RRNZQhnCNMNbcegOvpEwZoL+06cJQ07h+th3fZ/7PVbVC6ngTAV/KoLFuO6+2KFcU651gEb5ugPSIb1D+Xp8V4+k3sEIGnw5mYe4If4k1lFYr6SCzmM2EQ8iWtmwjnBI9kTwe1TlfAmXh7H02by9fW2gsjKwtv0aaURKil4OdV7rDL1MXIFNrhdxohcZXYTnq47WisrKitaObbf5+yvkLi5J6lCNZZ+B6GC38VNBZBDidSS/+mSvh6s+srgC8pyKMvDtt+de3c9fU76ZPfuM8ud4Kv0fyP/LqfepMT/3oZxSqpZaTa1DaQYLY8TFsHYbWYsPoRhRWfL5eSSQbhUGgGC3YLbVMk6PitTFNGpAsNrC6D1VNBKgBHMejaiuRWEWGgsSDBTJjqWIl8kJLlsaLJ2tXDr6xGfT85bM2Q06a46x2HTgvdnV8z5YDy/27J4zt6x2VtkzjoYpkq36kaBr4eQSg7tyiVweWubXZugtadl58ydapfbORfKsDTuZ0OBgx4cfdjCf5tbWNITnL120fdOi1RV1C3uKGzNdwYLcMvZ3BxoPyTOCD1XvXTp7U10gWCVmTV9b3r2z0SkGWovb2hp9I89O8a2smlyaO8muMU+dRmtzp60IzAoFpjLr1n388boLyf0dRvxhsHZ0qbWqDkwqvvpkj4l0fY6EIXRi5sQSrAvsVYwXRy4qJ2EVtD1AN7a0HWth9ymvL1xc3WTUKK/TAHA/bXDVtVWfOMfuGxGZv4Ln/jVr9jc3j1yMv0tndmyt9Vq88Y9gH1wtLX3KWjot5++jWHgAoZZkQ14wGQ20Fli71UmKJAy4xKMSTGbVdybW7FDDAut9XpD5AzWrYO7zQ8qffqF8+Ynd/clrHcdyxGy3a/3+mfNnzC/cBsveTjnTvXf1o6vzOlZw7WtqtdmPK/Errz/6NNtD72zmNOZfbmYdTGHfoofqI79Oc+R2n1lrnL6pOm0Up7kwxhTW12Amm7WYkXR2qYrF2AmgmbAsxZjwy1xpg/m1Je2vrp8v/nz2xpmlBg4E9hrMU341wVpTOh/OfmGvAnra8q6uctr60ZQHV3Q+WMQJykMj8ZsWn2QBOmmHMB+m5pDIpTFonYigiaKAhGEiAHF7EliVnQkjoLVIMPtJpBKHYd3A8GYH9jJzrWwmHx5Qjp7vDAX0suGRym1vtm/9W1/HyR8vczfMs6Sk8DSv855/5dlX9oQq52hT8syyp2rx5Id17IAyAM3wIjQPMOHzytEB64q6D5zT91yNbnx3V/nqnd017S9Y0605k3izoXLpsxde2n38yoOV9s1LcjwzNjbdX6asnBVaBj/6/DwKwPkpcqbDG7BnsXoSqWnUAmottYF6jMSdVyYZh3zVXCjwTiwwHH6sGuRiEHQGzuRX6whZkp123oy1BWE2mEfJ/tvIRtM4ZM5bDXiMsPMaAKOTyc5uL57rqyyc5y5JE5pm1i2S2iUX0CcaQ6lC6Zog7JqSqZmYlosl2K6pwNA84zRnQW6SaALYZQGW5lhCtU/W34N6o+bKfZ8cf3/Cl/+iTX3wBzpOY4mRkeNf3rptycGSshQWgGbYt5jFc2e0+DglIrwl6DVWQ7BuwaJ3Xk1J4VL5urnLl/Wf+gHU/hZoZdKNym6lG+I34FaNeZKcSpJIo2IeCVvpdsDGfKvzJnAwmeD37Ow65ZWwSowpgwX5T69s/rB55dP5BcpgDKFV8p7q2sn/1uc93bVzT/w6UrCqDTWvfCq/oCD/qZXNoUj8BL5Kp6GU017frfNXkAtiiyf/SOCEeLqnd8R/Ql9GlCRfctS6k5chvIBuQ1zCCjoCHL2DHNHIXxMJ3kQeO8lbsUXONeSfA5EjcG6/E+KdhN4bP04vBhdi883+BFBzQbxFbvZzQeY9LNBZc0FNfn5NwfDn6rCTnTw6R8o+gfpf5hCom33cRuiTlss3KHmZjD+BPN+5gXuA2ziS/Q73mLxUkpbKN/eqwz5uK0X9F3h2d1V4nGNgZGBgAOJd776+iue3+crAzc4AAje5Bfcg0xz9YHEOBiYQBQA8FQlFAHicY2BkYGBnAAGOPgaG//85+hkYGVCBMgBGGwNYAAAAeJxjYGBgYB8EmKOPgQEAQ04BfgAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAcICGAJYArQC4AMwA7AD3gQwBJYE3AUkBWYFigYgBmYGtAbqB1gIEghYCG4IhAi2COh4nGNgZGBgUGYoZWBnAAEmIOYCQgaG/2A+AwAYCQG2AHicXZBNaoNAGIZfE5PQCKFQ2lUps2oXBfOzzAESyDKBQJdGR2NQR3QSSE/QE/QEPUUPUHqsvsrXjTMw83zPvPMNCuAWP3DQDAejdm1GjzwS7pMmwi75XngAD4/CQ/oX4TFe4Qt7uMMbOzjuDc0EmXCP/C7cJ38Iu+RP4QEe8CU8pP8WHmOPX2EPz87TPo202ey2OjlnQSXV/6arOjWFmvszMWtd6CqwOlKHq6ovycLaWMWVydXKFFZnmVFlZU46tP7R2nI5ncbi/dDkfDtFBA2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkMl2wjAMRfOAhABlKm2h80C3+ajgCKKDY6cegP59TYBzukAL+z1Zsq8ctaJTTKPrsUQLbXQQI0EXKXroY4AbDDHCGBNMcYsZ7nCPB8yxwCOe8IwXvOIN7/jAJ76wxHfUqWX+OzgumWAjJMV17i0Ndlr6irLKO+qftdT7i6y4uFSUvCknay+lFYZIZaQcmfH/xIFdYn98bqhra1aKTM/6lWMnyaYirx1rFUQZFBkb2zJUtoXeJCeg0WnLtHeSFc3OtrnozNwqi0TkSpBMDB1nSde5oJXW23hTS2/T0LilglXX7dmFVxLnq5U0vYATHFk3zX3BOisoQHNDFDeZnqKDy9hRNawN7Vh727hFzcJ5c8TILrKZfH7tIPxAFP0BpLeJPA==) format("woff");
font-weight: normal;
font-style: normal;
}
I am using the #font-face. I had to break it up into two section because firefox continued to use the first font and it showed up crappy. Actually it still displays blurry/pixelated in firefox. Any solutions for that? Anyways it all seems to work fine now, but I can't get any of the bold functions to work. Doesn't seem to matter where I add it in the code whether it is in the CSS or directly in the html it work make the font bolder. Is this normal?
#font-face {
font-family: TektonPro-BoldExt;
src:url('../fonts/TektonPro-BoldExt.eot') format('embedded-opentype'), /* For IE */
url('../fonts/TektonPro-BoldExt.eot?#iefix') format('embedded-opentype'), /* For fix-IE */
url('../fonts/TektonPro-BoldExt.woff') format('woff'), /* For new-IE */
url('../fonts/TektonPro-BoldExt.otf') format('opentype'), /* For non-IE */
url('../fonts/TektonPro-BoldExt.ttf') format('truetype'), /* For non-IE */
url('../fonts/TektonPro-BoldExt.svg') format('svg'); /* For non-IE */
font-weight: bolder;
font-style: normal;
}
#font-face {
font-family: TektonPro-BoldExt-FF;
src:url('../fonts/TektonPro-BoldExt.otf') format('opentype'); /* For Firefox */
font-weight: bolder;
font-style: normal;
}
Not all fonts have a bold spite that can render as bold. You can try adjusting the font-weight in increments of 100 to see if that makes any difference.
Regarding Firefox using the first font, do you mean it was caching another font you used before?
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.