I have recently need to use fonts from local application which were earlier referenced from http://fonts.googleapis.com/css?family=Open+Sans, earlier fonts were referenced in sass like :
#import url("https://fonts.googleapis.com/css?family=Maven+Pro");
I installed fonts from npm & imported in sass like:
#import url("../node_modules/typeface-maven-pro?family=Maven+Pro");
Now webpack is generating 21MB css which earlier was 320kb. As I supspected upon inspection I found fonts are embedded in css as hexadecimal like :
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: url(data:application/vnd.ms-fontobject;base64,h3cBAKF2AQACAAIABAAAAAILAwYDBQQCAgQBASwBAAAIAExQ7wIA4FsgAEAoAAAAAAAAAJ8BACAAAAAAhvcg1AAAAAAAAAAAAAAAAAAAAAAAAB4ATwBwAGUAbgAgAFMAYQBuAHMAIABMAGkAZwBoAHQAAAAMAEkAdABhAGwAaQBjAAAAGABWAGUAcgBzAGkAbwBuACAAMQAuADEAMAAAACwATwBwAGUAbgAgAFMAYQBuAHMAIABMAGkAZwBoAHQAIABJAHQAYQBsAGkAYwAAAAAAQlNHUAAAAAAAAAAAAAAAAAAAAAADAuoIAVbNAW9TAWcEFM3pjMl4WmfKaWN3hnx6JmO6ojRvSI1U6OiPDyQA0a+M0J9YQcEiqJaAbQHtU1iDq2Bnl7ejJ8rC41GlgOAY9I5OWoJSjiHI9DfkJpbKlOMkLprn1q4rVvWzbCf930p8703JJ0nHo31vHRYa4ebmnW+8zvx0RSUd2QcQKhRRo8nvU8UADxYMUJeXBpGj9aUg2Y3ZEO8tyX0zEQ8MFqgcOnR8pISExrfRL3Kn98z3gkfclmOhXwU+6M5ofsi1WApsIrGHO/rqog6zb5GuKGJqPCcnakQVQwmY1GfEOjxb7S46r4JgLa3OY2lM3fgsJ9aTZ064fU8mjZeQbdUAkJ8PsdL8B/tWQlQHFypDF97cLNa/WrONAi9AOGESW+kaQLHIzIDHRCcAZUFo7BTXwsgaANXHRc3rVvIA81wZ+yMjSbDO85h+KgPt4VMqvTImD1Qz8DysK7dGEA/PSL6oopAt7H1sC29hY3uJcsr3ZmFTWc/DGrYsU4nAbr6C3A9k+iWgah08uphgGlfwhyLWAr5u7gptDVTVJY9HuHLyoy6LLB3a6eC6DKF1rYawTIQf3sw44lKgl9sU2/R9D9iKRjZqcamQkszEufXMUfXMUHEUHEUHEUHBiDjVH1zFH1zFH1zFBM1R9cxR9cxR91Yj6mVH1zHrzbncHebc7g70IqhGTg+BA+BBRVBRXYH2bwjzN4R5m8DvJ7dlQb3bY7Qa7FsjqCeZvCOs3gd4/b7s2saCa3P0IJXbk6ET/YG+fEeLdrPbqbTTZVng6zeB369OTrN4HfTtJHi86tE1B1m8DuJUxBFiOraEdW0IEWDvViIBHUKEcW+I4zeB3e7Rh3+nFpUbWlRteAgHija8BG1+Qd6P3Gm2bwgOoRteEdxwI2c0zeEaXhRpeFBnQN7/7whnQN++WwWyBzLSCtgPX6B3qA71GTEUb8G2KRoP83Pu7Gk7SkyX5RvlPQ8yX5UHTBvyFgybFRnxfNpu0pm593Y0r7TtPbvWzXLCgRFAIVA5VGCxRvrE+AR7YZbxLS26Xg0BA0Ab5jpwje92z3MahbyvMFLRvrRCuILgQLgTZYgBQ);
Please note I have to truncate font in encoded text as question character limit is 30000 characters in stack overflow & there are multiple font faces like this.
What is wrong here?
Issue was with my loader for fonts as used for fonts. I was using url-loader like:
{
test: /\.(jpg|png|gif|eot|woff2|woff|ttf|ico|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader'
}
Solution is to modify it limit file size and split the bigger files like :
{
test: /\.(woff2|woff|ttf|eot|svg|otf)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loaders: ["url-loader?limit=100&name=fonts/[name]_[hash].[ext]"]
}
Incase anyone deals with this while using Sensible webpack 5 boilerplate . I solved it by changing the type
from
{ test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' }
to
{ test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/resource' },
nb: also puts svgs separate. You can modify the test
Related
My project contains the following :
A balloon JS widget with a hand-coded SCSS file common/balloon/luciad-balloon.scss :
...
.lcdClose {
...
background-image: url("close-icon-selected.png");
}
.lcdClose:hover {
...
background-image: url("close-icon.png");
}
An icon font with a generated CSS file resources/font/luciad/style.css :
#font-face {
font-family: 'LuciadRIA';
src:
url('fonts/LuciadRIA.ttf?25o3wd') format('truetype'),
url('fonts/LuciadRIA.woff?25o3wd') format('woff'),
url('fonts/LuciadRIA.svg?25o3wd#LuciadRIA') format('svg');
font-weight: normal;
font-style: normal;
}
...
I'm now creating a theme file template/css/sample-single.scss. This theme includes several components, including the two components I mentioned.
Unfortunatelty, I'm not able to do this :
#import "../../resources/font/luciad/style";
#import "../../common/balloon/luciad-balloon";
Considering a CSS import resolves the URL files relative to the file they are found in and SCSS does not adjust the URL after embedding it into sample-single.scss, the URL is still relative to the imported file and thus incorrect. This behavior is confusing, because I would expect SCSS imports to behave the same as CSS imports in this regard.
I could replace #import "../../resources/font/luciad/style" with #import "../../resources/font/luciad/style.css", considering this is a css file. Because the file is now referenced as an external file instead of embedded, this solves the issue for that particular file. However, I'd rather avoid external dependencies and prefer to embed everything in my sample-single.css.
And for #import "../../common/balloon/luciad-balloon", I do not have that option. Considering this is an SCSS file, I can not use this as an external reference. I suppose I could fix this issue by using absolute paths, but this reduces the reusability of this component. It prohibits using this component across different projects with different folder structures or server configs.
Is there a way I can include common/balloon/luciad-balloon.scss & resources/font/luciad/style.css into template/css/sample-single.scss without having to rewrite the URLs in their property values to absolute paths?
In my site I've tried these two methods (One for each time), to import a font:
#import "/va/fonts/FjallaOne-Regular.ttf";
#import url('/va/fonts/FjallaOne-Regular.ttf');
None of them is working. The path is correct.
I don't want to use a HTTP request for this task.
PS: Tried without the quotes too: #import url(/va/fonts/FjallaOne-Regular.ttf);
It doesn't work because you are using an import, not the #font-face, try the following:
#font-face {
font-family: 'FjallaOne-Regular'; /*You can use whatever name that you want*/
src: url('/va/fonts/FjallaOne-Regular.ttf');
}
Finally, select the font-family on your sections, for example:
#styledDiv {
font-family: 'FjallaOne-Regular';
}
Good luck, bro.
I think you might be missing a back-slash in there, I believe the correct syntax is #import url(//address);, I'm not sure though if it would work with a local file.
I personally would define a font-face in my CSS and use that as a regular font-family property. Always worked for me that way whether for local files or fonts online.
Example:
#font-face {
font-family: 'MyWebFont';
src: url('/va/fonts/FjallaOne-Regular.ttf') format('truetype');
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
For the record, I learned the code above some time ago from CSStricks.com
I hope that answers your question.
Happy coding :)
I'm trying to load google font to my webapp (angular based but not relevant) and I'm getting this error:
Failed to decode downloaded font: https://fonts.googleapis.com/css?family=Open+Sans
The relevant part of my webpack.config.js is:
loaders: [
{test: /\.less$/, loader: "style!css!less", exclude: /node_modules|bower_components/},
{test: /\.woff(2)$/, loader: "url?limit=10000&minetype=application/font-woff"}
]
and my style.less is:
#font-face {
font-family: "myFont";
font-style: normal;
src: url(https://fonts.googleapis.com/css?family=Open+Sans);
}
body {
font-family: "myFont";
}
My guess is that it is not really related to the webpack part but the font inclusion itself. Unfortunately I lack the knowledge to figure out where exactly is the problem.
I'd suggest you have a look at this article by Paul Irish from 2009 named Bulletproof #font-face syntax
It explains very well and in all detail how to get webfonts up and running across all (or at least all capable) browsers.
Another way is to use link tag to load the CSS. Then define the font in custom CSS.
Example:
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family:'Abel',Sans;
}
</style>
I want to include a custom font in my CSS like this:
#font-face
{
font-family: TheFont;
src: url(fonts/SourceSansProLight.ttf);
}
The CSS is served with Grails 2.3 and the CSS is modified to become this
#font-face
{
font-family: TheFont;
src: url(resource:/css/fonts/fonts/SourceSansProLight.ttf);
}
The resulting font url scheme is unknown and browsers can't open that file. Chrome, for example, reports:
GET resource:/css/fonts/fonts/SourceSansProLight.ttf net::ERR_UNKNOWN_URL_SCHEME
/css/fonts is prepended to the original URL as well.
How can I instruct Grails to leave the font-face URL exactly as it is?
The solution was to disable CSS processing in Config.groovy:
grails.resources.rewrite.css = false
I found the tip how to do that on the Grails mailing list.
A better solution I think is proposed by dmahapatro at: https://stackoverflow.com/a/22849288/2286664
You need to ensure your font files are known to the Resources plugin.
The following worked for me in my Config.groovy, adapt it based on your paths:
grails.resources.adhoc.includes = [
'/images/**', '/css/**', '/js/**', '/img/**', '/fonts/**'
]
You'll needed to run grails clean after making this change.
I am creating a Google Chrome extension.
And I want to use background-image attribute for some of the elements that I define through CSS. But I am not sure how the url() should be given. I tried relative URL, but it tries to fetch the image relative to the site's domain! Not relative to the extension's source directory.
The stylesheet is included to my extension via the manifest file as follows:
...
"content_scripts": [
{
"matches": ["http://www.myblahblahsite.com/"],
"js": ["core.js"],
"css":["styles.css"]
}
],
...
Also, I like to do the same with custom fonts too using the #font-face
For example:
#font-face {
font-family: 'abcCustom';
src: url("fonts/abcCustom.ttf") format('ttf');
}
This won't properly consider the font's path relative to the extension!
Any ideas or suggestions?
Thanks.
You need to make it an absolute url for your extension, the best way to do this would be like this:
#font-face{
font-family: 'abcCustom';
src: url('chrome-extension://__MSG_##extension_id__/fonts/abcCustom.ttf') format('ttf');
}
This is part of the i18n api.
Have you thought about encoding your images and fonts as Base64.