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.
Related
I have some local fonts I want to use in my project. I've read a few tutorials and questions on this, and I'm following the reccomendations I've seen, but my fonts are not showing up properly in the browser. I am using webpack 5. In my webpack config:
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(woff|woff2|ttf)$/,
use: {
loader: "url-loader",
},
},
]
}
}
I have a bunch of .tff font files in my src/assets/fonts/ directory. I have a .scss file for global styles. In there, I define the font names and I want to use, and where webpack should find them:
#font-face {
font-family: "InterRegular";
src: url("../assets/fonts/Inter-Regular.ttf") format("truetype");
font-display: swap;
}
#font-face {
font-family: "InterMedium";
src: url("../assets/fonts/Inter-Medium.ttf") format("truetype");
font-display: swap;
}
#font-face {
font-family: "InterSemiBold";
src: url("../assets/fonts/Inter-SemiBold.ttf") format("truetype");
font-display: swap;
}
// etc
I'm fairly sure webpack is finding these, because if I get the path to the file wrong, webpack errors. I then try to apply the font:
html,
body {
font-family: "InterSemiBold", sans-serif;
}
There are no errors, but the font does not get applied to the page. When I look in my network tab, I can see that a font file is indeed being loaded:
But this is clearly not the InterSemiBold font. Regardless of what font I'm using, this strangely-named .tff file always shows this same, seriffed font.
Looking at the computed value of an element, I can see that the browser is reading the "InterSemiBold", sans-serif value of the font family, but still defaulting to Arial:
I have also tried loading in fonts using the file-loader with webpack, but that makes no difference, and many recommend using url-loader instead.
What am I doing wrong here? Why is my font not being loaded in and applied?
Your dev tools screenshot indicates your actual page/app style sheet expects the font-family name to be 'Inter'.
So you don't need different family names for each font-weight
and change your #font-face rules to something like this:
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('../assets/fonts/Inter-Regular.ttf') format('truetype')
}
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: url('../assets/fonts/Inter-Medium.ttf') format('truetype')
}
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype')
}
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url('../assets/fonts/Inter-Bold.ttf') format('truetype')
}
Your #font-face rules should include a font-style value.
For italic styles you would change it to font-style: normal.
The font-url must use the exact file name of a font style (just a note, as some automatic font loaders rename the filenames internally or load updated files directly from Google - resulting in filenames like this "inter-v11-latin-800.ttf").
Since a browser can't automatically tell which intermediate weight would be e.g 'semi-bold' or 'light', you add specific numeric font-weight values which can be used to map all font-weights to different selectors like this:
body{
font-family:Inter;
font-size:16px;
}
.medium{
font-weight:500;
}
.semibold{
font-weight:600;
}
strong, h1, h2,
.button{
font-weight:700;
}
You might also double check your main css – it might also contain a separate #font-face declaration.
If everything is working fine, you should see the .tff files in dev tools just as defined in #font-face urls (e.g. "Inter-Regular.ttf")
Still not working?
Try to open the font via absolute URL in your browser.
Font file connection test example
Provided your compiled folder structure looks something like this:
the final URL is "myapp.com"
the main css is located under URL "myapp.com/css/main.css"
font files are located (at least according to your css/compiling code) in directory URL "myapp.com/assets/fonts/"
the actual font files should be available (downloadable) under URL
"myapp.com/assets/fonts/Inter-Regular.ttf"
If this doesn't work – you need to fix the URLs in your #font-face rule.
This especially important, if assets are copied/assembled during a compiling process to a new directory – so previously paths/URLs might not be "automagically" fixed.
Another cause might be inlined css – so the css becomes part of the compiled HTML <head> or <body> – relative paths/URLs might not work anymore => absolute paths could fix this (... albeit, any decent auto inlining script should be smart enough to translate relative to absolute URLs).
Compiled css
The final css might also include some overriding rules.
So check the finally compiled css in devtools and search for any #font-face rules – as a last resort: add a !important keyword to a font src to enforce the desired URL.
Font files might be corrupt?
Since the "inter" is available as free google webfont you could get a "fresh" copy via google webfonts helper
I was having the same problem as you with Webpack 5 and a custom local font, none of the above suggestions worked, but I just solved it, here's how: When I went to Google Fonts the only option was to download a TTF and that's what I had been trying to use. So, I visited the google-webfonts-helper website which gives you the code to put in your CSS file to make sure I was doing it correctly, and it instead had me download a WOFF and WOFF2 of the font. When I used these files the fonts rendered properly in my Chrome browser right away. I then found a few other forums from the past where people had issues with Chrome rendering TTF's and solved them by switching to WOFF formats. I don't know exactly why this works but it did.
I downloaded a free font and have the .ttf file in a folder on my local server. However, I can't seem to be able to get the font to actually work. This is the code that I found online for applying an external font:
#font-face {
font-family: simplifica;
src: url(fonts/simplifica.ttf) format('truetype');
}
.header {
font-family: simplifica;
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
To clarify, I did change the file name because I read somewhere that capital letters can cause unexpected problems for browsers like IE. The original file name was "SIMPLIFICA Typeface.tff".
Also, I am using Brackets text editor and it's "live preview" function.
If you haven't other formats, try convert this font with https://www.fontsquirrel.com/tools/webfont-generator
Try to Import other font formats like woff and eot and try this code
#font-face {
font-family: simplifica;
src: url(fonts/simplifica.eot?#iefix) format('embedded-opentype'),
url(fonts/simplifica.woff) format('woff'),
url(fonts/simplifica.ttf) format('truetype');
}
if the font folder is the same place as the css folder who contain the css file replace "fonts/" with "../fonts/"
I have a .ttf file for my website but this file has regular and bold in the same file.
How I can select regular or bold at .ttf file with CSS?
Currently I manage the fonts on this way in my CSS file:
#font-face {
font-family: Bangla MN;
src: url("../fonts/Bangla MN.ttf");
}
Or is there a way to separate regular and bold from a .ttf file to two files .ttf?
Thanks in advance
It's not a ttc, so it doesn't. But, you probably do have two separate files on disk that declare themselves as being the same font family, and the OS and quite a few desktop applications will happily treat them as one "font" for the purpose of user selection and then swap resources under the hood when you pick normal/italic/bold/etc.
CSS is nothing like that, it needs you to tell it what to do, and each distinct font needs its own binding:
#font-face {
font-family: Bangla;
src: url("../fonts/Bangla MN.ttf") format("truetype");
font-weight: normal;
}
#font-face {
font-family: Bangla;
src: url("../fonts/Bangla MN Bold.ttf") format("truetype");
font-weight: bold;
}
And now you have one font-family that will switch file resource depending on whether you're using font-family: Bangla; font-weight:normal in some bit of real site CSS, or font-family: Bangla; font-weight: bold. However, let's not end it there: ttf are universal fonts, and some browsers (notable IE) will be much more anal about loading it due to installation permissions than if you convert it to WOFF and serve that instead. So if you have the rights to use this font, and its license permits WOFF conversion, that's entirely worth doing.
For some reason the font I'm trying to add won't add itself to my website. I'd rather not do this with an image, so is it possible the font is broken? Would it be possible to fix it with just the otf or ttf?
My code (in case I'm missing something):
#font-face {
font-family: urbanJungle;
src: url('UrbanJungleDEMO.ttf');
}
h1 {
font-family: urbanJungle;
font-size: 100px;
color: #34495e;
}
Additional details: This is in the latest Chrome, other custom fonts work.
In the network console the font is red and it says cancelled.
Live URL: http://codestack.co.uk/website/
The font was from Dafont, no extra processing applied by myself, it's in the same directory as the index page. All the relevant CSS is included.
You should use Font Squirrel font-face generator for this: http://www.fontsquirrel.com/tools/webfont-generator
Different browsers need different font formats, you only provided one. The generator will convert your font to all the formats needed and give you a CSS file too, with no hassles.
You are using only TrueType font, IE support only *.eot fonts. And you are missing a lot informations. It is always better to use font stack instead of using single font, if first font went missing css use immediate next font on the list (called font-stack).
Here is an interesting article about #font-face by Paul Irish : Bulletproof #font-face Syntax
#font-face{
font-family:MyFont;
src:url(../font/MyFont.eot);
src:local('?'),
url(../font/MyFont.woff) format("woff"),
url(../font/MyFont.otf) format("opentype"),
url(../font/MyFont.ttf) format("Truetype"),
url(../font/MyFont.svg#myfont) format("svg");
font-weight: normal;
font-size:normal;
}
body{
font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}
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