I have created a javascript direflow application. I am trying to load a local font but haven't been able to.
Below are the details and code snippets I have applied.
Folder Structure
font.css
#font-face {
font-family: 'MyLocalFont';
src: local('MyLocalFont'),
url('./fonts/MyLocalFont.woff') format('woff'),
url('./fonts/MyLocalFont.woff2') format('woff2');
}
direflow-components/testing-component/index.js
plugins: [
{
name: 'font-loader',
options: {
custom: {
families: ['MyLocalFont'],
urls: ['/fonts.css']
},
},
},
],
App.css
.header-title {
font-size: 34px;
color: #5781C2;
font-family: 'MyLocalFont';
}
The font files doesn't load. Please help.
Note: Built a react app using create-react-app there with #font-face changes the fonts load. Something with direflow is not working.
I resolved the issue seems like the plugin font-loader is not required. I removed it from direflow-components/testing-component/index.js.
Another change I made is removed the single quotes from the font-family.
App.css
.header-title {
font-family: MyLocalFont;
}
Related
What does not work
I am trying to add some custom local fonts into my Electron React App, but i would like to do it without installing the fonts on my computer.
Current partial solution
The only way, which works for me, it is to install the fonts on my computer, but i would like to find a better solution.
I placed my fonts files into:
assets/fonts/
And i tried to use it in my scss file located in:
src/renderer/scss/commons/_fonts.scss
In this way:
#font-face {
font-family: 'Bariol Regular';
font-style: normal;
font-weight: normal;
src: local('Bariol Regular'),
url('/assets/fonts/Bariol-Regular.ttf') format('ttf');
}
These are my current Electron versions
"electron": "^15.1.0",
"electron-builder": "^22.11.7",
"electron-devtools-installer": "^3.2.0",
"electron-notarize": "^1.1.1",
"electron-rebuild": "^3.2.3",
How html has been loaded into electron:
new HtmlWebpackPlugin({
filename: path.join('index.html'),
template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true,
},
isBrowser: false,
env: process.env.NODE_ENV,
isDevelopment: process.env.NODE_ENV !== 'production',
nodeModules: webpackPaths.appNodeModulesPath,
}),
The React App component has been mounted into the index.ejs file on the
<div id="root"></div>
And the scss file which contains the fonts rule, has been imported into the App.tsx file.
import './App.global.scss';
I would be grateful if someone could help me.
And i hope this could help someone else.
Thank you!
It's hard to tell how similar our setup is, but hopefully this helps someone.
My issue was putting the fonts in my public folder when they're supposed to be under src.
I made a fonts folder under src, then I declared the font in a css file. e.g:
/* src/index.css */
#font-face {
font-family: 'KleeOne';
src: url('./fonts/KleeOne-SemiBold.ttf');
}
After that, I imported the css in my index.js and it worked:
/* src/index.js */
import './index.css';
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
users.scss
#font-face {
font-family: scriptina;
src: asset-url('scriptina.ttf')
}
.script {
font: scriptina, cursive;
}
Which generates
#font-face {
font-family: scriptina;
src: url(/scriptina.ttf);
}
/* line 18, C:/Users/Chloe/workspace//app/assets/stylesheets/users.scss */
.script {
font: scriptina, cursive;
}
But http://localhost:3000/scriptina.ttf generates
Routing Error
No route matches [GET] "/scriptina.ttf"
$ ls app/assets
config images javascripts scriptina.ttf stylesheets
Rails 5
Reference: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
One method (outlined here) would be to add a fonts folder to app/assets, and then add it to the folders that your app will look for assets in by editing config/application.rb:
# config/application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
Then move scriptina.ttf into app/assets/fonts and your asset-url helper will then be referencing a valid path to your font.
The variable $font-family-base in Ionic2 is not working.
In the app.variable.scss file I added a new value to it, but the old value remains.
Other variables like $font-size-base is working fine
Those are my gulp tasks for building www:
gulp.task("fonts", function () {
return copyFonts({
src: [
"app/fonts/**/*.+(eot|ttf|woff|woff2|svg)"
]
});
});
gulp.task("sass", function () {
return buildSass({
sassOptions: {
includePaths: [
"node_modules/ionic-angular",
"node_modules/ionicons/dist/scss"
]
}
});
});
What am I missing?
That is my font-faces
#font-face {
font-family: "Maven Pro";
font-style: normal;
font-weight: 400;
src: local("Maven Pro"), local("Maven-Pro-Regular"), url("#{$font-path}/MavenPro-Regular.ttf") format("truetype");
}
#font-face {
font-family: "Maven Pro";
font-style: normal;
font-weight: 500;
src: local("Maven Pro Medium"), local("Maven-Pro-Medium"), url("#{$font-path}/MavenPro-Medium.ttf") format("truetype");
}
#font-face {
font-family: "Maven Pro";
font-style: normal;
font-weight: 700;
src: local("Maven Pro Bold"), local("Maven-Pro-Bold"), url("#{$font-path}/MavenPro-Bold.ttf") format("truetype");
}
#font-face {
font-family: "Maven Pro";
font-style: normal;
font-weight: 900;
src: local("Maven Pro Ultra Bold"), local("Maven-Pro-Regular-Ultra-Bold"), url("#{$font-path}/MavenPro-Black.ttf") format("truetype");
}
This font-faces are in my app.scss file which is referenced in my app.core.scss
app.core.scss:
// http://ionicframework.com/docs/v2/theming/
// App Shared Imports
// --------------------------------------------------
// These are the imports which make up the design of this app.
// By default each design mode includes these shared imports.
// App Shared Sass variables belong in app.variables.scss.
#import "../app";
#import "../users/sus/sus";
#import "../users/sus/home/home";
#import "../users/sus/subjects/german/german";
#import "../users/sus/subjects/math/math";
UPDATE:
If I do it using specific device sass variable i.e:
$font-family-md-base
$font-family-ios-base
$font-family-wp-base
Tha is a wird behavior, but I guess the $font-family-base has to be set in a specific order or file, what I still didn't figure out.
I've just asked Mike (from Ionic Team) and he told me:
$font-family-ios-base is for when it is on an ios device
And the same applies for
$font-family-md-base
and
$font-family-wp-base
But I think the key is that:
$font-family-base is when it's neither ios or md
I think this explains the behaviour you were talking about. So in your case you would need to change the value of that font in
$font-family-md-base
$font-family-ios-base
$font-family-wp-base
or any of them to make it work.
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/