As I understand the best way to include google fonts on a website is to use the #font-face and specify the location of the .woof file in the URL.
According to my understanding from reading the thread here Including Google Web Fonts link or import? using #import seems to be bad. And its difficult for me to import the font by specifying it as a <link> based on the layout that I have setup.
With all this into consideration I found that using this method seems best. eg.
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
But when I select the required fonts https://www.google.com/fonts it doesn't show me the .woof file location, how can do I found this ?
Related
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.
With the node modules i have this file added to my theme. But it is showing in the "Google Pagespeed Insight". Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load.
In my CSS file it is import like this.
#font-face {
font-family: 'Graphik Web';
src: local('Graphik Web'), url('#{$spirit-font-path}Graphik-Regular-Web.woff2') format('woff2'),
url('#{$spirit-font-path}Graphik-Regular-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-display: swap;
}
But still it is not working as in the report from Google Pagespeed Insight. Please let me know if i think missed anything or to add something.
To get rid of that error, you have to get rid of the #import (which here translates to src url). The #import directive blocks parallel downloads. You have to change the code to import the woff in the main html with a link tag.
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.
My question can be seen as a follow-up of this answer.
I use Google Fonts for my project and now want to change the unicode-range, so only numbers are affected (see linked answer above). My problem is that I don't get it to work with an include:
#import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");
When I import the font like this, the font-face is already generated by Google (Google provides also the correct font-face setup to avoid cross browser problems, very convenient). I tried overwriting the imported font-face like this:
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
unicode-range: U+30-39;
}
But that didn't work. To achieve the desired affect of having only numbers attached, I need to take the CSS from the Google import URL and copy it into my own CSS/SASS document. But then I lose the cross browser service that was done by Google Fonts API and also the speed of their CDN.
Is there a way to change the unicode-range while maintaining the Google font import or do I really need to host the fonts myself when I want to use unicode-range?
If you want set the range while you are importing, just add to the link the variable 'subset'.
For example:
#import url("http://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin");
Or, if the text is very small you can change the subset variable for text, and add the content inside.
For example:
#import url("http://fonts.googleapis.com/css?family=Inconsolata&text=Hello");
Documentation
What is unicode-range?
It's a prop used to tell the browser when to download a font file. As soon as any character that belongs to the given range is rendered: the font file is downloaded.
The unicode-range is not intended to assign the style to the characters from the given range .
Solution
The best option is to use the text parameter to get a font file per style that contains just the characters you need, in this case the range [0-9].
URL:
https://fonts.googleapis.com/css?family=Lato:300,400,700&text=0123456789
Google Fonts response:
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/l/font?kit=S6u9w4BMUTPHh7USewqdFhfZ3-4B28Jv7vc&skey=91f32e07d083dd3a&v=v22) format('woff2');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/l/font?kit=S6uyw4BMUTPHvxwiUT-eLhTc2OsC1s0&skey=2d58b92a99e1c086&v=v22) format('woff2');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/l/font?kit=S6u9w4BMUTPHh6UVewqdFhfZ3-4B28Jv7vc&skey=3480a19627739c0d&v=v22) format('woff2');
}
I am using the below font-face rule in my application
#font-face{
font-family: frutilicn;
src: url('../fonts/FrutigerLTW01-47LightCn.eot');
src: url('../fonts/FrutigerLTW01-47LightCn.ttf') format('truetype');
}
When I access the page the font style does not work . I am getting an error in firebug like this:
"NetworkError: 404 Not Found http://localhost/fonts/FrutigerLTW01-47LightCn.ttf"
The 'font folder' is in the same folder as the stylesheet and FrutigerLTW01-47LightCn.ttf is in the font folder
What does that mean and what do I need to do?
Thanks.
We put our purchased fonts (which we embed onto the website) in the root of the site, therefore avoiding issues with relative linking.
#font-face{
font-family: 'Frutiger';
src: url('/FrutigerLTW01-47LightCn.eot');
src: url('/FrutigerLTW01-47LightCn.woff') format('woff');
font-weight: lighter;
font-style: normal;
}