I've added a custom font to my project using font-face along with font-family in this way:
#font-face {
font-family: "Caprice";
src: url("../fonts/Caprice.ttf") format("truetype");
}
html,
body {
margin: 0;
padding: 0;
font-family: "Caprice", Arial, Helvetica, sans-serif;
}
But the result is that the font, instead of being rendered as it should, it's being rendered in a very very "creepy way". Here's an image to let you better understand:
I've tried changing font but the result is neatly the same. I've also tried the page in different browsers without any success.
What am I doing wrong?
All the fonts I've tried are totally different from what I'm seeing displayed.
Related
I'm building a simple landing page here. I'm calling a custom font (Harbour) via #fontface but on Chrome, the title first defaults to a basic font. It takes a refresh for the custom font to appear. Anyone know what's happening here?
You are not declaring the font in any of your elements.
in your base.css; you are declaring those fonts at body:
font-family: 'Trash', Futura, 'IBM Plex Sans', Arial, sans-serif;
you should put:
font-family: 'Harbour';
in the element you want it to open
like:
h1 {
font-size: 2em;
margin: 0.67em 0;
font-family: 'Harbour';
}
This is my first time using font-face, and it's really hard for me to actually render the exact font, especially when it comes to *.ttc files.
Here is what I've done so far:
#font-face {
font-family: 'FontName';
src: url('../fonts/font.ttc') format('truetype');
font-weight: normal;
}
.header {
font-family: 'FontName;
}
When I check the network tab in Chrome's inpector, I can see that the font is loaded successfully, but the result text still uses another font.
What did I do wrong? Please help me to fix this problem. Thanks a lot in advance.
Update
One more thing that I figured out. When I style inline, the font is rendered correctly.
<p style="font-family:'FontName'">test 2</p>
Is there any delay in loading or something like that?
You can't use font collections for CSS #font-face declarations as the purpose of this syntax is to, unambiguously, specify which single font resource must be used by the browser when you specify some specific combination of font-{family, weight, style, etc} in your actual page CSS.
Specifying a font collection makes this impossible: there is no syntax to specify which font inside that collection you would need, so ttc are not supported by design. Extract the individual font assets you need (if legally allowed!) and then be explicit about which single font you need for which single #font-face declaration.
And remember that this is possible:
#font-face {
font-family: myfont;
font-weight: normal;
src: url('that-font-I-like-Regular.woff') format('WOFF');
}
#font-face {
font-family: myfont;
font-weight: bold;
src: url('that-font-I-like-Regular.woff') format('WOFF');
}
...
:root {
font-family: myfont;
}
h1 {
font-weight: normal; /* will use that-font-I-like-Regular.woff */
...
}
p {
font-weight: bold; /* will _also_ use that-font-I-like-Regular.woff */
...
}
I have a website for internal use that uses the Roboto google font. Here is the code that includes it.
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">.
&
body {
font-family: "Roboto";
}
b, strong {
font-weight: 700;
}
I've found someone at my company who's Chrome can't render this font when it is bold. I could replicate it by going to Youtube and making Roboto text bold with the inspect element. This problem does not occur on any other computers. The Chrome is up to date and has no extensions installed. I've tried closing and reopening Chrome as well as several hard refreshes. Forcing the browser to repaint with resize, CSS, or JS does not fix the issue either.
This does not dupe question Font Weight with Google Fonts Roboto, normal (400) and bold (700) work, light (300) does not. The problem occurs on both http and https versions of the site, the font is loaded with //, and I get no insecure content warnings from Chrome.
What is causing this, and is there anything I can do on the website or on the persons computer to further troubleshoot or fix this?
If you use Google Fonts
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">
without a fallback font like;
body {
font-family: "Roboto";
}
b, strong {
font-weight: 700;
}
You should provide that font-weight in your Google Fonts link like;
<link href="//fonts.googleapis.com/css?family=Roboto:500,700" rel="stylesheet" type="text/css">
Or, you should provide a fallback font;
body {
font-family: "Roboto", sans-serif;
}
By doing so, if your browser can't find the font-weight: 700; Roboto font, it can use a suitable sans-serif font from your system.
In ideal situations, using a font-family to support all possible computer systems like;
body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
will solve all of these problems.
I am using a Grails rendering plugin to generate PDF.
I want to include CSS with my PDF to render it nicely. I found an example on the rendering plugin website
I put the CSS below in print media so that it works for PDF, but this does not work for me. I also do not know how to change the font from Arial to another font. Can someone explain this to me?
The plugin uses Arial font with this CSS:
#font-face {
src: url(path/to/arial.ttf);
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: cp1250;
}
body {
font-family: "Arial Unicode MS", Arial, sans-serif;
}
You need arialuni.ttf not just arial.ttf download it here: http://www.findthatfonts.com/search-2683324-hTTF/fonts-download-search-engine-ARIALUNI.ttf.htm
Then
You have to give your #font-face a font-family name like this:
#font-face {
font-family: "Font-Name";
src: url(path/to/font.ttf); // you have to add your font.ttf file to the server in a folder like assets/css/fonts or something.
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: cp1250;
}
body {
font-family: "Font-Name", Arial, sans-serif; // you called your font Font-Name in the #font-face so now you can use it as Font-Name everywhere else in you css.
}
Otherwise your arialuni.ttf has no name so you can't use it in other divs in your css.
The next is working for me good:
#font-face {
font-family: 'Calibri';
src: url(${grailsApplication.config.grails.serverURL}/fonts/calibri.ttf);
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
The -fs-pdf-font-encoding should be set in Identity-H.
And after it you can add something like
body {
font-family: 'Calibri';
}
It doesn't really matter what name you give the font, as long as you choose a name for the src you provide between te #font-face brackets, like font-family: "SomeName";.
Now, you can use the font everywhere using font-family: "SomeName".
http://www.i3physics.com/blog/2010/07/dsfsdf/
Here is an example.
The part where it said "PHP" (the right top corner) remained as slim as it was.
here is part of the css code
.wp_syntax_lang {
background-color:#3c3c3c;
position:absolute;
right:0;
padding:1px 10px 3px;
color:#ddd; font-size:9px; font-weight:800;
text-transform:uppercase;
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
border-radius-bottomleft:5px;
}
I tried bold, bolder, 700, 800, 900 and is not working under FF.
font-weight can fail to work if the font you are using does not have those weights in existence – you will often hit this when embedding custom fonts. In those cases the browser will likely round the number to the closest weight that it does have available.
For example, if I embed the following font...
#font-face {
font-family: "Nexa";
src: url("Nexa-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
Then I will not be able to use anything other than a weight of 400. All other weights will revert to 400.
If you want additional weights, you need to specify them in separate #font-face declarations with those additional weights, like this.
#font-face {
font-family: "Nexa";
src: url("Nexa-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: "Nexa";
src: url("Nexa-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: "Nexa";
src: url("Nexa-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
Usually each weight will have a separate font file the browser will need to download, unless you're using variable width fonts.
Its because the font size (9px) is too small to display bold. Try 11px or more and it works fine.
Most browsers don't fully support the numerical values for font-weight. Here's a good article about the problem, and even tough it's a little old, it does seem to be correct.
If you need something bolder then you might want to try using a different font that's bolder than your existing one. Naturally, you could probably adjust the font size for a similar effect.
If you're importing a Google font, you need to ensure you've specified all the weights that you would like to use.
In my case, I was using Google's Roboto font. I had to import it with several different weights, like this:
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" rel="stylesheet" />
Remember that each additional weight increases the amount of data each visitor needs to download, and can slow down the loading of your page, so only use what's necessary.
i was also facing the same issue, I resolved it by after selecting the Google's font that i was using, then I clicked on (Family-Selected) minimized tab and then clicked on "CUSTOMIZE" button.
Then I selected the font weights that I want and then embedded the updated link in my html..
For me the bold work when I change the font style from font-family: 'Open Sans', sans-serif; to Arial
I removed the text-transform: uppercase; and then set it to bold/bolder, and this seemed to work.