My CSS code:
#font-face {
font-family: 'Yore Script';
font-style: normal;
font-weight: lighter;
src: local('Yore Script'), url("/Users/abricker/Desktop/simple-master 3 copy 2/fonts/yore_script-webfont.woff") format("woff"), url("/Users/abricker/Desktop/simple-master 3 copy 2/fonts/Yore Script.ttf") format("truetype"), url("/Users/abricker/Desktop/simple-master 3 copy 2/fonts/yore_script-webfont.svg") format("svg");
}
Firefox is not picking this up at all. My other fonts are working correctly though (journal and geo sans light) and they are coded the exact same way. Thoughts? Does Firefox not support certain fonts??
Firefox's font display libraries can handle almost any font that complies with the standards. The issue is not Firefox's font display libraries but rather that it cannot access your font.
Are you sure your URLs in the src section are correct? Why do the path names have so many spaces in them? What do you get when you type
ls -l '/Users/abricker/Desktop/simple-master 3 copy 2/fonts/yore_script-webfont.woff'
in your shell? Does that file exist?
Related
It's reasonably common for sites I'm building to use the semibold weight of a given font for their "bold" variant. Usually, this is very easy to set up by using a custom #font-face declaration that points at the semibold files and has font-weight: 700;.
That's fine when the fonts are available under a free licence, and can be hosted directly alongside the website. Sometimes, however, the fonts I need to use are only available under a paid licence. My employer pays for a subscription to Adobe Fonts to give us access to these fonts.
However, Adobe Fonts sets up its own #font-face declarations in the CSS files it provides for a given web project, and for semibold weights it uses the standard font-weight: 600;.
Unfortunately I've found very little information online about using #font-face with Adobe Fonts (or Typekit, which it used to be called). The closest thing I found on Adobe's own website (https://www.adobe.com/devnet/edge-web-fonts/articles/use-at-font-face-with-with-font-services.html) doesn't say anything about using #font-face with Adobe Fonts/Typekit.
I don't trust the file URLs Adobe Fonts uses in its CSS to remain static, so I don't think I can reuse them in my own CSS without risking breaking the fonts once those URLs are no longer correct.
Is there any way in CSS I can do something like create a new #font-face declaration based on a previous one created in an imported CSS file, or modify a #font-face declaration that was included this way? I'd much rather just set up the font to use its semibold files when the browser thinks it should be bold, instead of telling the browser to use the semibold font-weight where it would would normally use bold.
For anyone else running into this issue, the solution I've gone with for now is to create my own #font-face declaration using the URLs from Adobe Fonts' CSS file, but with a different name for the font family.
I'm using the Adobe Fonts font family as a fallback for if the one I've created doesn't load, so if the URLs break it should at least fall back to the one Adobe Fonts has set up with the font weights that don't match what I need.
/* Here Adobe Fonts uses #font-face to create the font family "adobe-font" */
#import "https://use.typekit.net/<my-project-key>.css";
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/regular.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/regular.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/regular.ott") format("opentype");
font-weight: 400;
font-style: normal;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/italic.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/italic.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/italic.ott") format("opentype");
font-weight: 400;
font-style: italic;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/semibold.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/semibold.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/semibold.ott") format("opentype");
font-weight: 700;
font-style: normal;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/semibold-italic.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/semibold-italic.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/semibold-italic.ott") format("opentype");
font-weight: 700;
font-style: italic;
font-display: auto;
}
.my-class {
font-family: "Custom Font", "adobe-font", sans-serif;
}
It's not perfect, but since I haven't been able to find any assurance from Adobe that their font file URLs will never change this at least gives me some security if they do change.
i linked this custom font using #font-face rule
#font-face{
font-family: "jf_flatmedium";
src: url("../fonts/jf-flat/jf_flat_medium-webfont.eot");
src: url("../fonts/jf-flat/jf_flat_medium-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/jf-flat/jf_flat_medium-webfont.woff2") format("woff2"), url("../fonts/jf-flat/jf_flat_medium-webfont.woff") format("woff"), url("../fonts/jf-flat/jf_flat_medium-webfont.ttf") format("truetype"), url("../fonts/jf-flat/jf_flat_medium-webfont.svg#jf_flatmedium") format("svg");
font-weight: normal;
font-style: normal;
}
the browser (chrome & firefox) not rendering the font 'jf_flatmedium' insted it renders the fallback, i double checked the paths for font files.
and on a side notice in the font TTF file the font name is 'jf flat', if i change "font-family" attribute to be 'jf flat' it gets rendered .. so iam guessing this has something to do with the custom font-family name but can't figure out why
UPDATE: one thing i did not refer to in my question that iam displaying Arabic text, i just noticed that on English font is rendered fine . is there anything preventing using a particular font on any language i desire ?
Have a look at this i don't know if it will help but i hope so
http://www.fontspring.com/support/troubleshooting/troubleshooting-webfonts-and-browsers?utm_source=fontsquirrel.com&utm_medium=help_link&utm_campaign=trouble_shooting_webfonts
Fixed , it turned out to be fontsquirrel issue, i tried another webfont generator transfonter and it worked fine.
Visiting a website i have found out the menu links were abnormally bolder than wile watching the same page from my collegue computer with same browser.
Deleting the corresponding font from my windows font folder corrected the difference.
My question is how preventing this possibility when designing css fonts on a website
Most #font-face at-rules begin with a local(name-of-local-file) and then a reference to your distant url(/on/server/teh-webfont.woff).
Browsers will try, in this typical situation, to use the local file and if they find nothing will continue by downloading from your server the distant asset. If they find a local matching font, then they'll use it immediately and will stop their search of a font thus they won't download and use your distant asset.
Conclusion: don't use local() and only keep those url(). It's the contrary of this SO answer
Example without local() and many url() corresponding to many formats. Browsers will download the first one that please them, not 2+ of them:
#font-face {
font-family: 'Gudea';
src: url('./fonts/gudea/Gudea-Regular-webfont.eot');
src: url('./fonts/gudea/Gudea-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/gudea/Gudea-Regular-webfont.woff2') format('woff2'),
url('./fonts/gudea/Gudea-Regular-webfont.woff') format('woff'),
url('./fonts/gudea/Gudea-Regular-webfont.ttf') format('truetype'),
url('./fonts/gudea/Gudea-Regular-webfont.svg#gudearegular') format('svg');
font-weight: normal;
font-style: normal;
}
Download the font .ttf
Saving the font in a folder in your web site
For call font use this code in css:
#font-face {
font-family: "YourFont";
src: url('font/YourFont.ttf');
}
.example{
font-family: YourFont, sans-serif;
}
#font-face {
font-family: iconFont;
src: local(iconFont), url('fonts/iconFont.ttf') format('opentype');
}
The font file is not corrupt and installs fine in OSX etc. letting me preview it. But it won't render anything when I try to use it on a web page or even if I select it in illustrator it just switches to another font if I touch any key.
The font is for 'regular' and I have tried other options, but it won't work. Have tried typing with caps on/off etc. Using numpad, nothing. Have re-installed it and made sure there are no duplicates. It also won't work in Windows. Not sure if I need to change my css somehow or the fault lays with the font.
Here's a link to the font for anyone wanting to try. It's a bunch of metro icons. http://www2.zippyshare.com/v/23494573/file.html
Not sure if this will help, but this is the CSS I use, and it works fine. The webfonts directory is in the same directory as the css file, and includes three file types: .eot .ttf .woff
#font-face {
font-family: 'AvenirLT-Book';
src: url('webfonts/25EE2B_0_0.eot');
src: url('webfonts/25EE2B_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/25EE2B_0_0.woff') format('woff'), url('webfonts/25EE2B_0_0.ttf') format('truetype');
}
a typical class decleration:
.AvenirLT-Book {
font-family: AvenirLT-Book;
font-weight: normal;
font-style: normal;
}
perhaps you need to change the format to ('truetype') instead of ('opentype') ?
I have downloaded a font face kit from font squirrel, and created a css file with the given code. I copied all of the woff, ttf, eot, and svg files to my public folder, and have created a h1 code that references the font that I want to use. However when I go to check to see if the font is working, I just get the standard times new roman. If I put a backup font next to the one I want to use, I get that font. Does anyone know why this may be happening? Here is the code I am using.
#font-face {
font-family: 'CartoGothicStdBook';
src: url('CartoGothicStd-Book-webfont.eot');
src: url('CartoGothicStd-Book-webfont.eot?iefix') format('eot'),
url('CartoGothicStd-Book-webfont.woff') format('woff'),
url('CartoGothicStd-Book-webfont.ttf') format('truetype'),
url('CartoGothicStd-Book-webfont.svg#webfont1l1oLWSU') format('svg');
font-weight: normal;
font-style: normal;
}
.carto {
font-family: CartoGothicStdBook, Arial;
color: #333333;
font-size: 44px;
letter-spacing: -3px;
}
<h1 class= "carto"><b>Share Your Knowledge & Explore Your Passions<b></h1>
are you importing these fonts from an external style sheet?
When I placed my fonts in the same directory and embedded the #font-face declarations directly in my pages as applicable, I had no problems, but it didn't seem like I was able to link to a relative source. I'm wondering if this has something to do with all the fuss over licensing issues. Another thing...I seemed to have better luck referencing fonts with '' e.g.:
ul li:nth-child(6n),#filler {
color:#3F9;
font-family:'WCRhesusABtaRegular';
}
where the corresponding font would be:
#font-face {
font-family: 'WCRhesusABtaRegular';
src: url('WC_Rhesus_A_Bta-webfont.eot');
src: url('WC_Rhesus_A_Bta-webfont.eot?iefix') format('eot'),
url('WC_Rhesus_A_Bta-webfont.woff') format('woff'),
url('WC_Rhesus_A_Bta-webfont.ttf') format('truetype'),
url('WC_Rhesus_A_Bta-webfont.svg#webfonte627I3xy') format('svg');
font-weight: normal;
font-style: normal;
}
btw, this is an awesome font for decorative purposes (if you want to go Jackson Pollack all over your website), not so much for reading :)
hope this helps if you run into any more issues...if you did figure out a way to import font style sheets or place fonts in a separate directory, I would certainly like to hear about it...I haven't been able to find examples on the web where anyone is importing fonts...but I have seen people use a /Fonts directory. This may also be a licensing related item?
Oh and a quick note for those of you who are just getting started with #font-face (I'm just getting started myself) ... there are a couple of "gotchas" that Paul Irish mentions, but you should make sure that fonts are not locally installed as your browser will use your local fonts if available - this makes your testing unreliable...of course it's not too difficult to uninstall the fonts (at least in Windows 7).
Here's some more info from Paul Irish:
http://paulirish.com/2010/font-face-gotchas/#comment-48744
The answer is listed above and it was a simple directory issue. Rails requires the leading / for an added directory.