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.
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'm experimenting with using the IBM Plex otf fonts. There are several typefaces: Sans, Serif, etc. There are 16 files for one typeface (Sans is listed here). As far as I know, IBM isn't hosting their fonts publicly (so I can't do an #import or set up a link), instead making them available through a github download. Meaning, if you want to use them on your site, you have to serve them up from your site. (Right?)
Now, I can set up 80 or so #font-family references for all of them, like these two for regular and bold sans:
#font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
src: url(https://...IBMPlexSans-Medium.otf) format('otf');
}
#font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 700;
src: url(https://...IBMPlexSans-Bold.otf) format('otf');
}
But I'm thinking there might be a way to avoid that. So, my question is this: will browsers use any sort of hints to find appropriate font files? For example, if I have the source reference and the family for the medium font, will they look for other file names at the same source to find the bold font, or the italic font, or whatever? Or do I have to spell out everything?
I found a solution. The bad news: yes, it does appear that you need to generate all the font-face CSS, and it amounts to over 3000 lines of code for the four different typefaces. The good news: there's an online tool at Transfonter.org that will do it for you. It will also do neat things like convert .otf files to .woff files, among a number of other conversion options. Just upload the fonts you want, hit convert, and download the result. The result includes a css file that has all of the necessary #font-family code.
After poking around many stylesheets for different websites, I have consistently noticed font or font-family values that are used which do not appear to use correct font-family names. I am wondering if I just don't fully understand how to reference font family names as used by CSS.
For example, on this stylesheet, the authors use the following several times:
font-family:"minion-pro";
however, as far as Google tells me, no such font family actually exists. For example, if you Google the following:
font minion-pro
none of the first several hits show anything "minion-pro", but rather all the hits are for "Minion" or "Minion Pro"; the fifth hit is for this link, which as far as I understand CSS, requires the user to reference this font as
font-family: "Minion Pro";
I have also seen this on some stylesheets for the font "Myriad Pro" which, when you Google font myriad-pro, only return hits for the font "Myriad" and "Myriad Pro". That is, in CSS stylesheets, I have seen this
font-family: "Myriad-Pro";
but to me, this is not correct, and should be
font-family: "Myriad Pro";
So my simple question is: are fonts which contain spaces able to be rendered properly if the spaces are replaced with hyphens?
I believe the answer to this is "no" based on the docs - I cannot easily test this because I do not have easy access to these fonts and I am at work right now. (when I try Codepenning this with "Myriad Pro" or "Minion Pro" nothing happens - fonts not recognized)
It depends on what you name the font-family when you create the #font-face font definition to serve your font.
Like this:
#font-face {
font-family: 'montserratregular';
src: url('/content/fonts/Montserrat/montserrat-regular.eot');
src: url('/content/fonts/Montserrat/montserrat-regular.eot?#iefix') format('embedded-opentype'),
url('/content/fonts/Montserrat/montserrat-regular.woff2') format('woff2'),
url('/content/fonts/Montserrat/montserrat-regular.woff') format('woff'),
url('/content/fonts/Montserrat/montserrat-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
In this case I would reference font-family: 'montserratregular'; in my css. But if in the #font-face declaration I defined font-family: 'montserrat-regular'; or font-family: 'montserrat regular'; then I would use that in my css.
In the stylesheet you linked the author probably has his #font-face declarations in a separate css file where he defines Minion Pro as "minion-pro", this is common.
Other fonts that you don't serve to the client, System Fonts, should be referenced by their system font name. You can use a site like CSS Font Stack to see what those names are and the likelihood (in %) that they are a system font on Windows or Mac. It also provides common fallbacks for fonts (i.e. you could do this: font-family: 'Myriad Pro', 'Myriad-Pro', 'MyriadPro', Arial;).
A font like Myriad Pro or Minion Pro don't usually ship as an installed system font by default, so thats why we serve the font to the client using the #font-face approach. I user could install Myraid Pro on their machine and then it would be a system font, but you would have to know the exact name and you can't guarantee a user has a unique font or require users who visit your site to manually install it.
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') ?