When I use the bin/watch-storefront.sh my custom font does not load properly.
My fonts are defined like the default font in a own file like
/* /MyTheme/src/Ressources/app/storefront/src/scss/vendor/_outfit-fontface.scss */
...
#font-face {
font-family: 'Outfit';
src: url('#{$app-css-relative-asset-path}/font/Outfit/Outfit-SemiBold.woff2') format('woff2'),
url('#{$app-css-relative-asset-path}/font/Outfit/Outfit-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
...
When I run bin/console theme:compile && bin/console assets:install The fonts get loaded just fine on the regular website.
The URL of the font files is like https://my-site.de/theme/f9cf8c2bbd24d1ca2941b5120cde3278/assets/font/Outfit/Outfit-Regular.woff2
But when I run the hot-proxy via bin/watch-storefront the compiled CSS font path is like http://my-site.de:9998/bundles/storefront/assets/font/Outfit/Outfit-Bold.woff2
I looked into the directories and my fonts are not located in storefront/assets but in mythemeplugin/assets
The wrong path seems to be exported to /var/theme-entry.scss where it already sets the $app-css-relative-asset-path to
$app-css-relative-asset-path: '/bundles/storefront/assets'; $sw-asset-public-url: '';
I tried to replace the variable $app-css-relative-asset-path with a hard-coded ../assets/ in my *-fontface.scss but this will cause a compile error in the hot-proxy.
What can I do to make the fonts load properly in the hot-proxy and the normal site?
See this issue on GitHub with a possible workaround.
Adding to the description, you'll have to change the type of your style property in theme.json to an object:
{
// ..
"style": {
"app/storefront/src/scss/overrides.scss": [],
"#Storefront": [],
"app/storefront/src/scss/base.scss": {
"resolve": {
"my-theme-env": "app/storefront/env/default"
}
}
},
// ...
}
Related
In the gruntfile.js i wrote:
// Css Purge
css_purge: {
options: {
"verbose": false,
"no_duplicate_property": true,
},
files: {
src: 'css/bigfile.css',
dest: 'css/purged.css'
},
}
Just to test the bigFile.css is :
body {color: red;}
body, p {color:red;}
p {color: red; font-size: 24px;}
#test p {color: red;}
So terminal message is:
Running "css_purge:files" (css_purge) task
"css/" has been created
Thu May 12 2016 01:33:27 GMT-0400 (EDT) Success! css/bigfile.css : css/purged.css
But the new file purged.css is the same as bigFile.css
Ok just figure it out. It removed only identical rules. So if I have exactly same rule it will be removed in output file. Is there a tool that remove extra css like in my exemple file body,p {color:red;} is extra code since I already have body {color:red;} ?
I want to compile the less file in public folder of expressjs application.
Dependencies which I am using are
"devDependencies": {
"ejs": "^2.3.1",
"express": "^4.10.6",
"mysql": "^2.5.4"
},
"dependencies": {
"less": "^2.5.1",
"less-middleware": "^2.0.1"
}
Content in styles.less file
header {
background-image: url('../img/bg.png');
height: 380px;
input#searchBox {
width: 100%;
height: 70px;
}
}
Server file looks like below
var express = require('express'); // call express
var app = express(); // define our app using express
app.use(require('less-middleware')('public'));
// Public folder
app.use(express.static('public'));
The less file is not modified while running it on server.
Remote Address:127.0.0.1:3000
Request URL:http://localhost:3000/css/styles.less
Request Method:GET
Status Code:304 Not Modified
What is the error here.
Directory structure:
Edit:
header {
background-image: url('../img/bg.png');
height: 380px;
#cloud-tag span {
color: #fff;
font-weight: 800;
letter-spacing: 2px;
}
#cloud-tag_word_0 {
font-size: 100px !important;
}
}
I added this css in less file and it is being sent to browser in same format without being compiled.
You must request the css file, not the less file, in your case http://localhost:3000/css/styles.css not http://localhost:3000/css/styles.less.
The middleware will compile the less file to the one you requested.
Looks like the way you initilize the middleware to express might be the issue . Use "__dirname + '/public'" to denote the folder.
I've just installed Grunt and grunt-svgstore and am using it to compile my folder of SVG's into one application.svg where each icon has a unique id that I can reference using:
It works fine for some icons, but for others, part of their shapes turn black. In the case of the ruby logo I am linking to above, it shows like: http://cl.ly/image/0X2J0f3i0C1X/Screen%20Shot%202014-08-03%20at%2011.02.47.png
The actually SVG file can be found here: http://cl.ly/2k012T020d2S/ruby-logo.svg
If I open the ruby-logo.svg file in illustrator, it looks fine. I have rexported it, ensured all settings are correct and it still happens.
Any suggestions?
Thanks,
Neil
Solved by adding the following styles to the application.svg import at the top of my document:
width: 0;
height: 0;
visibility: hidden;
Use the "style" option instead..
eg:
svgstore: {
options: {
prefix : 'icon-', // This will prefix each ID
svg: {
viewBox : '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg',
style: 'display:none;' // This line might help you!
},
cleanup: ['fill','stroke']
},
default: {
files: {
'<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.svg': '<%= app_files.svgIcons %>'
}
}
},
I am attempting to use a font generated from Font Squirrel as the base font for Twitter Bootstrap (compiled from the LESS files). I am using Express.js with Node.js, and have included the font files within the font directory, i.e.
myapp
|_ public
|_ stylesheets
|_ font
I have "installed" Font Awesome by changing the variables in bootstrap.less and have it working, so I know the directory structure is correct. With the custom font files in the font directory, where do I go next? Do I need to make a my-custom-font.less file that contains the #font-face declarations, or do I need to declare this within one of the bootstrap LESS files? I am aware that the base font is declared in variables.less via the #baseFontFamily attribute, but as I described I am not really sure how to declare this to be my custom font family. Thanks in advance.
EDIT
Below is the snippet of code I am attempting to use:
#ChatypePath: "font";
#font-face {
font-family: 'chatypeb2.1regular';
src: url('#{ChatypePathPath}/chatypeb2.1regular-webfont.eot?v=3.0.1');
src: url('#{ChatypePathPath}/chatypeb2.1regular-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('#{ChatypePathPath}/chatypeb2.1regular-webfont.woff?v=3.0.1') format('woff'),
url('#{ChatypePathPath}/chatypeb2.1regular-webfont.ttf?v=3.0.1') format('truetype');
}
NOTE: There is something erroneous here.
UPDATE:
Correct declaration:
#chatypeFontFamily: "ChatypeB2.1ThinThin", "Courier New", monospace;
#font-face {
font-family: 'ChatypeB2.1ThinThin';
src: url('font/chatypeb2.1thin-webfont.eot');
src: url('font/chatypeb2.1thin-webfont.eot?#iefix') format('embedded-opentype'),
url('font/chatypeb2.1thin-webfont.woff') format('woff'),
url('font/chatypeb2.1thin-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I would try something like this in the variables.less:
#customFontFamily: "Custom", "Courier New", monospace;
/* here you should use whatever #font-face squirrel generated in the stylesheet.css */
#font-face {
font-family: 'Custom';
font-style: normal;
font-weight: 400;
src: local('Custom'), local('Custom-Regular'), url(path.to.font.file.woff) format('woff');
}
you can also put the font-face into a separate file and then using #import, but I don't think it's necessary. And then you can call the #cusomFontFamily and use it as #baseFontFamily, or wherever you want.
I downloaded two font kits from Font Squirrel, and they work everywhere except on iphone/ipad. This makes me think there is a problem with the svg file.
I have another font downloaded from font squirrel on a separate site (through the same host) that is working great on my mobile devices, and I cannot see what the difference is between them that would make the font work on one site but not another.
My host recognizes svg (says so here: http://wiki.dreamhost.com/MIME_Types), so i don't think it is a problem with the MIME type. i don't know much about this though and might be missing something.
I have also checked the id in my svg files, and they match the #id in my #font-face declarations:
#font-face {
font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('BebasNeue-webfont.woff') format('woff'),
url('BebasNeue-webfont.ttf') format('truetype'),
url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OswaldStencilRegular';
src: url('Oswald-Stencil-webfont.eot');
src: url('Oswald-Stencil-webfont.eot?#iefix') format('embedded-opentype'),
url('Oswald-Stencil-webfont.woff') format('woff'),
url('Oswald-Stencil-webfont.ttf') format('truetype'),
url('Oswald-Stencil-webfont.svg#OswaldStencilRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Does anyone know what the problem could be here?