I am using Parcel to pack SCSS into using postCSS.
My postCSS config has only autoprefixer and tailwind.
My scss file has this:
#font-face {
font-family: NBE;
src: url('../fonts/NBE-Regular.eot');
src: url('../fonts/NBE-Regular.eot#iefix') format('embedded-opentype'),
url('../fonts/NBE-Regular.woff2') format('woff2'),
url('../fonts/NBE-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
but it outputs
#font-face {
font-family: NBE;
src: url("/NBE-Regular.f90b15ca.eot");
src: url("/NBE-Regular.f90b15ca.eot#iefix") format("embedded-opentype"),
url("/NBE-Regular.6b2ab3ea.woff2") format("woff2"),
url("/NBE-Regular.2ec20d61.woff") format("woff");
font-weight: normal;
font-style: normal;
}
Note the location under url(), so get a 404 for the font file.
I don't know what this hash or version thing is
And why does it change the URL like that?
UPDATE:
I noticed that all those files are copied to dist folder, however that folder is not the root, so URL is still wrong..
Related
I'm using this snippet for adding a Font Awesome icon in front of H1 headings:
h1:before {
content: "\f192 ";
font-family: "FontAwesome";
color: blueviolet;
}
How to adapt it for using a locally served (on site's server) SVG icon instead?
(that is uploaded in WP Media Library and using SVG Support plugin)
If your icon needs to remain a separate file, you can set it as a background image.
h1:before {
display: inline-block;
background-image: url(resources/icon.svg)
}
Otherwise you can embed your icon as a data url.
h1:before {
display: inline-block;
background-image: url(data:image/svg+xml,...etc...)
}
Update
Working example:
h1:before {
content: " ";
display: inline-block;
width: 0.7em;
height: 0.7em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
<h1>This is a title</h1>
Fonts are not visible for my custom script chrome extension.
Folder structure:
assets
-fonts
content-app
manifest.json
manifest.json:
(...)
"content_scripts": [
{
"all_frames": false,
"js": ["/content-app/runtime.js", "/content-app/polyfills.js", "/content-app/styles.js", "/content-app/main.js"],
"matches": ["https://*/*"],
"match_about_blank": true,
"run_at": "document_idle"
}
],
"web_accessible_resources": [
"assets/fonts/icons.ttf",
"assets/fonts/icons.eot",
"assets/fonts/icons.svg",
"assets/fonts/icons.woff"
],
scss:
$icomoon-font-family: 'icons' !default;
$icon-equalizer: '\e912';
#font-face {
font-family: '#{$icomoon-font-family}';
src: url('chrome-extension://__MSG_##extension_id__/assets/fonts/#{$icomoon-font-family}.eot?64agaf');
src: url('chrome-extension://__MSG_##extension_id__/assets/fonts/#{$icomoon-font-family}.eot?64agaf#iefix') format('embedded-opentype'),
url('chrome-extension://__MSG_##extension_id__/assets/fonts/#{$icomoon-font-family}.ttf?64agaf') format('truetype'),
url('chrome-extension://__MSG_##extension_id__/assets/fonts/#{$icomoon-font-family}.woff') format('woff'),
url('chrome-extension://__MSG_##extension_id__/assets/fonts/#{$icomoon-font-family}.svg?64agaf##{$icomoon-font-family}') format('svg')
format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^='icon-'],
[class*=' icon-'] {
font-family: '#{$icomoon-font-family}' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-equalizer {
&:before {
content: $icon-equalizer;
}
}
If I open chrome url with: chrome-extension://xxxxx/assets/fonts/icons.ttf, the file will be downloaded properly so it seems ok, but when I add some code to my content script like:
<span class="icon-equalizer"></span>
then nothing happens (I can see '' only). Any idea?
Because of many reasons I use shadow-root, and you can find the code from that element:
#shadow-root
<style>
#font-face{font-family:"icons";src:url("chrome-extension://__MSG_##extension_id__/assets/fonts/icons.eot?64agaf");src:url("chrome-extension://__MSG_##extension_id__/assets/fonts/icons.eot?64agaf#iefix") format("embedded-opentype"),url("chrome-extension://__MSG_##extension_id__/assets/fonts/icons.ttf?64agaf") format("truetype"),url("chrome-extension://__MSG_##extension_id__/assets/fonts/icons.woff") format("woff"),url("chrome-extension://__MSG_##extension_id__/assets/fonts/icons.svg?64agaf#icons") format("svg") format("svg");font-weight:normal;font-style:normal;font-display:block}[class^='icon-'],[class*=' icon-']{font-family:"icons" !important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-equalizer:before{content:""}
(...)
</style>
#font-face {
font-family: 'Futura Std';
src: url('../fonts/FuturaStd-Light.eot');
src: url('../fonts/FuturaStd-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/FuturaStd-Light.woff') format('woff'),
url('../fonts/FuturaStd-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
List item
Am getting issue to loading fonts. My path is fine but still not loading
fonts in IE all versions
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?