I'm using #font-face to try and load a custom font on my website, at least on google chrome.
Still, I'm having a hard time doing so... can anyone help?
<style type="text/css">
#font-face {
font-family: Folks;
url(http://www.vtxfactory.com/Folks-Normal.ttf) format('truetype'),
}
body {
background-color: #000000;
text-align: center;
color: #FFF;
font-family: Folks;
}
</style>
The font name is "Folks" but I'm only using "Folks-Normal" as I don't use the bold version. The font is already allocated on the directed url source.
You can see on http://www.vtxfactory.com/ that when you enter, font-family changes to Times New Roman and don't load my custom font.
Best Regards,
Rui Farinha.
I think you've missed required src property and semicolon at the end:
#font-face {
font-family: Folks;
src: url('http://www.vtxfactory.com/Folks-Normal.ttf') format('truetype'); //<-- semicolon
}
Change the url in the CSS to path
#font-face {
font-family: Folks;
src: url(/path/to/your/font/file/Folks-Normal.ttf) format('truetype'),
}
you can use this service too
http://www.font2web.com/
Related
Hi guys I have a custom font set with #font-face but it shows the wrong font
#font-face {
font-family: antipasto_bold;
src: url('../assets/fonts/Antipaso-Pro-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
*,
*::before,
*::after{
font-family: "antipasto_bold";
}
The font it's rendering is wrong but it shows 'antipasto_bold' in the console
Make sure you've downloaded the font to your working directory e.g. assets/fonts and also check your console if there's any error you can share so as to know what exactly is the problem.
In your src: url line you have the font name as "Antipaso..." where everywhere else you refer to it as "anitpasto..." Is it referenced correctly?
Where did you download your font from? I got the font from https://en.bestfonts.pro/font/antipasto-pro. Double check the file name, because that was the issue I had. It was not "Antipaso-Pro-Bold.woff" but in fact "AntipastoPro-Bold.woff".
#font-face {
font-family: "antipasto_bold";
src: url('../assets/fonts/AntipastoPro-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
This is my first time using font-face, and it's really hard for me to actually render the exact font, especially when it comes to *.ttc files.
Here is what I've done so far:
#font-face {
font-family: 'FontName';
src: url('../fonts/font.ttc') format('truetype');
font-weight: normal;
}
.header {
font-family: 'FontName;
}
When I check the network tab in Chrome's inpector, I can see that the font is loaded successfully, but the result text still uses another font.
What did I do wrong? Please help me to fix this problem. Thanks a lot in advance.
Update
One more thing that I figured out. When I style inline, the font is rendered correctly.
<p style="font-family:'FontName'">test 2</p>
Is there any delay in loading or something like that?
You can't use font collections for CSS #font-face declarations as the purpose of this syntax is to, unambiguously, specify which single font resource must be used by the browser when you specify some specific combination of font-{family, weight, style, etc} in your actual page CSS.
Specifying a font collection makes this impossible: there is no syntax to specify which font inside that collection you would need, so ttc are not supported by design. Extract the individual font assets you need (if legally allowed!) and then be explicit about which single font you need for which single #font-face declaration.
And remember that this is possible:
#font-face {
font-family: myfont;
font-weight: normal;
src: url('that-font-I-like-Regular.woff') format('WOFF');
}
#font-face {
font-family: myfont;
font-weight: bold;
src: url('that-font-I-like-Regular.woff') format('WOFF');
}
...
:root {
font-family: myfont;
}
h1 {
font-weight: normal; /* will use that-font-I-like-Regular.woff */
...
}
p {
font-weight: bold; /* will _also_ use that-font-I-like-Regular.woff */
...
}
I would like to know If we can upload any font on our website ??
Where can I download a font or google font and upload it on my css file directly like that :
#font-face { font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: 300;
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); }
instead of use this sort of code :
#import url(http://fonts.googleapis.com/css?family=Source+Sans Pro:200italic,200,300italic,300,400italic,400,600italic,600,700italic,700,900italic,900);
thank you
See don’t use #import.
Prefere LINK tag :
<link rel='stylesheet' href='a.css'>
Download Source Sans Pro webfont and make CSS file with these rules :
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Regular.otf');
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Bold.otf');
font-weight: bold;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Italic.otf');
font-style: italic;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-BoldItalic.otf');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Light.otf');
font-weight: 300;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-LightItalic.otf');
font-style: italic;
font-weight: 300;
}
Using a Custom Web Font
I found this youtube video online. It gives the instructions step by step.
https://www.youtube.com/watch?v=KPwG67lEFdc
I listed the steps here go to http://www.google.com/fonts/
find a font that you like, click the quick use link. Scroll down again and copy the link that looks like the following.
http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Next integrate the fonts into your CSS. The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
font-family: 'Open Sans', sans-serif;
True, like #Jukka said, some fonts aren't free, so you'll have to search. Luck is that:
Raleway - http://www.fontsquirrel.com/fonts/raleway
and Open Sans - http://www.fontsquirrel.com/fonts/open-sans
are free, so you just have to download the TTF (big blue button), inside the zip there's the whole set of weights and styles of the font.
Then you have two options:
Upload the .ttf directly to your ftp and call it into your css, as you stated; or
Use the Webfont Generator (http://www.fontsquirrel.com/tools/webfont-generator) to create another types (.woof, .eot, .svg), because of browsers.
FYI, Chrome in the last few versions (< 39) had a problem with some fonts, and just the .svg extension corrected the bug.
I'm trying to use a font I installed called "Bebas Neue" from dafont.com on my web page. I am running Ubuntu and I opened the font in font viewer and it successfully installed. Now I have tried referencing the font like so in my CSS:
font-family: 'Bebas Neue', sans-serif;
However this is displaying the default font still. Am I referencing it correctly or do I need to do more to use this font?
Use the #font-face method. http://fontsquirrel.com has a lot of free and free-for-commercial use resources on this. You can upload a font into their generator and it will give you a neat kit with cross-browser font files and instructions.
Here's an example:
#font-face {
font-family: 'OpenSansLight';
src: url('fonts/fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
And then reference this on whatever element you want to apply this to
<style type="text/css">
div {
font-family: OpenSansLight;
}
</style>
<div>
This is OpenSansLight!
</div>
try
#font-face
{
font-family: myFirstFont;
src: url('Bebas Neue.ttf'),
url('Bebas Neue.eot'); /* IE9 */
}
where src is path to the font.
put font into your project folder.
and use that as below,
div
{
font-family: myFirstFont;
}
I don't understand how to get this to work, any help would be appreciated;
I'm going off of what I got from this website: http://alistapart.com/article/cssatten
from my style.css
#font-face {
font-family: "JSL";
src: url(http://ff.static.1001fonts.net/j/s/jsl-ancient.normal.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Neither is the plus sign the issue (tested with my renamed fonts), nor do you have to import a separate css file at the top of your main css file.
However, you may need to have more versions of your font than just the true type. Have a look at Bulletproof #font-face Syntax.
You may use FontSquirrel’s generator to achieve this.
Here is an example of a #font-face embed in my application, which is pinned right at the top of my main css stylesheet.
#font-face {
font-family: 'JustVector';
src: url('../fonts/justvectorv2+webfont.eot');
src: url('../fonts/justvectorv2+webfont.eot?') format('eot'),
url('../fonts/justvectorv2+webfont.woff') format('woff'),
url('../fonts/justvectorv2+webfont.ttf') format('truetype'),
url('../fonts/justvectorv2+webfont.svg#webfontkw9J4lGf') format('svg');
font-weight: normal;
font-style: normal;
}
no
#font-face
Try get inport it:
#import_your_new_cssfile.css
whre you put:
font-face {
font-family: "JSL";
src: url(http://www.fontyukle.net/en/DownLoad-JSL+Ancient.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Is perhaps the "+" sign in the font URL a problem? You might want to URL encode it.
Edit - after hitting the font URL, it looks like you should try to download the ttf file, and refer to it locally, rather than from a remote source. It's prompting me for a Captcha in order to download the file, which is probably why it's not working.
You do need to download the file and refer to it locally,
The link supported there is a download link and requires a Captcha to be downloaded which means it is NOT a direct link to the TTF File.
Depending on the Font you may need to use:
#font-face {
font-family: 'someFont';
src: url('path/to/font/someFont.eot');
src: url('path/to/font/someFont.eot?#iefix'), format('embedded-opentype'),
url('path/to/font/someFont.woff'), format('woff'),
url('path/to/font/someFont.ttf'), format('truetype'),
url('path/to/font/someFont.svg'), format('svg');
font-weight: normal;
font-style: normal;
}
and in CSS:
BODY
{
font-family: 'someFont', Fallback, sans-serif;
font-size: 12px;
...
}
This worked for me when I had issues wityh embedding a custom font.