I have created a website based on Grails web framework that uses Groovy.
For some reason I'm not able to get the fonts to load properly.
I'm using: font-family: "Avenir Next Ultra Light","Avenir Next";
On my Mac, the font loads perfectly using Safari and Chrome but not on Firefox. On other systems I've noticed that the font doesn't load at all.
I understand that it's a paid font but just not sure what to do to get the font incorporated into the site properly.
Any advice would be appreciated!
Store the font file somewhere on the server.
#font-face {
font-family: NAME;
src: url('/FILEPATH/FILENAME.ttf');
}
p {
font-family: NAME;
}
Browser Support: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
EDIT: And, as Alex K. said, make sure you have a license if it's a commercial font.
Can't speak for FireFox but a more important fact is that the font must exist in an appropriate format on all machines viewing the page. If the font does not exist as an installed font it must be embedded in the page, something you need a license for if its a commercial font.
I would suggest browsing for something similar and using the boilerplate from https://www.google.com/fonts.
Related
Recently had a customer send in a ticket complaining that their font has changed (within the week or so). The font on the site has not changed in probably a decade. What I suspect is that perhaps a recent windows up that times in line with the change is effecting the font he sees, or, more likely, a setting changed on his end.
the font we use
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
It is my understanding that Helvetica Neue will likely get replaced by something else on windows since, just from googling, I find that font is not included in windows.
My question is, is there any way I can help debug this on his end to figure out exactly what is going on? It does make the site difficult to read for this user and I would like to fix it, and also know for sure what I am talking about. I usually try very hard not to just reply with, "looks good on my machine". Inspecting it shows the same font family as what I posted above.
None of the font options in that css appear to be what is showing.
The one distinguishing trait I can see in the font is the letters de overlap or touch.
This is for web content, the browsers mentioned where most recent Chrome, which I also tested on (verified exact same version numbers) and did not have the issue, and Edge which I do not have.
If you can't access their computer, it's going to be hard to pinpoint the exact cause. Windows font substitution is the normal culprit in this situation:
As stated here:
https://office-watch.com/2021/windows-substituting-arial-font-for-helvetica/
"Windows is setup to use Arial whenever it sees a reference to ‘Helvetica’. This happens at the Windows level and doesn’t just apply to Microsoft Office. Most web browsers get the same thing – web pages that ask for ‘Helvetica’ to display in web page will get the Arial font instead. It drives web designers crazy, especially since CSS has a way to choose from a family of preferred fonts.
Way down in the bowels of the Windows Registry is HCLM\SOFTWARE\Microsoft\Windows\NTCurrentVersion\FontSubstitutes which lists the substitutions."
Additionally, if you run a comparison of arial vs helvetica neue...using the word video you mentioned, you get this:
Notice the difference in kerning (separation between letters/characters) between characters 'd' and 'e'. Arial appears 'clumped' when compared to Helvetica Neue.
I have no reputable source to provide, but this exact situation has happened to me before. It was caused by me installing a faulty font of a similar name.
It was hell to read most websites and I had to get a chrome extension to change everything to Arial to be readable. Ask them if they're having this problem on other websites as well then tell them to delete the "Helvetica Neue" font file on their computer (Mine was named Helvatica Neue56878 if it helps). This solved the problem for me.
How to debug: Check whether the specific computer have the Helvetica font installed. You can do this by going to the Fonts settings of windows. To open Font Settings just open windows search and type Font:
Font Settings will show you Available Fonts that are installed in your computer. Type Helvetica in the search bar and see if Helvetica font is installed:
If it's not, you can go and download and install the font on that computer and the problem would be solved.
CSS solution: To avoid this problem from happening in the future, you can include the font's .ttf file in your project and use #font-face to set it as a font on your project.
#font-face {
font-family: "digital-7";
font-style: normal;
src: url("~/assets/fonts/digital-7.ttf");
}
You can use it like so:
.container{
font-family: "digital-7";
font-size: 4em;
color: black;
}
I know this is an extremely basic and stupid question, but I seem to be having a genuinely curious problem.
When using what are supposed to be web-safe fonts like Didot, and using
header h1{
font-family: Didot, serif;
font-size: 36px;
}
my browser just displays the standard serif font.
In fact I can't seem to get it to display any web safe font, it will only display either the standard serif or sans-serif font. I know my selector is correct because I CAN change between serif and sans-serif, but I know its not displaying other web-safe fonts because I tried both Arial and Helvetica (which are both definitely web safe) and when I refreshed from one to another there was absolutely no difference in the font displayed.
I'm a complete beginner and I'm using the simplest possible beginner environment, just an html page linking to a css file which I'm opening with my browser (the url shows up as file:///C:/Users/Agent%201/Desktop/Web%20Projects/ResumeSite/index.html if that is at all relevant). I've tried opening it with both chrome and edge, same results on both
Is there something wrong with my css? Or are there limitations when just opening a local html file with my browser?
Sorry if I'm this is a really dumb question, but I really can't find an answer as to why my fonts aren't working, I've tried !important and some other weird solution I found which involves changing the selector to "header h1, header h1 *" and that did nothing.
Thank-you for any help you can provide me!
When using what are supposed to be web-safe fonts like Didot, and using...
Didot is not a "web-safe" font.
Didot is included with macOS, which may lead some web-designers to assume that it's also available on other platforms (like Windows, Linux and Android) or that those platforms have automatically-mapped equivalents (like how many browsers will map Helvetica to Arial), however that is not guaranteed.
Also, just because a typeface is included with an OS does not mean it is licensed to you to use commercially or in a website - you can be sued for publishing an OS-licensed font onto the public web without having your own font-license.
A "web-safe" font is a typeface that is broadly installed and supported by most contemporary browsers without the need for additional downloads or font installations.
Many typefaces are broadly installed, such as Microsoft's Core fonts for the web which are preinstalled on all Windows computers - and many other operating systems such as macOS either come with the same fonts or have very similar equivalents (e.g. Helvetica instead of Arial) which are automatically mapped by the browser.
The only way to determine if a font is "web-safe" is by doing your own leg-work and manually checking to see if all-or-most of your target users' devices have that typeface available. You can check font availability on Wikipedia and other sites:
macOS: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
Windows: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
iOS: http://iosfonts.com/
Android: Consult Android's fonts.xml for the minimum set of stock fonts and default fallback mappings (e.g. "Helvetica" goes to "sans-serif").
You might notice that Android's font list is very... short. That's because the base Android OS isn't what ships on most peoples' phones: Google's layer on top of Android, and OEMs (like Samsung, etc) will add their own fonts on top, but I don't know where to get that list from at-present, sorry.
A "web-safe font stack" means that at least one of the fonts listed in a font-family property value can be safely assumed to be available for use, not that all of them are - nor that the first-preferred-font will be available.
And any font-family list can be made "safe" by adding a CSS fallback generic-family name to the end (i.e. specifying the least-preferred font). Those names are specified in the CSS Fonts Module and are:
serif
sans-serif
cursive
fantasy
monospace
In your case, the property font: Didot, serif is "web-safe" because it has the serif generic-family name at the end. Your visitors will only see the Didot font being used if they already have it installed on their computer, phone, tablet, etc.
If you do want to use Didot, then you need to publish it as a WOFF file and add it to your stylesheet with a #font-face rule: https://css-tricks.com/snippets/css/using-font-face/
My problem is a custom font works fine with the English language on Windows or Linux Chrome browser, but does not display other languages properly on Windows though it seems to work well on Linux.
I am using a custom font, "Source Sans Pro".
body {
font-family: 'Source Sans Pro', sans-serif;
}
Here are examples of rendering.
Linux rendering English
Linux rendering other languages ex:Tamil
Windows rendering English
Windows rendering other languages ex:Tamil
Let me know why it is happening and how to solve it.
Thanks in advance.
When debugging custom fonts, I open developer tools and do a few checks:
Check network tab, did the font file load?
Check elements, is the fallback applied instead of my custom font? In your example, using a fallback with serifs would make it much more obvious if the fallback was being applied.
If the font is being loaded and applied, is it capable of the styles I'm asking? Refined bold or light styles, Cyrillic or other languages require additional files. For example, try selecting Roboto and visit the Customize tab in the bottom drawer.
There are multiple ways to load a custom font. Seeing as Source Sans Pro is available on Google Font, here's a link to their documentation for getting started.
I want to have a consistent fonts display when user browse my web pages, I'm trying to use font squirrel to convert my fonts into multiple formats but it gives me error somehow...Stated that it is a licensed font.
But I've purchased the font previously, so how do I provide the license for my font in order to let me do the conversion?
depending on where you bought the font you might not have a license to use it on the web.
font web embedding usually requires a special license. (here's an example with different licensing options for Helvetica Neue).
If you want to use custom font on your page I would suggest having a font file with you page (in the same folder/directory). For example:
/folder
page.html
font.ttf
Then using css #font-face feature:
#font-face
{
font-family: font;
src: url(font.ttf);
}
and afterward apply it to any html element
body {
font-family: font;
}
Just trying to extend on Liviu's answer. Helvatica is not a web font. It comes with Mac OS X. So, unless the user has it installed, it won't show. If you are asking if you can embed it or not, the answer is yes, you can embed it. But that is NOT allowed.
If you must use it, go ahead define it as a font family, but also define a fall-back family. Just in case a user doesn't own a mac, they will see the other family font.
Lastly, if you wish to use a web font, maybe you could have a look at Google Web Fonts: https://www.google.com/fonts/ it has many options and it's fairly easy to use. You might even find a font that looks similar to Helvatica or any other fonts you have in mind.
Good Luck!
I downloaded a custom font (Gotham-Light.eot), but it doesn't work on Internet Explorer 9.
#font-face {
font-family: Gotham-Light;
src: url('Gotham-Light.eot');
}
This doesn't work. I'm using ASP MVC3 rebuilt, used custom tool, still nothing.
First, the goods:
#font-face {
font-family: 'ludger_duvernayregular';
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot?#iefix') format('embedded-opentype'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.woff') format('woff'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.ttf') format('truetype'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.svg#ludger_duvernayregular') format('svg');
font-weight: normal;
font-style: normal;
}
p.test {
font-family: 'ludger_duvernayregular', Arial, serif;
font-weight: 400;
color: blue;
}
Note, I used a font face that was purposefully easy to see as working. (And I don't have access to Gotham in a web font, so... I'm not even sure Gotham is licensed to use in web font form. If you do not have a license or the license does not allow for it, please respect that.) So you will have to do a little thinking about the paths to your font files.
What I've done is consult the blog post AlienWebGuy linked to, which is good. It's not long, so I'd read it. It boils down to:
Possibly a misconfigured MIME type for the font file. See below for more info. There's also a note that Apache may have this problem, it seems to be more of an IIS issue (according to the article).
You can trick (?) IE9 to use the EOT file instead of the WOFF, which apparently fixes the issue (according to the article).
Additionally, and as an aside, IE9 had a problem displaying the font with a jsFiddle demo using the same exact CSS. Very weird. IE7 and 8 worked fine, so I know it was working in some ways. I did not figure out what that was about, but I saved the same markup and CSS to a file on my site and it works fine.
Breakdown...
Let me explain what's going on in the above CSS. I'll go through each line. However, keep in mind I have the web font in the following file formats:
eot
woff
ttf
svg
You really probably only need eot, ttf and woff if you don't care to support legacy iOS. SVG translations are hard to obtain, though.
Now, first name your font so you can reference it:
font-family: 'ludger_duvernayregular';
IE9 Compat Modes:
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
Remember to verify the URLs you're using here actually lead to a real file. Put it in the address bar and see what happens (does it download? 404?).
On the following, though, I'm going to remove the full URL so you can see the entire statement, including the end.
IE6, 7 and 8:
src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),
Note this part:
.eot?#iefix <<< See below for an explanation.
Further IE CSS Fix
In some rare cases, IE will fail because the #font-face declaration
has too many characters. This can be solved in most instances by
adding a ‘#’ hash mark after the ‘?’ question mark. This buys you a
bit of extra room.
- From the Font Spring article
I have no idea why this works, so I'm taking their word for it.
Modern Browsers:
url('http://../ludgerduvernay.woff') format('woff'),
Safari, Android, iOS:
url('http://../ludgerduvernay.ttf') format('truetype'),
Legacy iOS:
url('http://../ludgerduvernay.svg#ludger_duvernayregular') format('svg');
Then use it:
p {
font-family: 'ludger_duvernayregular', Arial, serif;
}
I was actually surprised this works back to IE6. Anyways, notice that I use a full path to the file, not a relative one. That's usually a good place to start; check to make sure the link downloads. I'm making a big deal of this because it's basic and easy to screw up.
So if the file is downloading with the url and you've got it working in other browsers, and in IE6, 7 and/or 8, you can look at another possibility:
Fix IE9 on the Server Side (IIS)
Microsoft’s IIS server will refuse to send resources that it does not
have a MIME type for. The syntax we developed forces IE9 to take the
WOFF over the EOT, but if it is served on IIS, it will fail. This is
because IE9 requests the WOFF file, but since WOFF is not a defined
MIME type in IIS, a 404 Not Found error is returned. To solve this,
you must add ‘.woff’ with MIME type ‘application/x-font-woff’ to your
IIS installation.
- From the Font Spring article
So you may have to check your server isn't borking it. You can also use Chrome Console or Firebug NET tab to view the headers sent with the file.
Now I had a little help here, and I think you should think about the following options:
Google Web Fonts. Don't be a hero. They host the font, give you the include stylesheet markup, and presto whammo, you're in business. They also have some pretty cool fonts. There are other web font services, such as Typekit, Webtype, Fontdeck, and Fonts Live.
Font Squirrel has a #Font-Face Generator, which can give you all of the files you need (Warning: Only submit fonts you know to be licensed for web use.). Use the Expert mode, and it will give you a ZIP file with lots of great stuff, including a demo. The one I received you can download here. The interesting thing is, the generated CSS is identical to the Font Spring one, minus the comments. That's probably not a coincidence.
I found that awesome tool on this Opera Dev page. That is also worth reading.
And of course, that blog post AlienWebGuy linked to at Font Spring.
This stuff isn't hard, but you need to know how to troubleshoot. Always check that the file is downloading; you can use Chrome Console Resources tab or Firefox's Firebug add-on and watch the NET tab to see if it downloads. It if just literally won't work, post the page or code somewhere where we can get to it and we can review it.
Happy coding. :)
The super awesomely cool font used in the demo is Ludger Duvernay Regular. For more information, see Steve Cloutier/Cloutierfontes site. Thank you for making it free for personal use. :)
If you're following the instructions layed out here -- http://www.fontspring.com/blog/fixing-ie9-font-face-problems -- then it's most likely how your calling the fonts.
Make sure you are pointing to the right location from your stylesheet - the code you have above will only work if the font file is in the same directory as the stylesheet.
Hope this helps.
Gotham is a commercial product, and if you have just downloaded it from somewhere, it’s probably an illegal copy or a fake, and may well be technically broken too.
Consider using a free font of similar design, such as Cicle.
For googlers: I had a problem with either long font name or conflict with already installed font. Anyway IE were the only browser having problems.
I changed
font-family: 'HelveticaLTUltraCompressedRegular';
to
font-family: 'HelveticaLTUCR';
which solved my issue.