#font-face Isn't Working On One Specific Font - html

I'm trying to get a site up and running for a client but I'm having issues with the fonts. All of the fonts are working properly except for one, and I'm not sure why. The problem is even worse in Internet Explorer where 2 fonts don't work, and in Edge where nothing works. This is the code I'm using. The font that isn't working is "chunkfive".
#font-face {
font-family: 'chunkfive';
src: url('fonts/chunkfive-webfont-webfont.woff2') format('woff2'),
url('fonts/chunkfive-webfont-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'roboto';
src: url('fonts/roboto-regular-webfont.woff2') format('woff2'),
url('fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'streetwear';
src: url('fonts/streetwear-webfont.woff2') format('woff2'),
url('fonts/streetwear-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1,
h2,
h3,
h4,
h5 {
font-family: streetwear, serif;
}
nav {
background: #000;
border: solid 4px #FFF;
font-family: chunkfive, serif;
font-size: 22px;
left: 50%;
margin-left: -425px;
position: absolute;
top: 143px;
width: 850px;
z-index: 0;
}
ol,
p,
ul {
font-family: roboto, sans-serif;
font-size: 18px;
}
The fonts all work perfectly on my free website, but when posted on an account with GoDaddy, they haven't been working properly. Using chrome, I get the following error for each font, even though the fonts other than chunkfive display correctly:
GET http://website-url.com/css/fonts/streetwear-webfont.woff2
Does GoDaddy somehow restrict the way you can use fonts, or is there something else I need to fix?

THere are 2-3 things you can do to make this problem go away-
1. Check the linking is correct.
2. Try to use double quotes instead of single.
3. Check font folder premission as that is the main problem with go daddy.

Related

Using Custom Font - Failed to decode downloaded font in Oracle Apex

I'm trying to use some customized font in my application.
So i tried downloading Pacifico and trying to use in my application. But getting Failed to decode downloaded font and the font is not loading
Below is my CSS .
#font-face {
font-family: 'MyWebFont';
src: url('#WORKSPACE_IMAGES#Pacifico.ttf') format('ttf');
}
body {
font-family: 'MyWebFont', sans-serif;
font-weight: 300;
line-height: 25px;
font-size: 14px;
}
This is not working. So i tried converting this to .woff as per suggestions found in web and tried below. Even this is failing. I'm using Chrome 74.0 version . How to solve this?
#font-face {
font-family: 'MyWebFont';
src: url('#WORKSPACE_IMAGES#Pacifico.ttf') format('ttf'),
url('#WORKSPACE_IMAGES#Pacifico.woff') format('woff'),
url('#WORKSPACE_IMAGES#Pacifico.woff2') format('woff2');
}
body {
font-family: 'MyWebFont', sans-serif;
font-weight: 300;
line-height: 25px;
font-size: 14px;
}
Problem here is you need upload the font into /i/
#font-face {
font-family: "Pacifico";
src: url("http://localhost:8080/i/Pacifico.ttf");
}
body {
font-family: "Pacifico", serif;
font-weight: 300 !important;
line-height: 25px !important;
font-size: 14px !important;
}
I don't know why Apex is not resolving the #WORKSPACE_IMAGES# but you can upload the font in the web server. In my case I'm using tomcat

Varying Weight and Style in #Font-Face declaration not behaving as expected

