I want to import fonts into CSS file into JSF page.
This code works fine:
src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
But this is not working:
src: local('Roboto Light'), local('Roboto-Light'), url("#{resource['fonts/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2']}") format('woff2');
Any idea where I'm wrong?
Related
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"
}
}
},
// ...
}
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 %>'
}
}
},
my tree is like
public/system/lib
angular
bootstrap
fonts
font-awesome
fonts
jquery
my goal is put all the fonts folders
in my public/build/fonts
so I've tried with:
copy: {
fonts: {
cwd: 'public/system/lib/**/fonts/',
src: '*',
dest: 'public/build/fonts',
expand: true
}
},
but it doesn't work.
Can you help me please ?
Try doing it like this:
cwd: ['public/system/lib/bootstrap/fonts/*', 'public/system/lib/font-awesome/fonts/*'],
I am trying to setup an angular app using Susy and Breakpoint instead of bootstrap.
I am using yeoman to run angular-generator. During the install, instead of saying Yes to bootstrap, i say No. This all goes well and my app runs in the browser fine with 'grunt serve'.
Next i run: bower install susy and bower install breakpoint - both install fine and i can see them in the bower_components folder.
I then import them by manually adding #import reference to main.scss like this:
// bower:scss
#import "../bower_components/susy/sass/_susy.scss";
#import "../bower_components/breakpoint/breakpoint/_breakpoint.scss";
// endbower
And also in the Gruntfile.js i have added require: 'susy' to compass like so:
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: '<%= yeoman.app %>/bower_components',
httpImagesPath: '/images',
httpGeneratedImagesPath: '/images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n',
**require: 'susy'**
},
As outlined on the susy website: http://susydocs.oddbird.net/en/latest/install/
Ok, that's all well and good, but here's the problem.. because i have manually adding them to my main.scss file, everytime i stop and start the app, it deletes the #import references in my SCSS file. i don't know how to add them dynamically / or properly to the gruntfile.js so that they get compiled and saved permenantly. Each time i stop and start grunt, both imports are removed from main.scss leaving me with this:
// bower:scss
// end bower
Has anyone else had this same problem, if so what's the solution?
Any help would be appreciated.
thanks
~declan
Try moving the #import statements outside of the bower comments. So, instead of:
// bower:scss
#import "../bower_components/susy/sass/_susy.scss";
#import "../bower_components/breakpoint/breakpoint/_breakpoint.scss";
// endbower
try:
// bower:scss
// endbower
#import "../bower_components/susy/sass/_susy.scss";
#import "../bower_components/breakpoint/breakpoint/_breakpoint.scss";
That worked for me.
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.