:root {
--icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
}
#font-face {
font-family: 'iconfont';
src: url(var(--icon-url)'.eot');
src: url(var(--icon-url)'.eot?#iefix') format('embedded-opentype'), url(var(--icon-url)'.woff') format('woff'), url(var(--icon-url)'.ttf') format('truetype'), url(var(--icon-url)'.svg#iconfont') format('svg');
}
Module not found: Error: Can't resolve './var(--icon-url' in 'Users/xxx/xxx'
if you want to specify a URL in a custom property, you need to write out the entire url() expression, and substitute that entire expression:
:root {
--url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}
body {
background: var(--url);
}
CSS variable not supported in src or src's url.
Found this considerably after the fact, but you tagged this as sass in addition to css. In SASS, you CAN include this as a variable. You have to pass the variable with special syntax, though.
Instead of just $url you have to pass it like so: #{$url}. Then SASS will know to include the string directly.
Example:
/* Set variable in SASS (will not be CSS variable) */
$icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
#font-face {
font-family: 'iconfont';
src: url('#{$icon-url}.eot');
src: url('#{$icon-url}.eot?#iefix') format('embedded-opentype'),
url('#{$icon-url}.woff') format('woff'),
url(var(--icon-url)'.ttf') format('truetype'),
url('#{$icon-url}.svg#iconfont') format('svg');
}
Mind you, at this point, you could just use woff2 and woff, so this may be less needed.
See https://caniuse.com/mdn-css_at-rules_font-face_woff
:root {
--icon-url: url('//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi');
}
Related
here is the page where I want to add custom font http://pgkweb.ru/temp/1/index.html
So the fonts are:
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.ttf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.woff
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.otf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadPro-Cond.eot
And I call them from css (http://pgkweb.ru/temp/1/include/style.css):
/*FONTS*/
#font-face {
font-family: MyriadProCond;
src: url(include/MyriadProCondRegular/MyriadProCondRegular.ttf); /* Путь к файлу со шрифтом */
src: url(include/MyriadProCondRegular/MyriadProCondRegular.woff);
src: url(include/MyriadProCondRegular/MyriadProCondRegular.otf);
src: url(include/MyriadProCondRegular/MyriadPro-Cond.eot);
}
*, body, p,h3,h4 {
font-family: 'MyriadProCond', Arial, sans-serif;
color: #fff;
}
But as I see in FireFox code explorer it doesn't works (line-through). But why?
Your webfonts are inside the "include" folder, as is the stylesheet, i.e. they are both in the same folder, so you have to erase the folder name from the file path in the links, like:
src: url("MyriadProCondRegular/MyriadProCondRegular.ttf");
instead of
src: url("include/MyriadProCondRegular/MyriadProCondRegular.ttf");
the same with all the other URLs
Seems like you are missing quotes around each url, the syntax is also a little off:
#font-face {
font-family: MyriadProCond;
src: url('include/MyriadProCondRegular/MyriadPro-Cond.eot');
src: url('include/MyriadProCondRegular/MyriadProCondRegular.woff') format('woff'), /* Путь к файлу со шрифтом */
url('include/MyriadProCondRegular/MyriadProCondRegular.ttf') format('truetype'),
url('include/MyriadProCondRegular/MyriadProCondRegular.otf') format('otf');
}
See here: https://css-tricks.com/snippets/css/using-font-face/
If this doesn't work, check that the URLs are correct and the fonts are being downloaded (no 404 errors in the network tab).
In CSS, I'm linking to two local fonts. Only one is being recognized currently and I really have no idea what I'm doing wrong.
#font-face {
font-family: 'The Rainmaker';
src: url('The Rainmaker.otf');
}
#font-face {
font-family: 'Timeline';
src: url('Timeline.ttf');
}
I'm looking for including fonts from CSS files in Symfony using Assetic. The issue is the browser fails to load these fonts.
#font-face {
font-family: 'Corbert'; /*a name to be used later*/
src: url('fonts/Corbert-Regular.otf') format('opentype'),
url('fonts/Corbert-Regular.woff') format('woff'),
url('fonts/Corbert-Regular.ttf') format('truetype');
}
My path structure is
...
+-src/
| +-MyCompany/
| +-MyBundle/
| +-Resources/
| +-public/
| +-css/
| +-fonts/
My path linking the CSS files is
What am i doing wrong ?
I found the solution :
Just put in your Document.html.twig where you link your css files:
<style type="text/css">
#font-face {
font-family: 'Corbert';
src: url({{asset('fonts/Corbert-Regular.otf')}}) format('opentype'),
url({{asset('fonts/Corbert-Regular.woff')}}) format('woff'),
url({{asset('fonts/Corbert-Regular.otf')}}) format('truetype');
}
</style>
Indeed if you put that in the css file, symfony doesn't seem to recognize the code. It's the same for the picture :
<style type="text/css">
body, html{
background-image:url({{ asset('images/wallpaper.png') }});
}
<style>
Nice Week-end !
I used #font-face on my website for 2 fonts.
One of them stopped working - I checked everything, tried different syntax but nothing brings it back.
Here is my CSS:
#font-face
{
font-family: 'gotham';
src:url(http://www.odednaaman.com/fonts/gothambook.eot) format('eot');
src:url(http://www.odednaaman.com/fonts/gothambook.ttf) format('truetype'), url(http://www.odednaaman.com/fonts/gotham-book.otf) format('opentype'), url(http://www.odednaaman.com/fonts/gothambook.woff) format('woff'), url(http://www.odednaaman.com/fonts/gothambook.eot?iefix) format('embedded-opentype');
}
#font-face
{
font-family: 'yank';
src: url(http://www.odednaaman.com/fonts/yank.ttf) format('truetype');
}
The "Yank" font still works perfectly. using chrome for QA.
website: www.odednaaman.com
any ideas?
Thanks,
Oded
The src should be only once but you're having two times in your first #font-face. So, use this:
#font-face
{
font-family: 'gotham';
src:url(http://www.odednaaman.com/fonts/gothambook.eot) format('eot'),
url(http://www.odednaaman.com/fonts/gothambook.ttf) format('truetype'),
url(http://www.odednaaman.com/fonts/gotham-book.otf) format('opentype'),
url(http://www.odednaaman.com/fonts/gothambook.woff) format('woff'),
url(http://www.odednaaman.com/fonts/gothambook.eot?iefix) format('embedded-opentype');
}
#font-face
{
font-family: 'yank';
src: url(http://www.odednaaman.com/fonts/yank.ttf) format('truetype');
}
From the console of Chrome:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.odednaaman.com/fonts/ygothambook.woff
So it seems that you need to upload the .woff file.
I have the following code:
#font-face {
font-family: 'icomoon';
src:url('../fonts/icons/icomoon.eot?2hq9os');
src:url('../fonts/icons/icomoon.eot?#iefix2hq9os') format('embedded-opentype'),
url('../fonts/icons/icomoon.woff?2hq9os') format('woff'),
url('../fonts/icons/icomoon.ttf?2hq9os') format('truetype'),
url('../fonts/icons/icomoon.svg?2hq9os#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
now, the problem is that I'm forced to use multiple icon sets (from multiple files) and for my convinience and clean structure I want to have all those icons (from all the files) only within the one 'icomoon' font-face.
For example if:
../fonts/icons/icomoon.* includes icon-1 / icon-2 and icon-3
and
../fonts/icons/customicon.* includes icon-4 / icon-5
how can I include all of them to have within the
#font-face {
font-family: 'icomoon';
-- include multiple files --
}
div#selector { // will have con-1 / icon-2 / icon-3 / icon-4 / icon-5
font-family: icomoon;
}
is that possible at all?
I think that for this purpose you could use IcoMoon PLugin.
With it you can create a custom font combining FontAwesome with your icons and much more.