I'm having trouble with some CSS.
Currently I'm using #fontface which works fine and dandy.
However for the times that it doesn't I have implemented other fonts to be read however I'd like to style them all a bit differently.
For an example, if Rockwell is displayed I'd like the font-weight to be set to bold. But not if it is Times New Roman.
Furthermore, I'd only like the "letter-spacing: -4px;" to apply if Times New Roman is being displayed.
Is this even possible? And if so, please assist with some code.
h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia; letter-spacing: -4px; }
h1 span{ font: 88px Times New Roman, Georgia, serif; letter-spacing: -4px; }
You have expressed yourself clearly, don't worry.
I do not think there is a direct solution, however in some cases you can use this workaround.
Embed font.
Detect if you succeed (http://www.lalit.org/lab/javascript-css-font-detect/)
If yes/no add to <html> class="fontName" attribute.
In CSS add special declarations, like .fontName body { font-weight:bold; } - be prepared it means a lot of work. Especially with bolding - keep in mind how does <strong> will look like.
Good luck ;)
As every workaround it has some issues - like JS availability and so on. Maybe it will work for you.
What you are trying to do is definitely possible. In order for your script to work as you have it written. You need to follow the steps below:
Upload the font to your CSS directory (if thats where you want to host the font). (You can't just call the ChunkFive font without uploading the font to the directory your CSS is in based on your code)
Specify the #font-face above all your other CSS styles where you plan on using the font.
#font-face {
font-family: "ChunkFive";
src: url('chunkfive.ttf'); // Or whatever the font name is
}
Once you have accomplished steps 1 and 2 you can then call your font like you specified above :
h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia}
For a more definitive guide into font-face and CSS3 fonts I suggest reading this very thorough and informative blog post:
http://webdesignerwall.com/general/font-face-solutions-suggestions
Cheers and goodluck
Use two classes, one for each font
.font1 { font-family: 'Chunkfive'; font-weight: bold; }
.font2 { font-family: 'Times New Roman'; letter-spacing: -4px; font-weight: normal; }
Then in your HTML, use them like
<h1 class="font1">...</h1>
<div class="font2">...</div>
Related
Here is the problem. So everything works fine for me on my machine, localhost and when the website is uploaded to online host. But I got my friends to go to the site to check if everything is working and the regular Roboto font loads fine but the thin version of it doesn't. I originally just had the import link from google for the font but later added the font face import code that I found on here but that doesn't work too. I even tried adding the font-weight property but it still doesn't work.
I need help my head hurts real bad here's the code enjoy
Top of the css file
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
#font-face {
font-family: 'Roboto';
src: local('Roboto'), url(fonts/Roboto-Regular.ttf) format('ttf');
}
#font-face {
font-family: 'Roboto thin';
src: local('Roboto thin'), url(fonts/Roboto-Thin.ttf) format('ttf');
}
Class for one of the texts that uses the font
.txt2 { /* text */
font-family: 'Roboto thin';
font-size: 24px;
color: white;
text-align: center;
margin-top: 1%;
margin-bottom: 5%;
margin-left: 20%;
margin-right: 20%;
font-weight: 100;
}
The #font-face is loading a local file, but also, import in my experience doesn't work like how you expect. I'm on mobile so I can't get too detailed but I usually call the fonts url in the html using a tag in the head. This has the added benefit of the browser being able to pull that file in asynchronously, rather than after the css file loads, which will give you a small speed increase.
More than likely this code is actually failing for you too, but your browser has the font in cache and it's safe to use so it does. Or you have robot installed outright.
EDIT: Alright, I'm on a desktop now, and want to clarify some things.
#font-face defines a font and how it can be called. It gives it a name, where the font files are stored, and if it's considered italicized, normal, etc.
The Google Fonts file you are calling contains that information, it's whole purpose is to define the things you are putting in your #font-face lines.
As I said, #import is a bit tricky.
First and foremost, make sure your #import statement is the very first thing your CSS file contains. If you only have one #import, it should be the first line.
Using Google Fonts' other option, the HTML , will work marginally faster. The difference may stop your users from seeing a flicker of the wrong font on their first page load.
Remove the #font-face rules you have altogether, they are overwriting your imports.
As a best practice, give your font-family rule a fallback. font-family: 'Roboto thin', arial, sans-serif;
Using this CSS:
body > h1.title {
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
font-family: Arial, Sans-Serif;
color: orange;
text-align: center;
text-transform: uppercase;
}
<h1 class="title">Back To Basics Log</h1>
renders like
Then, if I add <b></b> or <strong></strong> tags in
<h1 class="title"><b>Back To Basics Log</b></h1>
it looks like
Super bold! I expected a bold tag on content that was already font-weight: bold; to be disregarded, but it's actually made it even bolder.
Is there a way to get the second version (the one I'm seeing with the <b> tags added) through CSS?
--- Edit ---
Actually, I just tried commenting out font-weight:bold; and changes nothing! Is this a problem with my font? Why isn't font-weight:bold; working?
--- Edit 2 ---
It seems like the font is already bold from earlier stylings. When I use "lighter" as a value, that as working, so it seems the font is already bold. So the only question left is "is it possible to get super bold using just css?
Valid keywords for font-weights are:
lighter
normal
bold
bolder
So you might want to test bolder. Or numeric font weights in the range 100, 200, 300, 400, 500, 600, 700, 800, 900
Different fonts are only available in certain weights so you may need to experiment. For more info see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
You can use font-weight: 900 instead of font-weight: bold. Because 900 is maximum value for this property and bold is the same as 700.
For example:
.title {
font-size: 2em;
font-weight: 900;
margin: 0.67em 0;
page-break-after: avoid;
font-family: Arial, Sans-Serif;
color: orange;
text-align: center;
text-transform: uppercase;
}
<h1 class="title">Back To Basics Log</h1>
While the various links in the other posts may explain things, SO policy is to always have the answers on the same page as the questions, to avoid having to click all those links.
Here we go then.
The answer is in the browser's built in style sheets. h1 has font-weight: bold by default, and b and strong have font-weight: bolder.¹
Now there are many different font weights. We don't have just normal and bold, we have 9 different ones, numbered 100 to 900.² The normal weight is 400, and the definition of bold is 700. The definition of bolder is "more bold than the font weight of the parent".
So if you have a h1 with a b inside, the h1 will be bold (i.e. weight 700), and the b inside will be bolder (i.e. more bold than 700).
That's basically all there is to it.
Knowing this, there are multiple solutions:
Use a font that has only two weights.
This is not the best way though. What if the next system update to the user's computer includes a version of this font with more weights?
Write b {font-weight: bold} in your stylesheet, or to be more thorough, h1 > * {font-weight: inherit}, so that the contents of the h1 will always be the same weight, no matter what.
Simply remove the <b> tags from the content of the h1. In this particular case, I don't see any reason to use them.
Or, leave everything as is and accept that you can put text inside a h1 that is even bolder. That might have its uses: <h1>Back to <strong>Basics!</strong></h1>
¹ This is not the case in all browsers though. That's why we need reset style sheets.
² Not all fonts have all font weights. Many have only two.
While looking for the answer to this question, I found that there is a different behavior among different browsers.
(I tested Chrome (Version 72.0.3616.0) and Internet Explorer 11)
<strong><span style="font-weight: bold;">Bold in Chrome, Super Bold in IE</span></strong>
<strong> with CSS font-weight: bold renders as bold in Chrome font-weight: 700; while IE sums things up ending with super-bold font-weight: 900;
I've been having this problem for a while now, but I notice a lot of websites seem to have a very ... it is hard to explain, their fonts have a sort of "strength" to them. Like a bold, crisp, sharp definition. For example, I cite this page:
CSS-TRICKS
The way it looks comes out beautiful; Even the image that I embedded here does not do it justice. Spending time, I traced the exact font, exact settings, EXACT everything - I tried to reproduce it, but I get a COMPLETELY different result, even in the same browser.
Using the same font, same size, same everything I know of to match, this is how it looks on my end.
The specific code I am matching is the font, sizing, weight, and line height; which is;
#import "http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic";
html {
font-family: 'Noto Sans', sans-serif;
font-size: 17px;
line-height: 1.5;
}
I have attempted to dig deeper, and using FireFox I found a bit more context, I tried emulating that as well with some more specific code it serves up; Which is...
#font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 400;
src: local("Noto Sans"), local("NotoSans"), url("http://themes.googleusercontent.com/static/fonts/notosans/v4/LeFlHvsZjXu2c3ZRgBq9nD8E0i7KZn-EPnyo3HZu7kw.woff") format("woff");
}
But that continues to deliver the same results.
This is true of almost every time I have ever tried to reproduce that crisp feeling from production websites - and I literally have no idea what is going on. Can anyone explain to me why my fonts never match up with these sites, even using the same code?
Using Firebug, can you confirm that the #import CSS is actually being fetched over the network?
Here's what the Firebug console looked like for me when I tried this in a simple test page that rendered the font just fine on my system: (I'm not allowed to post images yet but you can see the screen shot here: http://i.imgur.com/PW8nU3L.png)
Here is the HTML I was testing with:
<html>
<head>
<style type="text/css">
#import "http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic";
html {
font-family: 'Noto Sans', sans-serif;
font-size: 17px;
line-height: 1.5;
}
</style>
</head>
<body>
Hello, world
</body>
</html>
The other thing you might want to check is if it's browser-specific, i.e. does this work okay with Chrome?
I was searching here and in Google for a couple of hours but I could not find any clue on my issue, or I found some answers with non stable or poor supported solutions.
To make it short and clear I have a web page with a menu bar, where I use a condensed font from "Google Web Font":
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin">
Then I have a CSS like this:
.menu {
font-family: 'Yanone Kaffeesatz', 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
font-size: 23px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
What I want to do is to have font-size: 23px; assigned to font-family: 'Yanone Kaffeesatz' and font-size: 18px; assigned to font-family: 'Trebuchet MS', etc for the others.
Why I want to do that? Because if the user is offline or is unable to download the font from http://fonts.googleapis.com the layout get messed up, because 23px is right for the condensed font 'Yanone Kaffeesatz', but is very large for the others (almost the double in width).
Is there a way to do something like this? (just to explain the concept)
font-family: 'Yanone Kaffeesatz'[size:23px], 'Trebuchet MS'[size:18px], Arial[size:20px], Helvetica, Sans-Serif;
Sass can't really help here since it doesn't actually run on the client. Sass simply compiles into CSS. Also, I'm pretty sure there's no real way to get CSS to set various font-family/size pairs either.
I know this doesn't really address your "with the same class" bit, but as far as I know, the best way to do this is going to be JavaScript, which is pretty unfortunate because setting typeface/sizing pairs is something more people should do. David Walsh wrote an article about the Google Fonts API and mentions some of the methods the JavaScript font loader provides.
By defining an alternate body class with the non-webfont styles, you can use the inactive callback to fire off a function to apply that class.
There are methods of doing what you're asking, but not reliably, and not with Google Webfonts, since you have no control over the request made to Google's server.
You can try it with Sass, a CSS pre-processor. Sass provides the conditional implementation of CSS styles.
Here's:
Conditionals & Control Structures
https://gist.github.com/chriseppstein/674726
This question already received answer on SO. For example:
css different font sizes on different families
Specifying different font-sizes for different font-families
Assigining different font-size per each font in one font-family
In addition, there are several external references like:
Specifying different font-size for different fonts in a font-family
Setting Multiple Font Values
Hope these help :-)
Basing on your experience in frontend and web applications, can you provide good and solid source or list with web-safe fonts? Or any other good tool ensuring font safety in web browsers?
Most of the time I was using Squirrel Fonts but a lot of fonts, which my designers use, are blocked there and the only way I can show them are PNGs.
There's no absolute safety, unless you're going with generic classes like "serif", "sans-serif" etc.
Here are some resources that can give you an idea about the most prevalent fonts:
https://web.archive.org/web/20160610001431/http://www.awayback.com/revised-font-stack/
http://cssfontstack.com/
You'll see that no single font exists on all operating systems. The best thing you can do is to use a font stack that covers the greatest percentage and hope for the best. Using a sensible font stack is the way to go...
You can generator font from here also http://www.font2web.com/ & you can use Google fonts also http://www.google.com/webfonts
There is no definitive list of web safe fonts that I have found. The research gave me some basic idea but then I had to experiment on my own machines. I wanted something that would work on Windows, Mac, and Linux machines. Luckily I had one of each.
There are 5 types of fonts recognized by HTML, namely serif, sans-serif, monospace, fantasy, and cursive. However, I see 6 types myself, being as cursive breaks down into scripts and handwritten fonts in my mind. What I came up with for 'web safe' font stacks is as follows:
/* Web Safe Font Stacks */
.head { font-family: Georgia, 'Times New Roman', serif; } /* H1-H6 */
.para { font-family: Verdana, Arial, sans-serif; } /* Paragraphs, body text */
.mono { font-family:'Courier New', Courier, monospace; } /* code, pre, etc. */
.fant { font-family: Papyrus, Impact, fantasy; } /* Fantasy */
.curs { font-family:'Apple Chancery', 'Lucida Calligraphy', cursive; } /* Cursive */
.hand { font-family:'Comic Sans MS', Chalkboard, cursive; } /* Handwritten */
I hope that helps...
The list of “safe” fonts, if that means a list of font names that will give you the desired rendering in all situations, or even in almost all situations, is exactly the empty list.
Most purported lists of “web-safe fonts” fail immediately if you test them on Android, for example.
If you actually meant to ask about the problems of using embedded fonts (with #font face), I suggest that you check the previous questions and answers on them first.