#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
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>
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..
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>
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?