Firefox not Rendering Font from Google Font API - css

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

Related

Third party #font-face isn't working - not applying font to H1 tag

My #font-face tag in my CSS code does not work:
#font-face {
font-family: 'vcr_osd_monoregular';
src: url('https://rx-gkit.neocities.org/vcr_osd_mono_1.001-webfont.woff2') format('woff2'),
url('https://rx-gkit.neocities.org/vcr_osd_mono_1.001-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'vcr_osd_monoregular';
}
The code above defines a font, but it's not applied to the h1 tags. Is there any reason why this isn't working?
It does not return an error, it just simply does not work. Am I doing something wrong?
Site
Are the fonts hosted in the root directory? Or are you linking to them from another site?
When fonts are hosted in a different domain (e.g., linked from www.site.com to sub.site.com), they are blocked and not applied for security reasons.

Can I customise a #font-face declaration from an external imported CSS from a service like Adobe Fonts?

It's reasonably common for sites I'm building to use the semibold weight of a given font for their "bold" variant. Usually, this is very easy to set up by using a custom #font-face declaration that points at the semibold files and has font-weight: 700;.
That's fine when the fonts are available under a free licence, and can be hosted directly alongside the website. Sometimes, however, the fonts I need to use are only available under a paid licence. My employer pays for a subscription to Adobe Fonts to give us access to these fonts.
However, Adobe Fonts sets up its own #font-face declarations in the CSS files it provides for a given web project, and for semibold weights it uses the standard font-weight: 600;.
Unfortunately I've found very little information online about using #font-face with Adobe Fonts (or Typekit, which it used to be called). The closest thing I found on Adobe's own website (https://www.adobe.com/devnet/edge-web-fonts/articles/use-at-font-face-with-with-font-services.html) doesn't say anything about using #font-face with Adobe Fonts/Typekit.
I don't trust the file URLs Adobe Fonts uses in its CSS to remain static, so I don't think I can reuse them in my own CSS without risking breaking the fonts once those URLs are no longer correct.
Is there any way in CSS I can do something like create a new #font-face declaration based on a previous one created in an imported CSS file, or modify a #font-face declaration that was included this way? I'd much rather just set up the font to use its semibold files when the browser thinks it should be bold, instead of telling the browser to use the semibold font-weight where it would would normally use bold.
For anyone else running into this issue, the solution I've gone with for now is to create my own #font-face declaration using the URLs from Adobe Fonts' CSS file, but with a different name for the font family.
I'm using the Adobe Fonts font family as a fallback for if the one I've created doesn't load, so if the URLs break it should at least fall back to the one Adobe Fonts has set up with the font weights that don't match what I need.
/* Here Adobe Fonts uses #font-face to create the font family "adobe-font" */
#import "https://use.typekit.net/<my-project-key>.css";
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/regular.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/regular.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/regular.ott") format("opentype");
font-weight: 400;
font-style: normal;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/italic.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/italic.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/italic.ott") format("opentype");
font-weight: 400;
font-style: italic;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/semibold.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/semibold.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/semibold.ott") format("opentype");
font-weight: 700;
font-style: normal;
font-display: auto;
}
#font-face {
font-family: "Custom Font";
src: url("https://use.typekit.net/path/to/font/file/semibold-italic.woff2") format("woff2"),
url("https://use.typekit.net/path/to/font/file/semibold-italic.woff") format("woff"),
url("https://use.typekit.net/path/to/font/file/semibold-italic.ott") format("opentype");
font-weight: 700;
font-style: italic;
font-display: auto;
}
.my-class {
font-family: "Custom Font", "adobe-font", sans-serif;
}
It's not perfect, but since I haven't been able to find any assurance from Adobe that their font file URLs will never change this at least gives me some security if they do change.

How to fix Ensure text remains visible during webfont load

Hi I'm facing this problem in google pagespeed
I almost get my site speed to 100 the only thing remaining is
Ensure text remains visible during webfont load
I'm already using font-display:swap; so why is this not fixing my problem.
here's my external font css
#font-face {
font-display: swap;
font-family: 'Miriam Libre';
font-style: normal;
font-weight: 400;
src: local('Miriam Libre Regular'), local('MiriamLibre-Regular'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdTh798HsHwubBAqfkcBTL_fZ5P7.ttf) format('truetype');
}
#font-face {
font-display: swap;
font-family: 'Miriam Libre';
font-style: normal;
font-weight: 700;
src: local('Miriam Libre Bold'), local('MiriamLibre-Bold'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdT-798HsHwubBAqfkcBTL_X3LbrQsq_.ttf) format('truetype');
}
I generated this css using this commands
npx local-webfont https://fonts.googleapis.com/css?family=Miriam+Libre:400,700 /Users/admin/Documents/projects/font.css fallback
which I got from https://github.com/swissspidy/local-webfont
You are using google fonts. Its better to add &display=swap to fix the issue.
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:400,700&display=swap" rel="stylesheet">
Check this : https://www.infyways.com/fix-ensure-text-remains-visible-during-webfont-load/
This property
font-display: swap;
saved my life. Full example is as following:
#font-face {
font-family: 'Pacifico';
font-display: swap;
}
And if you're using google fonts then use &display=swap at the end of href url, as following:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
Check your main css file, is there any css code #font-face? If not, add your code above to your main css or other css that used for your html page. You don't need add your code to html page.
Although your code is correct but it won't solve the problem if it is installed on the html page but in the css file still no code font-display:swap;
Edit it on your css, and skip on html page

IE11 shows all text as bold after updating Google Font

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.

css and php displaying fonts from folder

i understand its a bit rude to ask a question from scratch however i have done my research and tried a few examples with no sucess.
im trying to display a font from my local servers.
ex. DigitaldreamNarrow.ttf
which is located in :
css/fonts/DigitaldreamNarrow.ttf
i have tried placing it in my css file in the following manner:
#font-face {
font-family: DigitaldreamNarrow;
src: url(‘css/fonts/DigitaldreamNarrow.ttf’);
}
.top {
font-family: DigitaldreamNarrow;
font-size: 0.2%;
}
however at this point im lost and i dont see any results in my display.
help?
Deploying fonts via CSS is generally unsupported. Take a look at Cufon.
#font-face {
font-family: 'ArvoRegular';
src: url('Arvo-Regular-webfont.eot');
src: local('☺'), url('Arvo-Regular-webfont.woff') format('woff'), url('Arvo-Regular-webfont.ttf') format('truetype'), url('Arvo-Regular-webfont.svg#webfontau9vOdrl') format('svg');
font-weight: normal;
font-style: normal;
}
You're going to have different results from different browsers (not all browsers support/use 'eot' for example). Check out font squirrel, and download an #face kit. Very helpful resource. http://www.fontsquirrel.com/fontface
This is more than likely the direction fonts will take, and Cufon will likely become "Gif Builder"...IMO.
#trey, write this
#font-face {
font-family: 'DigitaldreamNarrow';
src: url(‘../css/fonts/DigitaldreamNarrow.ttf’);
}
may there is a problem with your url please it.
May be you have to add inverted comma to the font .

Resources