Background: In an internal web app I am using the Google font, Open Sans. I have the font file downloaded and bundled with the app (the app has to work offline). Recently I noticed Google had a newer version of the font, at which point I re-downloaded it and updated it in the app. At this time I also changed the way I include the font in my CSS, dropping it to just use the .woff and .woff2 formats (only need to support IE11 and Chrome)
Problem: Since this update on my own computer on our test server, in IE only, all text is shown looking bold. In Chrome it is fine. In IE when looking at it in my local copy with localhost, the font works fine. On other computers it works fine all the time. I've only seen one other computer so far have the same issue.
If I inspect element, it is correctly set to use font-weight: 400 and correctly uses the .woff file for IE11. It just seems to be using the bold version of the font instead of the regular version.
I am worried this is happening to a lot more of my client's computers now that I know it is not just mine only.
Code: The below is the code I use to import the font. The only difference between this and what I had before is that I'm no longer importing SVG and other formats.
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../assets/fonts/OpenSans/OpenSans-Regular.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-Regular.woff?v=1.5.0) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../assets/fonts/OpenSans/OpenSans-SemiBold.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-SemiBold.woff?v=1.5.0) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../assets/fonts/OpenSans/OpenSans-Bold.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-Bold.woff?v=1.5.0) format('woff');
}
More details: The web app uses Angular 5 (using the Angular CLI), SASS, and gets deployed via Jenkins on a Tomcat Windows server. The test server is currently being ran in development mode.
I have already tried to clear all the cache in my browser and have restarted my computer several times, but nothing fixes it.
I unfortunately can't link to the app as it is internal only.
Below is a screenshot of the differences when viewed on the test server and when on localhost:
I think this could be the result of any number of things so if I need to provide additional information please let me know.
Related
My question should be strange but it has it's own sense.
My web browser is not compatible with woff format, and is not Internet explorer but a modified version of IE for sure.
This web browser is running by an hmi application based on TIA Portal (siemens), with this browser I need to look, using siemens web browser, an html page generated by one vision system.
This video system is using an icon font in woff format, and is not compatible with my web browser.
My idea was that to convert the font in ttf and install it locally on pc, but this don't work on my pc and olso in the hmi (hmi is running a windows 7 embedded version) and I don't understand why it doesn't work in each pc!
the css generated by the sensor is this:
#font-face {
font-family: 'fontello';
src: url('fontello.eot?60611638');
src: url('fontello.eot?60611638#iefix') format('embedded-opentype'),
url('fontello.wof?60611638') format('woff'),
url('fontello.svg?60611638#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
Obviously i cannot change the generated html.
Why the browser don't use the font converted and installed locally??
Your #font-face rule is missing a .ttf url, as well as a local reference
Try this:
#font-face {
font-family: 'fontello';
src: local('fontello'),
url('fontello.ttf') format('truetype'),
url('fontello.eot#iefix') format('embedded-opentype'),
url('fontello.woff') format('woff'),
font-weight: normal;
font-style: normal;
}
See also: MDN Docs: #font-face
Sorry if this is a stupid question but I imported a font stored on my computer into a CSS file and, although it works in Chrome, it doesn't in Microsoft Edge or Internet Explorer. I don't have any other browsers so I can't check with those and I was wondering if anyone would know why.
Linking CSS:
#font-face {
font-family: 'Linotte';
src: url('...\font\Linotte\Linotte.otf') format('otf'),
url('...\font\Linotte\Linotte.woff2') format('woff2'),
url('...\font\Linotte\Linotte.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I read that Edge doesn't have .woff2 support, so I figured linking both the .otf and .woff versions would help, but it hasn't. I get the following error in my Chrome console on any page that uses this font for both the .woff and .woff2:
Failed to load resource: net::ERR_FILE_NOT_FOUND
However, that error doesn't show up in the Edge console or the IE console.
When I go into sources, this is what shows up (won't let me imbed images yet, I'm very new): Sources
The folder the Linotte folder is in is in the same folder as the folder the CSS sheet is in, so I don't understand why it isn't showing the right thing.
Try replacing the three ... with ..:
#font-face {
font-family: 'Linotte';
src: url('..\font\Linotte\Linotte.otf') format('otf'),
url('..\font\Linotte\Linotte.woff2') format('woff2'),
url('..\font\Linotte\Linotte.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Also the convention is to use forward slashes, not backward.
Visiting a website i have found out the menu links were abnormally bolder than wile watching the same page from my collegue computer with same browser.
Deleting the corresponding font from my windows font folder corrected the difference.
My question is how preventing this possibility when designing css fonts on a website
Most #font-face at-rules begin with a local(name-of-local-file) and then a reference to your distant url(/on/server/teh-webfont.woff).
Browsers will try, in this typical situation, to use the local file and if they find nothing will continue by downloading from your server the distant asset. If they find a local matching font, then they'll use it immediately and will stop their search of a font thus they won't download and use your distant asset.
Conclusion: don't use local() and only keep those url(). It's the contrary of this SO answer
Example without local() and many url() corresponding to many formats. Browsers will download the first one that please them, not 2+ of them:
#font-face {
font-family: 'Gudea';
src: url('./fonts/gudea/Gudea-Regular-webfont.eot');
src: url('./fonts/gudea/Gudea-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/gudea/Gudea-Regular-webfont.woff2') format('woff2'),
url('./fonts/gudea/Gudea-Regular-webfont.woff') format('woff'),
url('./fonts/gudea/Gudea-Regular-webfont.ttf') format('truetype'),
url('./fonts/gudea/Gudea-Regular-webfont.svg#gudearegular') format('svg');
font-weight: normal;
font-style: normal;
}
Download the font .ttf
Saving the font in a folder in your web site
For call font use this code in css:
#font-face {
font-family: "YourFont";
src: url('font/YourFont.ttf');
}
.example{
font-family: YourFont, sans-serif;
}
Here is the thing I just uploaded to a remote server a site developed in wordpress with a custom web font using Font-face and it works fine in OS Windows and Mac the issue is when viewing the site in an Ubuntu, and I assume, others Linux enviroments.
This is the font-face chunk of code I use in the style.css
#font-face {
font-family: 'vijayaregular';
src: url('./estilos/vijaya-webfont.eot');
src: url('./estilos/vijaya-webfont.eot?#iefix') format('embedded-opentype'),
url('./estilos/vijaya-webfont.woff2') format('woff2'),
url('./estilos/vijaya-webfont.woff') format('woff'),
url('./estilos/vijaya-webfont.ttf') format('truetype'),
url('./estilos/vijaya-webfont.svg#vijayaregular') format('svg');
font-weight: normal;
font-style: normal;
}
And this is how I call the font type:
body{
background:#ffedbc;
font-size:12pt;
font-family: "vijaya", "open sans", Arial, Helvetica, sans-serif;
color:#970d34;
}
This issue only happens in Ubuntu, as I said before, the code doesn't seems to be loading any of the fonts but Sans-serif.
I leave the site so you can have a look, please nevermind the two stylesheets and two jQuery links that was just me trying crazy stuff.
here it is: www.baccotrattoria.com.co
Any responses will be welcome!
Thanks before hand!
I have uploaded a landing page that our company has contracted out, and Firefox does not render the Lato font, instead falling back to something further down the deck.
We have been given the following style sheet from fonts.googleapis.com.
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 100;
src: local('Lato Hairline'), local('Lato-Hairline'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
There is no problem in IE, Chrome, Opera, and Safari. Is there anything peculiar about Firefox that it would not be able to display the font?
I figured it out. I am using the NoScript add-on. It is protecting me from the threat of XSS attack from google, even with the entire site allowed. :D
I will research if there is a setting in noscript that will allow using the fonts, and post my findings here.
It will not likely cause problems for our customers. If they are using NoScript themselves, they will likely not be the sort to be bothered about the font on the landing page.
EDIT:
I was able to get this working. Under NoScript > Options, I selected the Advanced tab and the XSS tab. I then added the following exception:
^https://themes\.googleusercontent.com/static/fonts/lato/v6/[a-zA-Z\-_0-9]*\.woff$
It is more specific than it needs to be. One could trim off sub-folders as needed to allow more of the site. The following, for example, should enable most fonts:
^https://themes\.googleusercontent.com/static/fonts/[/a-zA-Z\-_0-9]*\.woff$
Are you running your tests locally, on a dev server, or something along those lines? Check Firebug's console and you should be able to find errors on the download, like a 404, or permissions, or something similar.
If using Noscript in Firefox:
Open the NoScript Options, go to the Embeddings tab and uncheck: Forbid #font-face
As described in: https://developers.google.com/fonts/docs/troubleshooting