I am having problems getting my Icomoon custom fonts to load within my website.
Screenshot of Inspected Icon
I'm assuming that the greyed out "returnflight" reference indicates that my font files are not sourced correctly. I do not understand why that would be the case considering my /css/ and my /fonts/ folders sit at the same level.
My File Structure
My Styles Within global.css
#font-face {
font-family: "returnflight";
src: url("../fonts/returnflight.woff?5h0ljc") format('woff');
}
.fa {
font-family: 'returnflight' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-auto-intelligence-01:before {
content: "\e900";
}
Any help would be greatly appreciated
EDIT
I have removed all src's within #font-face except for .woff as suggested, but still experiencing the issue.
Net Tab Error
Upon enabling the Net tab within firebug I am seeing the following error which could be unrelated but I'm not sure. I was just brought in on this project and it is a robust piece of software. This seems to be related to bootstrap.
That 403 error will do it. Looks like you are either loading fonts from a different server (sometimes even www -> no www will do it, depending on server configs), the font files/folder don't have the right permissions, or you have something in .htaccess that is blocking access to certain file types.
Related
I'm designing a personal blog using ruby on rails (ruby version 2.6.6)
I've tried using this guide to change the font of the heading in the homepage of my web site. I've added the font I want in app\assets\fonts and I've added the following code:
#font-face {
font-family: "orangejuice";
src: url('/assets/fonts/orangejuice.ttf')
}
I've added the aforementioned code into the file 'app\assets\stylesheets\welcome.scss`
and I've also added in the file \node_modules\serve-index\public\style.css the lines:
h1 {
font-size: 60px;
font-family: "orangejuice";
}
Unfortunately, nothing happened, and I don't have any other .css files which I can edit.
What could be the problem? Why don't I see a change in my app? the file application.css is empty, there's no other code in it.
In general, I'm having trouble with understanding how to change the design of my site using rails, I've looked at many guides, but I can't find anything which explains all the options I have for designing my site. Perhaps anyone have an advise about what should I read?
Thank you
By adding this snippet:
#font-face {
font-family: "orangejuice";
src: url('/assets/fonts/orangejuice.ttf')
}
To your welcome.scss file, it will only by accessible in that file.
So what you can do is remove the code above and put it in your application.css:
#font-face {
font-family: "orangejuice";
src: url(asset-path("orangejuice.ttf"));
}
h1 {
font-size: 60px;
font-family: "orangejuice";
}
In this way it will be globally applied.
I am using 2 #font-face on my index.css file with the purpose of using a font in regular weight and in bold weight as my default font in my entire application:
index.css file:
body {
padding: 0px;
margin:0px;
font-family: "LucidaGrande";
}
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrande.ttf) format('truetype');
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrandeBold.ttf) format('truetype');
}
Now, the regular weight seems to be working for the entire application, however, on an other part of my application I am trying to use the font in bold weight like this:
#presentation-text em{
font-size: 35px;
color: rgb(139, 59, 28);
font-style: normal;
font-weight: 900;
}
However the 900 i.e the bold weight is not being applied, still regular.
Am I using this correctly?
If you're using #font-face, never use local(...). The whole reason you're using #font-face is to ensure that you control exactly which font resource gets loaded for which (set of) font properties. The last thing you want is for the OS to black-box fetch you what it thinks the font is for the name you specified. Even if it really does find Lucida Grande for some user, there is zero guarantee it's going to be the same version you have installed on your development machine.
Interestingly that actually tangential to the real problem here: the way you've written your CSS right now means that, because you have the font installed locally, whatever follows local(...) will never even be looked at by the browser, similar to what happens when you're using font-family: serif, Times. The browser knows how to resolve the first thing, so it immediately stops: it already found what it needed to find.
Effectively your current CSS, running in a browser on your own machine, says this, as far as the browser is concerned:
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande);
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande);
}
So you're loading the exact same thing in both declarations. As CSS weights for the text shaper in the browser are entirely independent from the system text engine, the result is exactly what you're seeing: both rules declare the same font resource as the one to use when you say font-family: LucidaGrande, both with or without font-weight: 900.
Drop local(...) and it'll instead work exactly as you need it to.
Also, you'll want to turn those .ttf files into WOFF2 and then load those, because they're much smaller, as well as a promise to the browser that these are indeed unencumbered webfonts.
I've just installed a new text font called Skyfont. Can't get it to work and I've been declaring it with #font-face and there is no element in the html that should block it. Here's the CSS code:
h1 {
text-align: center;
font-family: 'Skyfont Regular';
color: #000000;
font-size: 26pt;
font-weight: bold;
margin-top: 26px;
right: 50%;
text-decoration: none;
}
#font-face {
font-family: 'Skyfont Regular';
font-style: normal;
font-weight: normal;
src: local('Skyfont Regular'), url(fonts/Skyfont-NonCommercial.otf) format('otf');
}
Thanks for all help I can get :) I
f there is anything missing that I haven't written, please tell me.
A few plausible explanations:
you forgot the quotes around the url path in the src property
you are targeting the wrong path. Have a look at the developer console of your browser to check whether your are successfully requesting the font file or not. You can open it by pressing Control+Shift+J (or Command+Option+J on Mac) in Chrome or Control+Shift+K (or Command+Option+K on Mac). Head over to the network window and reload the page. Try to find the name of the font file (which should be Skyfont-NonCommercial.otf according to your css). You should see a 200 status next to it, meaning your browser successfully fetched the file. If not, it means your file cannot be found at the given address (for other HTTP status codes, see here).
your .otf file is corrupted or has the wrong file extension
I hope this helps.
There is strange browser behavior with fonts installed locally in Windows 10.
If you drag fonts files to C:\Windows\Fonts windows installs them into user profile
C:\Users\YourName\AppData\Local\Microsoft\Windows\Fonts.
Chrome won't see that font in #font-face tag, so local('Skyfont Regular') will never work.
This may be unexpected consequence of this bug, that got fixed recently #font-face src: local() should take font face name, not family name
Workaround is to install fonts into C:\Windows\Fonts, you can do this by right-clicking fonts files and choose 'Install fonts for all users'.
I'm developing a wordpress website, i have defined the hn titles in the theme options. For example: h5 has a font-weight: 300;.
But chrome windows renders it wrongly, it renders it as font-weight:bold; (it's ok on chrome mac).
I even tried to change it via the inspector to see from where the problem came, but nothing changed.
Here's some pictures to show you the deference:
Chrome Windows (how it shouldn't be)
FireFox Windows (how it should be)
Please add code snippet.
I think you should use normalizer
Normalize.css
Just try to add font-face for custom font weights:
#font-face {
font-family: Roboto;
font-weight: 300;
font-style: normal;
src: url("Roboto-Light.ttf") format("opentype"); }
I have Chrome Packaged App written in AngularDart and trying to get some external icons to make the app look nicer, but couldn't find any example over the net. Tried many things along with the below workaround but couldn't get it working. I am adding the #font-face to my css as below :
#font-face {
font-family: 'Icons';
src: url(data:font/ttf;charset=utf-8;base64,<ttf file encoded to base64>) format('truetype'),
url(data:font/woff;charset=utf-8;base64,<woff file encoded to base64>) format('woff'),
url(data:font/svg;charset=utf-8;base64,<svg file encoded to base64>) format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-uniF085:before {
content: "\f085";
}
I am trying to avoid CSP (content security policy) issues by converting my icon files: .ttf, .woff, .svg, .eot to base64 and embedding them into my controller CSS but when I run the application all I see in the chromium is the default square box instead of the icon I am referencing (); no error on the console or on the chromium browser. I am wondering if anyone got custom or external icons / fonts working with the Chrome Packaged apps. Please let me know if there is a workaround in anyway.
well after some tries, I see the issue here is not embedding the the files into the component, but actually getting the font-face work inside the shadowDOM which doesn't seem to happen, once I disable shadowDOM for my component it can use the global styles and the icons work fine as base64 encoded, but off course disabling shadowDOM masses up the whole component page design which I would need to refactor. I still think there should be a way to use font-face in shadowDOM.
Try the IcoMoon https://icomoon.io/app/
Once you import your icons, it will generate CSS files with the fonts embedded (off by default, change in preferences)
Worked well for me