I want to use Font Awesome 5 in my Nativescript-Angular app. I followed below article and did everything same but I always getting icon as "?" for iOS and "X" for android.
Nativescript Version - 6.5, Angular Version - 8.0
https://medium.com/alexonozor/fontawesome-5-and-nativescript-4-2-angular-ca29826f9346
Steps followed:-
Downloaded Font-Awesome v5.1.15 from "https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself"
A new folder created with name "fonts" in my application and kept it under src folder. Copied all ttf files inside newly created folder. Below is the screenshot:-
Add lines in app.css and use font-awesome 5 in HTML as mentioned below:-
/*app.css*/
.far {
font-family: Font Awesome 5 Free, "fa-regular-400";
font-weight: 400;
}
.fab {
font-family: Font Awesome 5 Brands, fa-brands-400;
font-weight: 400;
}
.fas {
font-family: Font Awesome 5 Free, fa-solid-900;
font-weight: 900;
}
/*html*/
<Image src="font://" stretch="none" class="fas"></Image>
<Label text="" class="far"></Label>
<Label text="" class="fab"></Label>
It is not returning the actual image. If I follow the same steps in Nativescript Playground then it is working fine but I cant make it work in VS Code.
Please help me here.
Try to add double quote around the font names and filenames.
/*
File name: fa-solid-900.ttf
Font name: Font Awesome 5 Free
*/
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
font-weight: 900;
}
If it still does not work you should consider using the nativescript-fonticon located here. It makes it easier to use, same way as the Web way.
Related
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
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'm having trouble figuring out why Arial Narrow is displaying correctly for some Firefox users on mac and not others. Here is the link: http://teknikor.bethmotta.com/ (see navigation font)
My code is:
font-family: "Arial Narrow", Arial sans-serif; font-weight:500;
font-stretch:condensed;
I even tried adding a font reset:
font-family: inherit; font-stretch:inherit; font-style:inherit;
font-family: "Arial Narrow", Arial sans-serif; font-weight:500;
font-stretch:condensed;
And I tried to target Firefox specifically:
#media screen and (-webkit-min-device-pixel-ratio:0){
ul.navcontainer li {
font-family: inherit; font-stretch:inherit; font-style:inherit;
font-family:"Arial Narrow", Arial, Helvetica, sans-serif; font-stretch:condensed;}
}
I'm not sure why it works for some Firefox mac users and not for others. All tested computers are operating Firefox 19. In the computers where Arial Narrow is not working the font is defaulting to Times not Arial.
I did notice that on the computers where it displaying correctly, Arial Narrow is installed in the user library as well as the system library. On computers where I am seeing Times, Arial Narrow is only in the system library, not the user library... however, Arial is installed in both, so why is the navigation defaulting to Times?
In general, does Firefox target fonts within the mac user library or system library?
Any other suggestions on how to fix this? Am I missing something simple?
Any help is greatly appreciated thanks.
OK, well I figured something out if anyone is interested. I added "arial" in lowercase to the stylesheet and Firefox defaulted to arial rather than Times.
You could try the following CSS3 rule:
#font-face { font-family: Arial Narrow;
src: url('ArialN.ttf'),
url('ArialN.eot'); /* IE9+ */
To make it work, you need to include the font file(!) to the appropriate folder.
Example of use:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face { font-family: Arial Narrow;
src: url('ArialN.ttf'),
url('ArialN.eot'); /* IE9+ */
}
div{font-family:Arial Narrow;}
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 9+ only supports fonts of type .eot. Internet Explorer 8 and earlier, do not support the new #font-face rule.</p>
</body>
</html>
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.