I'm currently writing a web page in HTML5, trying to obtain Avenir Black as a font for a block of text. However, it seems that each time that I define it as the font family, it doesn't work, and displays the default font instead. Now I don't really want to modify the CSS file since it's only for one block of text... What's the problem?
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-family : Avenir Black ; font-size : 54pt"> SAMPLE </p>
</body>
</html>
Displays http://imgur.com/QlUaXTd.
Font-family names with spaces need apostrophes as Evan Mosseri has said, so:
<p style="font-family : 'Avenir Black' ; font-size : 54pt"> SAMPLE </p>
However, the font must also be installed on the computer running the browser, which doesn't seem likely for browsers in general, even if it is installed on your computer.
You can 1) give up and use something like Arial Black, or 2) use an image, or 3) find and purchase a downloadable Avenir Black font. For the latter, try a search for "Avenir Black WOFF." Type as images is a Bad Idea™ and best left alone for a number of reasons, not the least of which is accessibility.
It would not have provided a complete solution this time, but whenever CSS doesn't work, the CSS Validator is your friend: http://jigsaw.w3.org/css-validator/
Edited to add: You should always use an alternative list in font-family, ending with one of the generic font names. So, in your case:
font-family: 'Avenir Black', 'Arial Black', sans-serif;
That way, if Avenir Black is installed on the computer running the browser, it will be used. If not, Arial Black will be used. If neither is available, you will get some sans-serif font instead of the default font.
A Google search for "fonts similar to Avenir Black" turns up the Google font Nunito: http://www.google.com/fonts/specimen/Nunito It's free, or you can get the real Avenir Black for $30.
Try font-family:"Avenir Black" but you may need a font face declaration
Related
Here's the font style I'm trying to copy. It is the Open sans font family, font size 14px, font-weight 300
And here's what I have achieved so far. Don't mind the spacings, but the font style I applied here is the same as above. But as you can see, my main problem here is the font weight being bolder, it doesn't look like font-weight:300 just like my above example
I'm not sure what's happening here. By the way the orig site I'm trying to copy the font style is based on bootstrap and the current I'm working on is on buefy or bulma.
So if I try to set the font weight it can only apply the sizes 600 and 800. I aim to set it to 300 so that it should look like the same as the site I'm copying.
I also tried buefy/bulma typography class helpers(has-text-weight-light, has-text-weight-bold) but it can only get bold and not lighter. I've also read about importing open sans font coming from google fonts and I'd just select the font weights that I want, but I have not done so yet since I'm trying to preserve what's already in the code, I don't see any importing of fonts here in our codebase as far as I know of, but open sans work fine, just not the font-weights.
I have imported the google font open sans font, but you need to make sure that you are importing the (Light 300).
Look at the import link it has 300 and 400.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
span{
margin-right:10px;
}
div{
font-family:'Open Sans';
font-size:14px;
font-weight:300;
}
<div>
<span>About Us</span>
<span>Products & services</span>
<span>Portfolio & Case Studies</span>
<span>Contact Us</span>
<span>News</span>
</div>
In the google font site select all the weights you want to use most likely you haven't selected the 300 depending on where you declare it you should see on html
wght#300
like this
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
or on your css file
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
I'm using the Roboto Family of fonts. In general, it fits perfectly to all my needs except one. The length difference between ndash and mdash is to small. It is a very important aspect, because as a part of our services - we are helping editors, proofreaders, writers and typeseters.
To fix the issue, we adjusted the font and we hosted it on our server. Unfortunatly, this has an significant impact on page loading and rendering speed (even the preloading the font is done).
I would like to switch into CDNJS version of the Roboto font and I'm wondering if there is a CSS or CSS+JS way to fix the issue. The idea is to select all the ndashes on the site and to shorten all of them with either JS or CSS, to be exactly in the middle of the length between dash and mdash. In the origin Roboto font ndash is twice so long as dash but mdash is just a little bit longer than ndash.
An alternative is, to replace all the ndashes with an ndash from another font.
Any other ideas?
You mention replacing the ndashes and mdashes from another font.
Have you considered using the CSS font-face unicode-range property?
If you have a font that has the sort of size dashes you want you could substitute those for the dashes in Roboto.
I couldn't immediately find a font that had sufficiently different dashes to the standard ones to demonstrate, but here's the code from MDN which substitutes the ampersand in Helvetica with the slightly more flamboyant one from Times New Roman. This method saves having to do anything to your actual text.
#font-face {
font-family: 'Ampersand';
src: local('Times New Roman');
unicode-range: U+26;/* 2013-2014 ndash and mdash */
}
div {
font-size: 4em;
font-family: Ampersand, Helvetica, sans-serif;
}
<div>Me & You = Us</div>
I use unicode emoji icons on my website as they are very convenient (in particular regarding database storage).
The thing is they are rendered differently by each client. I particularly dislike some coloured emojis, as they don't integrate well in my website's minimalistic design.
I see there are fonts around that provide a quite complete set of monochrome emoji characters : Symbola, DejaVu, Noto-Emoji. But I found only partial and confused information about how to use them.
Since it's quite hard to test (rendering very dependent on browser / platform), I'd love to know if I came up with a good solution.
To be clear, the goal is to use the Noto-Emoji font ONLY for the emojis. For the rest, I'd like to use the font defined by other parts of my css.
Here's what I came up with :
Download NotoEmoji from https://www.google.com/get/noto/
Add this to my css :
#font-face {
font-family: 'NotoEmoji-Regular';
src: url('NotoEmoji-Regular.ttf') format('truetype');
unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
}
body{
font-family:"NotoEmoji-Regular";
}
Is this this a correct way to achieve what I'm trying to do ? I'm a bit doubtful since it seems quite easy and very useful, yet I didn't find a complete example of it online.
These are my concerns :
This seems to work well on my setup (Chrome, Windows 10). How compatible is this with other setups ?
Isn't there a cdn hosting the font ? The font is around 400kb, so it would be great if it wasn't downloaded for my site only
Thanks !!
edit :
Testing with the following code, it works well on my desktop (all icons are red and have a consistent style). On my phone (android 6), "eye" and "tool" aren't red. All the other icons work well.
<html>
<head>
<style>
#font-face {
font-family: 'NotoEmoji-Regular';
src: url('NotoEmoji-Regular.ttf') format('truetype');
unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
}
body{
font-family: "NotoEmoji-Regular", "Roboto", sans-serif !important;
color: red;
}
</style>
</head>
<body>
🔗 Chain <br/>
◉ Dot <br/>
👥 Group <br/>
👤 Person <br/>
📂 Folder <br/>
👁 Eye <br/>
📃 Scroll <br/>
🛠 Tools <br/>
</body>
</html>
I'm doing a Photoshop-to-XHTML conversion, and the website designer used the Myriad Pro Semi-bold font which looks good in the photoshop file, but when I try the semi-bold option in CSS, it looks pretty much like a normal bold font, which is too bold for my purpose. Is there a way to achieve a nicer looking semi-bold font in HTML and CSS or am I just stuck with 'font-weight: 600;'?
In CSS, for the font-weight property, the value: normal defaults to the numeric value 400, and bold to 700.
If you want to specify other weights, you need to give the number value. That number value needs to be supported for the font family that you are using.
For example you would define semi-bold like this:
font-weight: 600;
Here an JSFiddle using 'Open Sans' font family, loaded with the above weights.
The practical way is setting font-family to a value that is the specific name of the semibold version, such as
font-family: "Myriad pro Semibold"
if that’s the name. (Personally I use my own font listing tool, which runs on Internet Explorer only to see the fonts in my system by names as usable in CSS.)
In this approach, font-weight is not needed (and probably better not set).
Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work.
Testing with Segoe UI, which often exists in different font weight versions on Windows systems, I was able to make Internet Explorer 9 select the proper version when using the logical approach (of using the font family name Segoe UI and different font-weight values), but it failed on Firefox 9 and Chrome 16 (only normal and bold work). On all of these browsers, for example, setting font-family: Segoe UI Light works OK.
For me the following works good. Just add it. You can edit it as per your requirement. This is just a nice trick I use.
text-shadow : 0 0 0 #your-font-color;
font-family: 'Open Sans'; font-weight: 600; important to change to a different font-family
By mid-2016 the Chromium engine (v53) supports just 3 emphasis styles:
Plain text, bold, and super-bold...
<div style="font:normal 400 14px Arial;">Testing</div>
<div style="font:normal 700 14px Arial;">Testing</div>
<div style="font:normal 800 14px Arial;">Testing</div>
Select fonts by specifying the weights you need on load
Font-families consist of several distinct fonts
For example, extra-bold will make the font look quite different in say, Photoshop, because you're selecting a different font. The same applies to italic font, which can look very different indeed. Setting font-weight:800 or font-style:italic may result in just a best effort of the web browser to fatten or slant the normal font in the family.
Even though you're loading a font-family, you must specify the weights and styles you need for some web browsers to let you select a different font in the family with font-weight and font-style.
Example
This example specifies the light, normal, normal italic, bold, and extra-bold fonts in the font family Open Sans:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800">
<style>
body {
font-family: 'Open Sans', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div style="font-weight:400">Didn't work with all the fonts</div>
<div style="font-weight:600">Didn't work with all the fonts</div>
<div style="font-weight:800">Didn't work with all the fonts</div>
</body>
</html>
Reference
(Quora warning, please remove if not allowed.)
https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts
Testing
Tested working in Firefox 66.0.3 on Mac and Firefox 36.0.1 in Windows.
Non-Google fonts
Other fonts must be uploaded to the server, style and weight specified by their individual names.
System fonts
Assume nothing, font-wise, about what device is visiting your website or what fonts are installed on its OS.
(You may use the fall-backs of serif and sans-serif, but you will get the font mapped to these by the individual web browser version used, within the fonts available in the OS version it's running under, and not what you designed.)
Testing should be done with the font temporarily uninstalled from your system, to be sure that your design is in effect.
I've been doing front end development for a long time, and I have NEVER come across a bug like this before...
Save the following HTML to a file and view it in Firefox (mine is 3.6.3):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body { font-family: Helvetica, Sans-Serif;}
h2 {font-weight: normal;}
</style>
</head>
<body>
<h2>Some normal text <strong>some bold text</strong> weird huh?</h2>
</body>
</html>
If you don't want to give it a shot the output is like your cat walked across your keyboard while character map was turned on, except in the strong tags.
I feel like this may be a font issue? When I get rid of font-weight: normal it goes back to normal, but I don't want everything to be bolded in my h2... Anyone have any ideas? More importantly, is anyone able to reproduce this??
Thanks.
EDIT
Here's a screenshot. It works fine in all other browsers, and all text that has not previously been set as bold (normal text) renders fine.
This seems to be something Helvetica specific. Here is a number of reports with screenshots that look exactly like your case.
Mozilla Bug #444203 - Helvetica font rendering garbled/garbage on some web sites
Mozilla Forum - Firefox 3 displays garbage characters
They mention workarounds. On server side:
if the CSS definition defines the font family using font: instead of
font-family:, this bug does not occur.
when setting the font-family by way of font-family: (instead of by font:),
the error only occurs once you're showing fonts over 20pixels in size. It
doesn't matter if the font size is set by way of em or px, but once the actual
display size is over 20px, it gets garbled.
On the client side, it seems to be recommended to remove or re-install the Helvetica font. Can you check your fonts folder for any HELVETIC.TTF or similar files?
Have you checked your encoding?
When you remove Helvetica or Sans-Serif and replace them with other fonts, do you have the same problem? For example, have you tried using another fonts and then combinations of Helvetica and Sans-Serif with those:
Courier, Helvetica
Courier, Sans-Serif
This is may be due to a strange version of Helvetica loaded on your machine. Try disabling that font locally and see what happens.
Looks like this is something to do with the encoding (and not font).
Check your encoding as it is decided by firefox: View -> Character Encoding.
Is it UTF-8?
Does changing it to anything else (say Western (ISO8859-1)) change the characters?
Can you try disabling your addons, especially the theme and check (start firefox in safe mode)? Perhaps some add on is meddling with the encodings...