While defining a Web Font in CSS - I have noticed a small change in the way my font displays depending on which method of font definition I use:
#font-face {url('https:/https://fonts.googleapis.com/...');}
or
#import url('https:/https://fonts.googleapis.com/...')
with the #import I've got a lighter version of the font and with the #font-face method it is a bit bolder.
Can anyone tell me why this happens, what the differences between the 2 "methods" are, and which is more advisable (advantages vs disadvantages).
Usually, #font-face is used to declare fonts that were downloaded and #import is for adding another stylesheet file. I would say that it could be related to font-weights. Because #font-face is creating the font that is downloaded it may be the problem. Does the google fonts link contain the font-weights?
Related
In my login component's CSS, I am importing the following font:
#import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#1,600&display=swap);
In another component in the system, I would like to use this same font but I do not want it applied with italics. I am importing it in that component's CSS as:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
In this case, the component is rendering it as if the login page import was being used (the font appears in italics and at 600 font weight).
Until I refresh the page. If I do a refresh, it appears properly at 400 without the bold.
I have tried applying:
font-variation-settings: normal;
To the div containing the text, this has no effect.
What am I doing wrong?
Could be something related to the caching of css and fonts?
Maybe here you can find the answer.
LINKs:
Preloading fonts using angular CLI
Browser Caching of CSS files
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.
I found this in a css file, but I don't understand how it works?
#import url(/t/1.css?apiType=css&projectid=8f2a6800-87fc-4721-88c2-c4395f5c2529);
#font-face{
font-family:"Gill Sans W01_n3";
src:url("/dv2/2/2cebe80c-b289-4ae0-a3b0-baa82c6c6e10.eot?d44f19a684109620e484157aa090e818164b583323d003aed8738c486c8f2be5451a12b579fdb3b84f52c077b1b063612babe72c6cf13ea84e96a257fd04f94aa22a2e2c342ce62d6867611914a6d8b6aea98add427c897e37055b90046e50504037af165c645dd51b4dc26ecc8321d6196fc3e54c1a35c2ef7a466d10159a3ee117d8214a55b23616&projectId=8f2a6800-87fc-4721-88c2-c4395f5c2529") format("eot");
}
Basically, those CSS statements are creating a #font-face. So, the src:url is just linking to a file that contains the 'eot' of the font. Without the URL, the CSS does not know what the font looks like.
Although having read some articles about font-family, I still don't have a deep understanding how it works. So I'm hoping this question may help me better understand how font-family works.
I see some beautiful fonts on a website, the CSS of one of them is font-family:'Futura Today Bold',Arial,sans-serif. I try to copy it to my website, but it doesn't work. It seems the elements affected by this website are displaying default font. Here is a side question: how do I check what font an element is actually using? can I do it with javascript?
And the main question is, how do I use this 'Futura Today Bold' font on my website?
The problem with the font you intend to use is that it will not be installed on every user's device, which is why the fallback font (Arial) is specified in the website you checked.
You need to use web fonts if you wish to use a font that is not available on the user's device. Here's an example CSS code to do that:
#font-face {
font-family: 'Futura Today Bold';
src: url('http://path/to/futuratodaybold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('http://path/to/futuratodaybold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
After including the above lines in your CSS code, the font can be applied by the CSS rule font-family:'Futura Today Bold' in your stylesheet.
Also note that as Christina pointed out in a comment, you should not use fonts that you do not have licensing rights to use.
Answering your other question as to how to find out which font is currently being applied, you can use your browser's developer tools to find that out. Here's a screenshot of how it can be done in Firefox.
Source.
Basically you need to have the font actually included in the bundle when the page loads to have access to it. You can easily do this once you have the file by using this html code in your <head>
<link href='font-name' rel='stylesheet' type='text/css' />
or like this into your css
#import('font-name');
After you have done this all you have to do is set the font like you did before
Update
This is needed to define the font name once you have the ttf. Put this in CSS
#font-face {
font-family: 'Futura Today Bold';
src: url('font-name.ttf');
}
If you look at this file:
http://t.whstonecabinet.com/templates/rt_chimera/css-compiled/demo-dee78feaa65fff084c041f8862da3088.css
Then at the beginning you can see this line which is what create the font and if you look in your file tree under fonts/Roboto-Regular-webfont.eot then you can find the eot file:
#font-face {
font-family:'Roboto';
src:url('../fonts/Roboto-Regular-webfont.eot');
src:url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#Roboto') format('svg');
}
There are some sets of fonts that are available in the website by default. If you want to use any other fonts then you must specify the same in your css. Normally font files are available in ttf or otf format.
For example if you want to use Futura Today Bold you should first download the font file from this page.
Next, you can specify in your css, the font path that you intend to use. Visit this link to know more
If you trying to use a font in your website and it doesn't show, in many cases you just doesn't have the font available.
So google and download it (if allowed). To use it in your online websites, you have to provide the font, if you're not sure, wether everybody has this font or not. Providing can be done via #font-face. But keep copyrights in mind.
When a browser renders a page, it uses the fonts from left to right. If the most-left is not available, it goes one step to the right and so on. You will often see something like sans or sans-serif at the right and, to provide a fallback, where the browser just pick a default font of that type.
To see which font is currently used, you can right click that part (in Firefox or Chrome) and inspect the element. Look for the font section. There you can see which font is used. If you see multiple fonts, the most left/top value should be applied.
You would need to actually have the font file in your project or you can download the file using #font-face in your css.
There are quite a few services that offer fonts for download online. Some are free to download (Google Fonts, others are paid (Typekit).
This link explains a bit of how it is with fonts on the web today.
I'm about to use some custom fonts for my website.
I know that currently there are few websites providing free webfonts like: Google WebFonts
But, the font I want isn't there. I want to know if there is any way to convert this font that I have to a webfont. (my font extension is TTF)
Also, I downloaded a few webfonts, their extension was also TTF. Are webfonts something different?
Different browsers handle webfonts differently. TTF will work in most browsers but not IE or on iPhones. I'd recommend checking out Font Squirrel as it has a lot of fonts on there including a #font-face generator that will help you set things up.
Web fonts are nothing special; they can be TrueType fonts, as long as the browser supports that format (most do). To use a TrueType font in your CSS, use
#font-face {
font-family: {given name};
src: url({path to font file}) format('truetype');
}
Then use
font-family: {given name};
in any rules you want to use the font for.
I've previously used Font Squirrel to generate the web font files from a ttf.
I would recommend trying Cufon as a fallback for browsers that don't support css #font-face
You can just use the ttf files in combination with #font-face. See http://www.html5rocks.com/en/tutorials/webfonts/quick/ for more information.
This might be of use -
make sure the license for the font you are using allows it though.