I have done quite a bit of research at this point on the usage of #font-face, and am familiar with some of the challenges, but have nonetheless decided that I wanted to use it for my application. However, for some reason completely unknown to me, the browser is not loading the expected font-face.
I have a CSS file with declarations as follows: Note that the "!important" was me messing around with things, it did not appear to have any effect.
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Light.ttf");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-LightItalic.ttf");
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Thin.ttf");
font-weight: lighter;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-ThinItalic.ttf");
font-weight: lighter;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Black.ttf");
font-weight: bolder;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BlackItalic.ttf");
font-weight: bolder;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Bold.ttf");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}
.cerberus-body {
margin: 0;
font-weight: normal !important;
font-family: roboto;
}
Here is a screenshot of the structure of my web:
Web Directory Screenshot
As you can see from the screenshot the src paths on the font-face declarations match up with what I have in my directory, and I have verified they are reachable from my deployed site.
The body elem of my page has the following:
<body class="cerberus-body"></body>
I have verified in dev console that the styles and declaration are working as expected.
Given all of that- here is what I see in the network tab of my dev console when loading my page: (It shows only Roboto-Black and Roboto-Bold getting loaded)
Network tab screenshot
And when I inspect an element on the page I see that the styles piece shows a rendered font of Roboto Black:
Rendered font screenshot
Inspecting the Body on the page I see that my styles are reflected as I would expect, and the css class is getting honored:
CSS inspect screenshot
At this point, I'm really at a loss here. I could use any help or direction on where to go next troubleshooting this. I'm at the point where I think it's likely I'm going to give up on the custom font, but this is a last-ditch attempt to save my dignity.
Given that the fonts don't appear to be loading at all through the network tab, I must be missing something with how the rendering engine determines what font faces to lazy load. Beyond that, I'm at a loss.
Update
After reading through another question supplied in the comments by Pete, I read that some of the commenters recommended changing the order with which the font-face rules are defined. I flipped the order of my rules and sure enough, the font rendered as expected.
I'm hesitant to close the question though, as I have no clue why this works and would like to understand the underlying implementation.
For posterity- my new declarations
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Bold.ttf");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-BlackItalic.ttf");
font-weight: bolder;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Black.ttf");
font-weight: bolder;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-ThinItalic.ttf");
font-weight: lighter;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Thin.ttf");
font-weight: lighter;
font-style: normal;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-LightItalic.ttf");
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: "roboto";
src: url("../../Content/Fonts/Roboto/Roboto-Light.ttf");
font-weight: normal;
font-style: normal;
}

How do I add a new font of my choice into Visual Studio code?

