So, I'm brand new to web development, and I am trying to learn all about CSS right now. I noticed not many font-family's come with VSCode so I wanted to download some to get in VSCode to use in my CSS. Question is; how do I do that? I downloaded the .ttf file of the font I want to use in my CSS but I'm unsure how to get VSCode to recognize the font-family.
You can use https://fonts.google.com/ to find the font you want, than select it and it should give u a link, paste it on top of your css file
ex :
link: <link href="https://fonts.googleapis.com/css2?family=Antonio:wght#100&display=swap" rel="stylesheet">
using it: font-family: 'Antonio', sans-serif;
First of all the fonts you use have nothing to do with VS Code. What you want to do is integrate your downloaded font directly in your CSS code which can be done like so:
#font-face {
font-family: myFirstFont;
src: url(your_font.tff);
}
body {
font-family: myFirstFont;
}
You have to specify the #font-face CSS at-rule:
#font-face {
font-family: myfont;
src: url("myfont.ttf");
}
and then you can use it like so:
* {
font-family: myfont
}
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.
In my site I've tried these two methods (One for each time), to import a font:
#import "/va/fonts/FjallaOne-Regular.ttf";
#import url('/va/fonts/FjallaOne-Regular.ttf');
None of them is working. The path is correct.
I don't want to use a HTTP request for this task.
PS: Tried without the quotes too: #import url(/va/fonts/FjallaOne-Regular.ttf);
It doesn't work because you are using an import, not the #font-face, try the following:
#font-face {
font-family: 'FjallaOne-Regular'; /*You can use whatever name that you want*/
src: url('/va/fonts/FjallaOne-Regular.ttf');
}
Finally, select the font-family on your sections, for example:
#styledDiv {
font-family: 'FjallaOne-Regular';
}
Good luck, bro.
I think you might be missing a back-slash in there, I believe the correct syntax is #import url(//address);, I'm not sure though if it would work with a local file.
I personally would define a font-face in my CSS and use that as a regular font-family property. Always worked for me that way whether for local files or fonts online.
Example:
#font-face {
font-family: 'MyWebFont';
src: url('/va/fonts/FjallaOne-Regular.ttf') format('truetype');
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
For the record, I learned the code above some time ago from CSStricks.com
I hope that answers your question.
Happy coding :)
I have a problem with Arial (maybe other fonts too) in Chrome/Chromium.
It looks good when I use font-family: Arial;
But when I include Arial font-file via #font-face it looks different!
Why could it be? What can I do to make them look the same? Where exactly Chrome takes its fonts?
Here is my css
#font-face {
font-family: 'My Arial';
src: url(Arial.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
body {
padding: 20px;
font-size: 16px;
}
body#native {
font-family: Arial;
}
body#fontface {
font-family: 'My Arial';
}
Here is the rendered text:
.
Sorry for my English, it's not my native language.
I use #font-face a lot, and there's always a difference in how different browsers render it. With some fonts it gets really ugly, in your particular case, I'd say difference is insignificant, and everything else just as Sparky672 already commented.
If you absolutely must have pixel-precise identical rendering on all systems, maybe some javascript based solution may help, check this:
https://stackoverflow.com/a/692994/525445
Again, if this was my site on your screenshots, I'd be perfectly happy with how it looks.
It's just the nature of the web that not everyone will see the identical thing, there are different monitors with different color settings, different resolutions, some people zoom in the text etc.
Just to mention the option, you can detect Chrome with JavaScript and then apply some specific CSS to tweak it.
Is the Arial file you're including with #font-face the same exact file from your system or did you get it from somewhere else? There could be difference in the files that's causing the difference. If not, then as #Sparky672 said in his last comment, there's not much you can do, it's just a browser rendering issue.
Also, out of curiosity, why are you including Arial with #font-face, since it's available on virtually every system?
I am using Google Web Font's PT-sans
font-family: 'PT Sans',Arial,serif;
but it looks different in Chrome and Firefox
Is there anything that I need to add so that it looks same in all browsers?
For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.
For me, Chrome web fonts look crappy until I put the SVG font ahead of WOFF and TrueType. For example:
#font-face {
font-family: 'source_sans_proregular';
src: url('sourcesanspro-regular-webfont.eot');
src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
url('sourcesanspro-regular-webfont.woff') format('woff'),
url('sourcesanspro-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Even then, Chrome's fonts look thinner than in Firefox or IE. Chrome looks good at this point, but I usually want to set different fonts in IE and Firefox. I use a mixture of IE conditional comments and jQuery to set different fonts depending on the browser. For Firefox, I have the following function run when the page loads:
function setBrowserClasses() {
if (true == $.browser.mozilla) {
$('body').addClass('firefox');
}
}
Then in my CSS, I can say
body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
Likewise, in an IE-only stylesheet included within IE conditional comments, I can say:
body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
There are a few fixes. But usually it can be fixed with:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Sometimes it can be due to font-weight. If you are using a custom font with #font-face make sure your font-weight syntax is correct. In #font-face the idea of the font-weight/font-style properties are to keep your font-family name across different #font-face declarations while using different font-weight or font-style so those values work properly in CSS (and load your custom font -- not "fake bold").
I've seen -webkit-text-stroke: 0.2px; mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.
css reset may fix the problem, I am not sure .
http://yuilibrary.com/yui/docs/cssreset/
I've noticed that chrome tends to make fonts a bit more sharper and firefox a bit smoother.
There is nothing you can do about it. good luck
To avoid font discrepancies across browsers, avoid using css styles to alter the look of the font. Using the font-size property is usually safe, but you may want to avoid doing things like font-weight: bold; instead, you should download the bold version of the font and give it another font-family name.
i found this to be working great :
-webkit-text-stroke: 0.7px;
or
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
experiment with the "0,7" value to adjust to your needs.
The lines are added where you define the bodys font.
here is an example:
body {
font-size: 100%;
background-color: #FFF;
font-family: 'Source Sans Pro', sans-serif;
margin: 0;
font-weight: lighter;
-webkit-text-stroke: 0.7px;
As of 2014, Chrome still has a known bug where if the webfont being used has a local copy installed, it choses to use the local version, hence, causing OP rendering issues.
To fix this, you can do the following:
First, target Chrome Browser or OSX (For me, the issue was with OSX Chrome only). I have used this simple JS to get quick Browser/OS's detection, you can chose to do this in any other way you're used to:
https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js
Now that you can target a Browser/OS, create the following 'new' font:
#font-face {
font-family: 'Custom PT Sans';
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
font-weight: normal;
font-style: normal;
}
The font URL is the same your browser uses when embedding the google webfont. If you use any other font, just copy and change the URL accordingly.
Get the URL here http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext
You may also rename your #font-face custom font-family alias.
Create a simple CSS rule to use that font targeting Browser/OS or both:
.mac .navigation a {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Or
.mac.webkit p {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Done. Just apply the font-family rule wherever you need to.
Different browsers (and FWIW, different OSes) use different font rendering engines, and their results are not meant to be identical. As already pointed out, you can't do anything about it (unless, obviously, you can replace text with images or flash or implement your own renderer using javascript+canvas - the latter being a bit overboard if you ask me).
I had the same issue for a couple of months. Finally, it got worked by disabling below settings in Chrome browser's settings.
Set "Accelerated 2D Canvas" to "Disabled"
(In the browser's address bar, go to chrome://flags#disable-accelerated-2d-canvas, change the setting, relaunch the browser.)
Since the fix for this issue has clearly changed, I would suggest in general turning off any hardware-accelerated text-rendering/2D-rendering features in the future if this fix stops working.
On Google Chrome 55, this issue appears to have cropped up again. As anticipated, the fix was disabling hardware acceleration, it just changed locations.
The new fix (for me) appears to be:
Settings -> Show advanced settings... -> System
UNCHECK "Use hardware acceleration when available"
https://superuser.com/questions/821092/chromes-fonts-look-off
The issue might be more what we don't set in our CSS than what we do set.
In my case, FF is showing text in the default Times New Roman, while Chrome uses Montserrat as expected.
This happens to be because in Chrome I set Montserrat as the default, while FF has no default.
So, I think that some browser differences are rooted in the browser's configuration rather than in my CSS.