What do the numbers mean?
The reason for asking is that the fonts are not rendering correctly using the following CSS:
#font-face {
font-family: 'letter';
src: url('../fonts/letter-bold.otf') format('opentype');
font-weight: bold;
}
.title {
font-size: 22pt;
font-family: letter,Arial,Helvetica,sans-serif;
font-weight: bold;
}
Not the question here, but you could answer in a comment - is '../fonts/' correct for #font-face to load from a path relative to the css file?
It means that there was an error. In Firefox/Firebug, there is no resources tab, but in the network tab it will show 304 Error not found for the same font files.
And the fonts were not downloadable due to MIME settings. #font-face not working on windows server?
The correct MIME type is provided in this SO answer: Proper MIME type for fonts
Can Chrome render OTF font files? I believe Chrome uses the .woff font type for font embed. If you don't have a woff file type use font squirrel to generate new font sources. EOT is for IE, Woff is for Safari/Chrome, it will also output TTF and SVG for you.
I think that will fix the issue.
Here is a link to the generator: http://www.fontsquirrel.com/fontface/generator
Related
Please advise what's wrong with connecting Roboto-mono variable.
I use ubuntu Focal Fossa and download and connect this font to my sample of site with standart index.html, styles.css.
I've download two fonts and even install static and connect them.
But, still I have only two styles, there are "regular" and "bold".
Even I try font-weight: 100 or 300, neither "lighter", thickness of the font changing only when I put "600".
No other declarations of fonts down below, so file is simple as it is, only one declaration body { font-family: Roboto, monospace; }.
That's it.
Is that possible I do not use localhost but open index.html such as simple file in browser? Or, that is another reason?
<div class="carousel__cell">test1</div>
<style>
/*#font-face {
font-family: "Roboto";
src: url("fonts/RobotoMono-VariableFont_wght.ttf") format("ttf");
font-weight: 100;
}*/
#font-face {
font-family: "Roboto";
src: url("fonts/RobotoMono-Thin.ttf") format("ttf");
font-weight: 100;
}
html,
body {
height: 100%;
font-family: Roboto, monospace;
/*font-variation-settings: 'wght'100;*/
font-weight: 100;
}
</style>
You have to specify the format name in the format() function, not the file extension.
The format name for TrueType fonts is truetype not ttf.
See the specification:
String
Font Format
Common extensions
"woff"
WOFF 1.0 (Web Open Font Format)
.woff
"woff2"
WOFF 2.0 (Web Open Font Format)
.woff2
"truetype"
TrueType
.ttf
"opentype"
OpenType
.ttf, .otf
"embedded-opentype"
Embedded OpenType
.eot
"svg"
SVG Font
.svg, .svgz
Is that possible I do not use localhost but open index.html such as simple file in browser?
Browsers do impose cross-origin restrictions on fonts. They might apply if you don't load your page through HTTP(S). That would be an additional problem though.
I am trying to use a custom font, which is not available via Google Fonts. I unzipped the font and put it into src/assets/fonts of my React project.
In my index.css I am loading the font like:
#font-face {
font-family: 'LemonMilk';
src: local('LemonMilk'), url(./assets/fonts/LemonMilk.otf) format('otf');
}
I tested the app both on the localhost and hosted it on the web for testing and it is working fine, since the font is installed locally on my machine, but if I open the app on a different machine it is not working. I also deleted the font from my machine and the fallback font started to show since then. What am I missing ? Thank you
It's looking like Your browser has a problem with understanding the font file. Try to make the webfont package from the font file. There is lot of tools to approach it:
https://www.fontsquirrel.com/tools/webfont-generator
Webfont package will contain the font in all major supported formats and will generate the css #font directive for You.
DISCLAIMER: Ensure that You have the rights to use the font.
well i suggest creating a different css file for your fonts then import it to your main css also this site generate font-face for your font with css file!
The correct font name is Lemon/Milk and you'll need to convert it to other format like WOFF WOFF2 as well.
Please Follow this:
Go the this Website free online font generator
Upload your font and check TTF, EOT, WOFF, WOFF2 (See browser support)
Click Convert > Download
Upload the newly converted fonts to your server
Finally your CSS should look like similar to this.
#font-face {
font-family: 'Lemon/Milk';
src: url('LemonMilkbold.eot');
src: url('LemonMilkbold.eot?#iefix') format('embedded-opentype'),
url('LemonMilkbold.woff2') format('woff2'),
url('LemonMilkbold.woff') format('woff'),
url('LemonMilkbold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
Please Note that you'll need to convert any other font weight too. and don't forget to add the correct path
I have a website A with css and custom font which all work fine. Now I'm trying to refer to this css from my website B. Everything works fine css-wise, except that the font is not applied. When I look under the network tab of Firefox console, everything is loaded correctly, including the custom font.
Here is how I declared the font in my css:
#font-face {
font-family: 'Raleway Light';
src: url('http://website-a.com/fonts/Raleway-Light.ttf');
}
* {
font-family: 'Raleway Light', sans-serif;
}
I also tried to refer to the .ttf with relative path src: url('../fonts/Raleway-Light.ttf'); but it doesn't work either.
Any insight?
PS.: I tried different browser and cleaning the cache already.
Firefox does not allow cross-domain font embedding. See this similar question for various solutions.
.ttf is for windows fonts and true type fonts(.ttf) does not work on some browsers.
If you want use a font on web you better have the font in formats .ttf, .woff, .eot all and use them all to support all browsers.
And I do not agree this speak
Firefox does not allow cross-domain font embedding
Because i tested that previously and worked.
And in relative src please see if your #font-face style is in the html file or is in the external css file because each one has its src. Some times it make us confused.
The site runs perfectly on the desktop browser.
On a mobile phone browser, the site does not read the font files.
So I checked the CSS validator and found 2 errors, parse errors. I've tried a couple different things and can't seem to get rid of the parse errors. Here's the code that is faulty with the errors. The font file is stored locally.
Any advice would be appreciated.
#font-face {
font-family: 'trashhand';
src: url('TrashHand.ttf');
}
You can try to create a fallback system for the font-family usage. For example:
font-family:'Trashhand', 'Lucida Sans', 'Arial'
The main purpose for fallback system is to create alternative font usage, so if the browser doesn't support the first font it will try the next options.
You can try to import font in proper ways.
CSS TO IMPORT FONT:
#font-face {
font-family: 'TrashHand';
src: url('TrashHand.ttf') format('truetype'); /* Safari, Android, iOS */
}
CSS USAGE:
body{
font-family:'TrashHand', sans-serif;
}
Also, you can see here many possiblities to import different fontface for different browser and systems.
First of all, although the format hint is optional if your font is OpenType or TrueType, it's worth specifying it explicitly:
#font-face {
font-family: 'trashhand';
src: url('TrashHand.ttf') format('truetype');
}
Besides that, there were some problems with path recognizing on mobile devices. So you can include a / to the beginning of your font path and that might fix everything.
The last but not the least, consider using woff or woff2 that are compatible with major browsers.
My site here won't pick up 'proxima nova' otf in Chrome and can't understand why.. Here's the CSS:
#font-face {
font-family:'Proxima Nova';
src: url("/Fonts/ProximaNova-Regular.otf") format('opentype');
}
Any ideas much appreciated.
Just encountered the same problem, you don't need to specify format for otf fonts, just remove the last part of the src attribute:
#font-face {
font-family:'Proxima Nova';
src: url("/Fonts/ProximaNova-Regular.otf");
}
This comment helped me to sort this problem out:
https://github.com/facebook/create-react-app/issues/2609#issuecomment-311231425
different browsers like different font file formats, for example IE will only acknowledge .eot and i think im right in saying that webkit browsers prefer .ttf files.
Use Squirrel's font face generator to create all the various font files you need, it will also give you an example of how to include them all properly in your css font face declarations
If you see 404 error for this font request in browser console, the problem is not in the browser but rather on the server side. The solution is to add mime type for .otf file extension in IIS on the web server. Since otf is a pretty new format, it's not available in the default list of mime types in IIS serevr; you have to explicitly add one.
Best for chrome is base64
src: url(data:application/x-font-woff;charset=utf-8;base64
http://www.fontsquirrel.com/fontface/generator
co generate this