I'm using custom font files with Nuxt project. I tried to add font files to /static/fonts and import them using
font-family: 'coconregular';
src: url('fonts/cocon-regular-font.woff2') format('woff2'),
url('fonts/cocon-regular-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
$cocon: 'coconregular';
.brand-name {
font-family: $cocon;
}
I'm having '#nuxtjs/style-resources' installed and all other variables and SCSS loading is working totally fine but fonts are not loading.
This is my file structure
files screenshot
I can't find a way to add fonts properly neither i don't know how to check if the font is loaded. There aren't any errors.
What is the correct way for Nuxt and SCSS to load fontfiles?
So i finally figured out good workaround. I don't know if this is good or not, but i separated fonts download from anything else. Therefore i added another entrypoint to nuxt.config.js to include fonts stylesheet before other stuff.
css: [
'#/assets/scss/theme/fonts/stylesheet.css',
'#/assets/scss/main.scss'
],
It worked good because My fonts stylesheet for Woff and Woff2 files were generated by font squirrel generator anyway.
Hope this helps you guys
Related
I am usign dompdf with a custom font family - open sans from google fonts
I hae the font locally and set a CSS font face rule.
On my local env (windows) the font on the PDF is working as expected but on the testing enviroment (Linux) it is not loading the custom font and seems to use default font.
Tried setting it manually, tried installing it by load_font.php script, verifies that the folders are writable.
I am out of ideas and any help would be appreciated.
This is my CSS part:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('/fonts/Open_Sans/OpenSans-Regular.eot');
src: url('/fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/Open_Sans/OpenSans-Regular.svg#OpenSans-Regular') format('svg'),
url('/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'),
url('http://app.dev.predictix.net/fonts/Open_Sans/OpenSans-Regular.woff') format('woff'),
url('/fonts/Open_Sans/OpenSans-Regular.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
The problem was actually on the CSS Reset code i have on the page.
On the reset code i had:
font:inherit
DomPdf took that as the font family and was searching for a font family of inherit and this is why it was not loading my font. Once i disabled that css reset rule my font was disblayed as needed.
Thanks also to #Ewout that give me some direction here:
https://stackoverflow.com/a/20044474/2022193
I have a scss file with font import implemented this way:
#import url(https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700&subset=latin-ext,cyrillic);
I understand that using CDN gives advantages in caching for user but this is internal site and it could be used on server without access to the wide web. And I'm not sure that user machine will have access to the Internet too. So I want to serve fronts with other pages static files.
Is there a way in SCSS to import fonts from the some directory on server? Something like:
#import dir(/path/to/fonts/file)
Or SCSS has not this feature?
As far as I know you can't import fonts using #import in SCSS. You can include fonts using #font-face. For example:
#font-face {
font-family: 'Open Sans';
src: url(path/to/file) format(Example: 'truetype' or 'opentype' depending on the file extension of your font);
}
// USAGE
body {
font-family: 'Open Sans', sans-serif;
}
Usually it's used to import CSS fragments or files and not fonts.
Try this workaround if you are using Ruby SASS/SCSS and try without brackets.
#import "https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700&subset=latin-ext,cyrillic.css";
I put a .css behind it. Works for me with Ruby SASS/SCSS but not with LibSass though.
it's a bit late but you can use the following format with libsass for external imports
#import url("http...");
Try this
#import url('https://fonts.googleapis.com/css2?family=PT+Sans+Caption&display=swap');
use font-family like
font-family: 'PT Sans Caption', sans-serif;
I come across this problem all the time where my fonts work in every browser except Firefox. I have multiple sites that use multiple fonts all hosted on the same Cloudfront instance. Searching is pointless because every result is about setting up my CORS settings which work perfectly fine for every other browser and font file.
Currently I have a font file that shows up in the network tab as a 200 request and going directly to the file downloads it for me but I still get
downloadable font: download failed (font-family: "veneerregular" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://example.com/fonts/CZ/veneer.ttf
in the console.
Here is my #font-face declaration
#font-face {
font-family: 'veneerregular';
src: url('/fonts/CZ/veneer.eot');
src: url('/fonts/CZ/veneer.eot?#iefix') format('embedded-opentype'),
url('/fonts/CZ/veneer.ttf') format('truetype'),
url('/fonts/CZ/veneer.svg#veneerregular') format('svg');
font-weight: normal;
font-style: normal;
}
I have also run this program against the ttf fonts to flip an embeddable flag so they will work in IE http://carnage-melon.tom7.org/embed/
The only solution that seems to work is to provide data-uris for the fonts but that creates HUGE css files which I don't want. Is there something I am missing? where else should I be looking? Seems like every 2 weeks some font stops working on firefox.
I have absolutely no succes in getting IE 10 to display custom fonts. Has anyone else a solution for this? I can see a few shout-outs on the net that others have trouble with their fonts in IE 10, but no solutions or confirmed bugs to be found.
Anyone with the same experience or solution?
This is what I have right now, and it works well in IE before 10, Chrome and Safari:
#font-face {
font-family: "LCD";
src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.ttf');
}
<!--[if IE]>
<style type="text/css">
#font-face {
font-family: "LCD";
src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.eot');
}
</style>
<![endif]-->
I have tried to substitute with font files in other formats woff, ott etc. but no luck at all with that.
The answer which hinted at font-squirrel made it Work.
Now the working markup (for IE 10) is:
#font-face {
font-family: "LCD";
src: url('/Public/Fonts/quartz_regular-webfont.eot');
src: url('/Public/Fonts/quartz_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/Public/Fonts/quartz_regular-webfont.woff') format('woff'),
url('/Public/Fonts/quartz_regular-webfont.ttf') format('truetype'),
url('/Public/Fonts/quartz_regular-webfont.svg#quartzregular') format('svg');
font-weight: normal;
font-style: normal;
}
I assume this is in an HTML file, due to the HTML comments and style elements...if not, look into that.
Beyond that, just use the #font-face generator
Is it possible that IE10 does not render web fonts if Security Mode is activated? After deactivating (internet options - security) my websites were displayed correctly ...
I had the font-squirrel #font-face working in everything but IE, myproblem though was that the .woff was the only thing not included in IIS mime-types on my server. That might help someone who's also ended up on this question.
I just came across a client reporting he was unable to see the webfont on his website. Ends up that the "High" security level (in IE options) blocks web fonts by default. You can create a custom security level that is basically "High" but still enables web-fonts. Or just turn it down to medium-high.
The font-face not updated on IE 10 -> reference , you can use it same IE-9
you can learn how use font-face here
i think you include all type of your font...
I used this here:
http://www.impressivewebs.com/ie10-css-hacks/
More specifically:
#media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
}
By using this we can just pop in a nice alternative font and still have sexyness in the other browsers with open fonts.
Try the fonts here:
http://cssfontstack.com
Must add that the fontface generator doesn't fix this for all fonts. When using the font Helvetica Neue Medium Condensed (HelveticaNeueLTW1G-MdCn) for instance. I'm using multiple fonts on a website. They all work with the fontface generator, except that Helvetica-font.
First off I would like to mention that I probably read 50 other topics on this problem but nothing I tried works for me.
I am using font-awesome-rails gem to integrate FontAwesome with my rails 3.1 app.
In Development, icons are loading fine in all 3 major browsers (FF, Chrome and IE7,8).
In Production (Heroku), icons are only loading in FF and Chrome. I get square boxes in IE7 & 8.
I can't really say if this is a browser issue because it works on my local machine, but also can't really say it is a deployment issue because it works in other browsers.
Any ideas?
Update:
Below is the CSS generated by asset pipeline. Notice how .woff and .tff files have digest hash appended to them, but that is not the case for .eot & .svg files. This could explain why fonts are not loaded on IE in production.
Is there anything I can do to fix this or is this something that the gem owner should fix?
#font-face {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
src: url("/assets/fontawesome-webfont.eot?#iefix") format("eot"),
url("/assets/fontawesome-webfont-2b313d88274b814fa936513279e62429.woff") format("woff"),
url("/assets/fontawesome-webfont-db4d858c72934d23138b334666f3787f.ttf") format("truetype"),
url("/assets/fontawesome-webfont.svg#FontAwesome") format("svg");
}
I added an additional style as such
#font-face {
font-family: "FontAwesome";
src: asset-url('fontawesome-webfont.eot', font);
font-weight: normal;
font-style: normal;
}
Rails correctly applies digest hash to this asset and IE picks it up.