I am fairly new at coding and I'm struggling with the following issue.
I have searched numerous times online on how to change the fonts in VScode to match the different fonts being used on a project of mine.
I've tried the suggestions on this post already but I still cannot see the fonts I selected and I cannot use them after going into "file > preferences > user settings" and overriding "editor.font-family":
I have downloaded the following fonts on to my desktop already. Here are the fonts I would like to insert into the site I am working on.
titilliumtext14l-600wt.otf
OpenSans-Semibold.ttf
OpenSans-Regular.ttf
Myriad-Pro_31655.ttf
Here are the "Default Settings"
// Overwrite settings by placing them into your settings file.
// See http://go.microsoft.com/fwlink/?LinkId=808995 for the most commonly used settings.
{
// Editor
// Controls the font family.
"editor.fontFamily": "Consolas, 'Courier New', monospace",
// Controls the font weight.
"editor.fontWeight": "normal",
// Controls the font size in pixels.
"editor.fontSize": 14,
I'm not sure if it is necessary to include what I have in my "main.css" but here it is just in case.
/** Fonts **/
#font-face {
font-family: Titillium, Arial, sans-serif;
src: url('../assets/fonts/gotham-thin-webfont.eot');
src: url('../assets/fonts/gotham-thin-webfont.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/gotham-thin-webfont.woff2') format('woff2'),
url('../assets/fonts/gotham-thin-webfont.woff') format('woff'),
url('../assets/fonts/gotham-thin-webfont.ttf') format('truetype'),
url('../assets/fonts/gotham-thin-webfont.svg#gotham_thinregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: Archivo Narrow, Arial, sans-serif;
src: url('../assets/fonts/gotham-black-webfont.eot');
src: url('../assets/fonts/gotham-black-webfont.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/gotham-black-webfont.woff2') format('woff2'),
url('../assets/fonts/gotham-black-webfont.woff') format('woff'),
url('../assets/fonts/gotham-black-webfont.ttf') format('truetype'),
url('../assets/fonts/gotham-black-webfont.svg#gotham_blackregular') format('svg');
font-weight: bold;
font-style: normal;
}
/** Global **/
html, body{
background-color:#fff;
color:#000;
font-family: Titillium web, Arial, sans-serif;
overflow-x:hidden;
font-weight:light;
}
h1, h2, h3, h4, h5{
font-family:latoregular;
}
h1{
font-size: 50px;
font-weight:bold;
color: #fff;
}
h2{
font-size: 24px;
color: #000;
font-family: sans-serif;
}
h2 span, h3 span{
color:#ff8200;
}
h3{
font-size:24px;
}
h4{
font-size:18px;
}
h5{
font-weight: bold;
font-size:20px;
font-family:latoregular;
font-weight:lighter;
margin-bottom: 40px;
}
p{
font-size: 16px;
line-height: 2.0;
}
First install the font on your machine if necessary. Then, in your user settings JSON file (File > Preferences > User Settings), override editor.fontFamily like so:
// Place your settings in this file to overwrite the default settings
{
"editor.fontFamily": "Source Code Pro"
}
You may need to restart VSCode if it was already open when the font was first installed.
The settings that you changed are related to Visual Studio Code itself, you are changing Visual Studio Code's font.
To use a font for your website, you can add Google Fonts API into your header like this:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
Afterwards, go to your css file:
font-family: "Open Sans";

Font Family Changes in other Computer's Browser

I have a div with a font-family: "Cooper Std Black";. It looks like the image below:
But when I use another computer, same browser (Google Chrome/ both updated) the way it looks changes. What is happening? I had made sure that the cache of both browser is cleared.
Below is my CSS Code:
.myid_print_duo_college
{
z-index: 1;
position: absolute;
left: 0px;
top: 440px;
color: #0C6A13;
width: 304px;
height: 42px;
line-height: 42px;
text-align: center;
font-weight: bold;
font-size: 20px;
font-family: "Cooper Std Black";
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
It looks like Cooper Std Black isn't installed on the other computer. Maybe you installed this font manually on your computer. This question could help you on how to embed a font properly.
You need to add your Font like
#font-face {
font-family: 'Cooper Std Black';
src: url('fonts/Cooper Std Black.eot'), url('fonts/Cooper Std Black.ttf') format('truetype'), url('fonts/Cooper Std Black.svg') format('svg');
font-weight: bold;
font-style: normal;
}
You can use this Font like below:
.myid_print_duo_college
{
font-family:'Cooper Std Black';
}

custom font not showing properly using #font-face

After much review, I can't get the correct display of a custom font I created through fontsquirrel. Chrome's Inspector shows the icon is in place but all I get is this default icon box ;o(
Rails 4 app, Bootstrap
Any ideas?
application.rb:
config.assets.paths << Rails.root.join("app", "assets", "fonts")
html:
<div class="hatfont icon-balloon01"></div>
here's my CSS:
hatfont {
font-family: 'haticon';
text-transform: uppercase;
div {
font-family: haticon;
}
}
#font-face {
font-family: 'haticon';
src:assets-url('fonts/haticon.eot');
src:assets-url('fonts/haticon.eot?#iefix') format('embedded-opentype'),
assets-url('fonts/haticon.woff') format('woff'),
assets-url('fonts/haticon.ttf') format('truetype'),
assets-url('fonts/haticon.svg#haticon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'haticon';
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-graphs:before {
content: "\e600";
}
I've had this issue before myself. I can't identify the problem specifically from what you've provided, but a few things come to mind. Check your link references in your CSS. Make sure no files were moved and that your stylesheet is in the same directory as your fonts folder. Also, the %> under your font-face looks out of place... I don't know if that's a Rails thing or not. Here's an example of something that I've used before that's worked. Obviously, you'd need to substitute your font files. :
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}