I am using Nextjs and loading flaticon css in _app.js like:
import '../public/assets/css/flaticon.css';
In following content I am getting error:
#font-face {
font-family: 'Flaticon';
src: url('../fonts/Flaticon.eot');
src: url('../fonts/Flaticond41d.eot?#iefix') format('embedded-opentype'),
url('../fonts/Flaticon.woff') format('woff'),
url('../fonts/Flaticon.ttf') format('truetype'),
url('../fonts/Flaticon.html#Flaticon') format('svg');
font-weight: normal;
font-style: normal;
}
Following error I am getting:
error - ./public/assets/css/Flaticon.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!DOCTYPE html>
| <html lang="en-US" prefix="og: http://ogp.me/ns#">
| <head>
Solve this by following steps:
Install html loader
npm install --save-dev html-loader
Add this in next.config.js file
webpack: (config, options) => {
config.module.rules.push({
test: /\.html$/i,
use: 'html-loader',
});
return config
}
Reference: https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
Related
I'm new to Webpack and I'm trying to load the stylesheet of a plugin lightgallery installed through yarn add.
I can successfully load the JavaScript. However, the stylesheet crashes when trying to load a font:
Error: Cannot find module '../fonts/lg.woff2?io9a6k'
It gets loaded as follows:
app/views/layouts/application.html.erb:
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
app/assets/javascript/packs/application.scss:
#import "bootstrap";
#import "lightgallery/scss/lightgallery.scss";
Bootstrap loads fine.
In lightgallery/scss/lightgallery.scss:
#import 'lg-variables';
#import 'lg-mixins';
#import 'lg-fonts';
#import 'lg-theme-default';
// Core
#import 'lightgallery-core';
In lightgallery/scss/_lg-fonts.scss:
#font-face {
font-family: 'lg';
src: url('#{$lg-path-fonts}/lg.woff2?io9a6k') format('woff2'),
url('#{$lg-path-fonts}/lg.ttf?io9a6k') format('truetype'),
url('#{$lg-path-fonts}/lg.woff?io9a6k') format('woff'),
url('#{$lg-path-fonts}/lg.svg?io9a6k#lg') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
The folder lightgallery/fonts contains the files, not sure what the parameter ?io9a6k is for
How can I get the stylesheets loading correctly?
I got it working using resolve-url-loader to fix relative paths in SCSS:
yarn add resolve-url-loader
In config/webpack/environment.js:
const { environment } = require('#rails/webpacker')
// https://github.com/sachinchoolur/lightGallery/issues/1039
// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader'
});
const webpack = require('webpack')
module.exports = environment
I have custom component library written in React (rollup to build). I don't want to use createglobalstyle BCS its broke performance in an external project. I added CSS file with font-face (relative path) but these fonts are not working in external projects. Do u have any idea how to fix it?
src
components (folders)
index.css with
#font-face {
font-family: 'font1';
font-display: swap;
font-weight: 900;
src: url(assets/fonts/font1/heavy/heavy.woff2)
}
h1{
margin: 2.75rem 0 1.05rem;
font-family: 'font1';
font-weight: 400;
line-height: 1.15;
color:red;
}
Rollupconfig plugins :
[ postcss({
extract: false,
plugins: [autoprefixer]
}),
babel({
exclude: 'node_modules/**'
}),
localResolve(),
resolve({
browser: true
}),
commonjs(),
filesize(),
copy({
targets: [{ src: 'src/assets', dest: 'build' }]
}),
url({
// by default, rollup-plugin-url will not handle font files
include: ['**/*.woff', '**/*.woff2'],
// setting infinite limit will ensure that the files
// are always bundled with the code, not copied to /dist
limit: Infinity
}),
modulepreload({
prefix: 'fonts',
index: 'src/assets/fonts/font1/heavy/heavy.woff2',
})
];
When I use that library in external projects I see all style like color:red etc. but font-face is not working :(
I have the feeling that you just wrongly entered the source of your font.
Try something like this:
#font-face {
font-family: 'font1';
font-display: swap;
font-weight: 900;
src: url("../assets/fonts/font1/heavy/heave.woff2");
}
I have a css file which I included into Angular project this way:
{
"styles" : [
"src/assets/css/style.css"
],
}
Into angular.json I added:
"assets": [
"src/favicon.ico",
"src/assets"
],
But into the css file font files are loaded like:
src: url("assets/fonts/materialdesignicons-webfont.eot?v=1.4.57");
src: url("assets/fonts/materialdesignicons-webfont.eot?#iefix&v=1.4.57") format("embedded-opentype"), url("assets/fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2"),
I get error:
Can't resolve 'assets/fonts/glyphicons-halflings-regular.ttf'
And many more other like this.
What is the proper way to solve this problem?
You can add your font as follows:
#font-face {
font-family:"Your font";
src: url("assets/fonts/materialdesignicons-webfont.eot?v=1.4.57"),
url("assets/fonts/materialdesignicons-webfont.eot?#iefix&v=1.4.57") format("embedded-opentype"),
url("assets/fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2");
}
Hope it help you.
I usually include my fonts like this :
#font-face { font-family: "Nunito Light"; font-display: swap; src: url('../font/Nunito/Nunito-Light.ttf'); }
You should just include .ttf file of your fonts instead of including .eot, .woff2
here : Everythings fonts
you can change .woff2 font to .ttf font
I'm developing a Google Chrome Extension which is injecting a stylesheet into a specific website I defined in manifest.json.
In the stylesheet are webfonts included with #font-face and src: url("chrome-extension://__MSG_##extension_id__/assets/fonts/[...], but __MSG_##extension_id__ doesn't seem to work and webfonts like Font Awesome just end up still showing squares.
manifest.json
"manifest_version": 2,
"content_scripts": [
{
"matches": [
"http://[url].com/*"
],
"css": ["assets/css/main.css"]
}
],
"web_accessible_resources": ["assets/fonts/*", "assets/img/*"]
main.css
#font-face {
font-family: 'FontAwesome';
src: url("chrome-extension://__MSG_##extension_id__/assets/fonts/fontawesome/fontawesome-webfont.eot?v=4.3.0");
src: url("chrome-extension://__MSG_##extension_id__/assets/fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
url("chrome-extension://__MSG_##extension_id__/assets/fonts/fontawesome/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
url("chrome-extension://__MSG_##extension_id__/assets/fonts/fontawesome/fontawesome-webfont.woff?v=4.3.0") format("woff"),
url("chrome-extension://__MSG_##extension_id__/assets/fonts/fontawesome/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
url("chrome-extension://__MSG_##extension_id__/assets/fonts/fontawesome/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal; }
I've already tried hardcoding my Extension ID in the url and it worked on my iMac and displayed Font Awesome correctly, but when I switched to my Macbook and hardcoded the new Extension ID in, it doesn't work anymore, but I'm sure I've did nothing wrong, since I just needed to change the ID. Now I wanted to try __MSG_##extension_id__ but it also doesn't work. Another try to embed the fonts with Base64 also failed. My other webfonts are Roboto and Open Sans included the same way.
It's like the Chrome Extension can't access to the fonts.
I saw the last comment on the question, Same problem 4 years later :D.
I am sure almost everyone already finds out the solution or they have got the things done in their way. But I think this will help others as the same question is being asked again and again.
Answer
const urlFontAwesomeWebFontEot = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.eot')
const urlFontAwesomeWebFontSvg = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.svg')
#font-face {
font-family: 'FontAwesome';
src: url(${urlFontAwesomeWebFontEot});
src: url(${urlFontAwesomeWebFontSvg}) format("svg");
font-weight: normal;
font-style: normal; }
I just created variables for two URLs but you can create as per your requirements.
chrome.runtime.getURL API help to get resource's absolute URL pointing extension
References
Google Chrome extension relative path
https://developer.chrome.com/docs/extensions/reference/runtime/#method-getURL
I extend Dinesh's answer - there is the code that is ready to be pasted into js file:
const urlFontAwesomeWebFontEot = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.eot')
const urlFontAwesomeWebFontSvg = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.svg')
const newFontStyleSheet = document.createElement("style");
newFontStyleSheet.textContent = `
#font-face {
font-family: 'FontAwesome';
src: url(${urlFontAwesomeWebFontEot});
src: url(${urlFontAwesomeWebFontSvg}) format("svg");
font-weight: normal;
font-style: normal; }
`;
document.head.appendChild(newFontStyleSheet);
Just follow below steps:
Lets assume we have a font in fonts folder:
\fonts
font.woff
manifest.json
update your manifest.json with
...
"web_accessible_resources": [
"fonts/*"
],
...
in CSS file provide url chrome-extension://__MSG_##extension_id__/fonts/font.woff
If you don't provide web_accessible_resources permissions, request for font will be blocked (since manifest version 2 including ver 2).
References:
https://developer.chrome.com/docs/extensions/mv2/manifest/web_accessible_resources/
https://developer.chrome.com/docs/extensions/reference/i18n/
I'm using Backbone Boilerplate and I've added the bower Ratchet 2.* dependency, then I'm importing it in my styles/index.css file from it's bower origin folder:
#import "../../vendor/bower/ratchet/dist/css/ratchet.css";
This grabs the file correctly, but for some reason when compressing it's changing the url in my #font-face selector.
The original selector looks like this:
#font-face {
font-family: Ratchicons;
font-style: normal;
font-weight: normal;
src: url("app/fonts/ratchicons.eot");
src: url("app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"),
url("app/fonts/ratchicons.woff") format("woff"),
url("app/fonts/ratchicons.ttf") format("truetype"),
url("app/fonts/ratchicons.svg#svgFontName") format("svg");
After running the grunt task my new optimized style.css for this selector looks like this:
#font-face {
font-family: Ratchicons; font-style: normal; font-weight: normal;
src: url("/app/img/vendor/bower/ratchet/dist/css/app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"),
url("app/fonts/ratchicons.woff") format("woff"),
url("app/fonts/ratchicons.ttf") format("truetype"),
url("app/fonts/ratchicons.svg#svgFontName") format("svg");
}
(line breaks were added for display here)
You'll notice that the entire first line:
src: url("app/fonts/ratchicons.eot");
has been completely stripped out, and the next line should be:
src: url("app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"),
but has become:
src: url("/app/img/vendor/bower/ratchet/dist/css/app/fonts/ratchicons.eot?#iefix") format("embedded-opentype"),
I can't understand or explain why this is happening, but I need it resolved.
I checked the styles section of my gruntfile and it looks like so:
styles: {
// Out the concatenated contents of the following styles into the below
// development file path.
"dist/styles.css": {
// Point this to where your `index.css` file is location.
src: "app/styles/index.css",
// The relative path to use for the #imports.
paths: ["app/styles"],
// Rewrite image paths during release to be relative to the `img`
// directory.
forceRelative: "/app/img/"
}
},
I'm assuming that for some reason the style optimizer is adding the forceRelative url to an original url of ../fonts/fontfile but I can't explain why or what to do.
Help appreciated.