I'm experiencing some major differences in font rendering (Google Font) on Win7 in Google Chrome browser. When Google Font is called via #import into LESS file, render is OK, but when I copy paste the same content of the file that is imported, I get distorted font.
Any ideas, why this is happening? I need to avoid #import due the Google PageSpeed optimization guidelines.
When Google Font is called via #import into LESS file, render is OK: http://cl.ly/Wtqb/o
Code is the following:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300&subset=latin,latin-ext);
But, when Google Font is called directly into LESS file, render gets distorted: http://cl.ly/WuOp/o
Code is the following:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzOY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
Related
I know there's plenty of questions on here regarding loading fonts using font face however I have checked them all (or at least a great deal of them) and nothing seems to work...
#font-face {
font-family: 'Open Sans';
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+000-5FF;
src: local('Open Sans'),
url('../../fonts/open-sans/open-sans-regular.woff2') format('woff2'),
url('../../fonts/open-sans/open-sans-regular.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-weight: 400;
font-style: italic;
font-display: swap;
unicode-range: U+000-5FF;
src: local('Open Sans'),
url('../../fonts/open-sans/open-sans-italic.woff2') format('woff2'),
url('../../fonts/open-sans/open-sans-italic.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+000-5FF;
src: local('Open Sans'),
url('../../fonts/open-sans/open-sans-bold.woff2') format('woff2'),
url('../../fonts/open-sans/open-sans-bold.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-weight: 700;
font-style: italic;
font-display: swap;
unicode-range: U+000-5FF;
src: local('Open Sans'),
url('../../fonts/open-sans/open-sans-bold-italic.woff2') format('woff2'),
url('../../fonts/open-sans/open-sans-bold-italic.woff') format('woff');
}
//End Open Sans
I then load the script using:
wp_enqueue_style( 'font-open-sans', get_template_directory_uri().'/assets/scss/css/open-sans.css', false, NULL, 'all');
Console throws no 404's and in the Page Source I can see the css file is loaded correctly. However, when attempting to use font-weight: bold; font-weight: 700; font-style: italic; nothing happens it just remains normal.
File structure:
- theme
> assets
> fonts
> open-sans
> open-sans-italic.woff
> open-sans-italic.woff2
> scss
> css
> open-sans.css
Update
After checking the styles tab of inspector I can see the line is called however, it has a line through it (but is not over ridden anywhere until the default browser font: inherit code.
Also to note it correctly bolds in Safari, but not Chrome. Even though both show it crossed out.
The inclusion of both files types means all browsers can serve a font as long as the version is sooner than something like 2014. My chrome is 80.0.3987.132 so I know it's not a version issue.
https://caniuse.com/?search=woff
https://caniuse.com/?search=woff2
Update
The issue was fixed by removing local('Open Sans')
I have checked my mac and have discovered I have a lot of TTF files installed, with names that don't match. I will not mark an answer as I don't understand why this still doesn't bold for Chrome but does for Safari. Please someone with knowledge of this feel free to answer with detail to claim the bounty.
Update
Answer has been provided that means the local declaration can stay!
The issue you're facing is because you've told it to look for the same local font file instead of defining the weight/font-style for each instance.
Try to add font-weight/style in src: local for example:
src: local('Open Sans 400'), //Regular
src: local('Open Sans 400i'), //Regular Italic
src: local('Open Sans 700'), //Bold
src: local('Open Sans 700i'), //Bold Italic
or alternatively you could use:
src: local('Open Sans'),
src: local('Open Sans Italic'),
src: local('Open Sans Bold'),
src: local('Open Sans Bold Italic'),
I would like to host Google fonts locally on a webhosting server.
However, the fonts are not loading. I tried to simplify the implementation and used these styles in my index.html:
<style>
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('open-sans-v15-latin-regular.woff2') format('woff2'),
url('open-sans-v15-latin-regular.woff') format('woff'),
url('open-sans-v15-latin-regular.ttf') format('truetype'),
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('open-sans-v15-latin-700.woff2') format('woff2'),
url('open-sans-v15-latin-700.woff') format('woff'),
url('open-sans-v15-latin-700.ttf') format('truetype'),
}
body{ font-family:"Open Sans",serif; }
</style>
The .woff and .ttf files located in the root beside of the index.html.
I have provided the fallback font 'serif' to try and pin down the error.
The site always shows the fallback 'serif' instead of 'Open Sans'.
In the DevTools 'Sources' Tab I can see that the font was not loading, but there is no error in the 'Console' or the Server-Log.
How can I fix this?
Update: like CrissCrossCrass's hint, there was an syntax error. After the last src-definition there has to be a semicolon instead of a comma (after format:('truetype')). Correct styling was:
<style>
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('open-sans-v15-latin-regular.woff2') format('woff2'),
url('open-sans-v15-latin-regular.woff') format('woff'),
url('open-sans-v15-latin-regular.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('open-sans-v15-latin-700.woff2') format('woff2'),
url('open-sans-v15-latin-700.woff') format('woff'),
url('open-sans-v15-latin-700.ttf') format('truetype');
}
body{ font-family:"Open Sans",serif; }
</style>
How is your file directory structured? There is a possibility that the references to your font files do not actually point to your font files. Also, you would want the style tag to be placed before your HTML tags.
Open Network tab in developer tools and see if the files are actually loaded if not and you get NOT FOUND then check your directory structure.
I've got a quite basic question about the concept of #font-face:
When importing a font-face like this (example taken from filament groups font-events/font-loading.html):
#font-face {
font-family: 'Source Sans Pro';
src: url('fonts/sourcesanspro-lightit-webfont.woff2') format('woff2'),
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'Source Sans Pro';
src: url('fonts/sourcesanspro-light-webfont.woff2') format('woff2'),
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Source Sans Pro';
src: url('fonts/sourcesanspro-semibold-webfont.woff2') format('woff2'),
font-weight: 600;
font-style: normal;
}
and in the CSS, I declare something like
body {font-family: 'Source Sans Pro';}
em {font-style:italic;}
strong {font-weight: bold;}
will the text get rendered with the appropriate font-faces, or will the browser apply <em>faux-serifs</em> and <strong>faux-bold</strong> on the default, regular Font (Source Sans Pro light in this case)?
If not, could this be "intercepted" somehow?
Thanks to all!
david
I am trying to use google fonts on my web but I have an issue with internet explorer. I am using #import, and when I google it I see that people use it this way:
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
The thing is that the link i got looks like this:
#import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
When I open my web on IE there is no text at all.
Do I have to get the webfont files? Or is there a way to fix this?
Hia
I've had the same issue, so I've created a new web version of this font which works great with IE.
You can download it Here:
http://assafk.com/staff/open_sans_hebrew/Opes_Sans_Hebrew_Fixed.rar
Thanks!
Assaf
after you download the files in the rar, add this css to use it:
#font-face {
font-family: 'Open Sans Hebrew';
font-style: italic;
font-weight: 300;
src: url(opensanshebrew-lightitalic-webfont.eot);
src: url(opensanshebrew-lightitalic-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-lightitalic-webfont.woff) format('woff'),
url(opensanshebrew-lightitalic-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: normal;
font-weight: 300;
src: url(opensanshebrew-light-webfont.eot);
src: url(opensanshebrew-light-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-light-webfont.woff) format('woff'),
url(opensanshebrew-light-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: italic;
font-weight: 400;
src: url(opensanshebrew-italic-webfont.eot);
src: url(opensanshebrew-italic-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-italic-webfont.woff) format('woff'),
url(opensanshebrew-italic-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: normal;
font-weight: 400;
src: url(opensanshebrew-regular-webfont.eot);
src: url(opensanshebrew-regular-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-regular-webfont.woff) format('woff'),
url(opensanshebrew-regular-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: italic;
font-weight: 700;
src: url(opensanshebrew-bolditalic-webfont.eot);
src: url(opensanshebrew-bolditalic-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-bolditalic-webfont.woff) format('woff'),
url(opensanshebrew-bolditalic-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: normal;
font-weight: 700;
src: url(opensanshebrew-bold-webfont.eot);
src: url(opensanshebrew-bold-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-bold-webfont.woff) format('woff'),
url(opensanshebrew-bold-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: italic;
font-weight: 800;
src: url(opensanshebrew-extrabold-webfont.eot);
src: url(opensanshebrew-extrabold-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-extrabold-webfont.woff) format('woff'),
url(opensanshebrew-extrabold-webfont.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans Hebrew';
font-style: normal;
font-weight: 800;
src: url(opensanshebrew-extrabold-webfont.eot);
src: url(opensanshebrew-extrabold-webfont.eot?#iefix) format('embedded-opentype'),
url(opensanshebrew-extrabold-webfont.woff) format('woff'),
url(opensanshebrew-extrabold-webfont.ttf) format('truetype');
}
Sheriffderek is right in the comments on one of these answers - you shouldn't be using #import - but didn't explain him/herself. You likely have a cross domain issue and both IE and Firefox blocking remote requests made like this. You have to associate the content type with your remote request so that it isn't blocked.
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
The 'type' parameter here is key - it is what allows the remote request to happen in IE and FF. CSS is allowed to do this kind of cross domain linking, as it is judged by the W3C gods to be a low security risk.
Check these links out for more information on CORS:
IE's explanation: http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx
Mozilla's thoughts: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
The JS side of implementation (if you are really curious): http://www.html5rocks.com/en/tutorials/cors/
Why don't you use :
<link href='link-to-your-css/file.css' rel='stylesheet' type='text/css'>
Don't use #import
This is a problem with the Open Sans Hebrew font itself, a problem that has been reported several times on the Google Fonts Early Access Discussions forum, with no solution posted so far. Consider using some other “Early Access” (i.e., experimentanl) font, such as Alef Hebrew.
I want to use some fonts and I want it to work without having this font on the client computer. I have done this but it doesn't work:
#font-face {
font-family: EntezareZohoor2;
src: url(Entezar2.ttf) format("truetype");
}
.EntezarFont {
font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}
Following lines are used to define a font in css
#font-face {
font-family: 'EntezareZohoor2';
src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Following lines to define/use the font in css
#newfont{
font-family:'EntezareZohoor2';
}
One of the best source of information on this topic is Paul Irish's Bulletproof #font-face syntax article.
Read it and you will end with something like:
/* definition */
#font-face {
font-family: EntezareZohoor2;
src: url('fonts/EntezareZohoor2.eot');
src: url('fonts/EntezareZohoor2.eot?') format('☺'),
url('fonts/EntezareZohoor2.woff') format('woff'),
url('fonts/EntezareZohoor2.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* use */
body {
font-family: EntezareZohoor2, Tahoma, serif;
}
When I went to Google fonts all they gave me were true type font files .ttf and didn't explain at all how to use the #font-face to include them into my document. I tried the web font generator from font squirrel too, which just kept running the loading gif and not working... I then found this site -
https://transfonter.org/
I had great success using the following method:
I selected the Add Fonts button, leaving the default options, added all of my .ttf that Google gave me for Open Sans (which was like 10, I chose a lot of options...).
Then I selected the Convert button.
Heres the best part!
They gave me a zip file with all the font format files I selected, .ttf, .woff and .eot. Inside that zip file they had a demo.html file that I just double clicked on and it opened up a web page in my browser showing me example usages of all the different css font options, how to implement them, and what they looked like etc.
#font-face
I still didn't know at this point how to include the fonts into my stylesheet properly using #font-face but then I noticed that this demo.html came with it's own stylesheet in the zip as well. I opened the stylesheet and it showed how to bring in all of the fonts using #font-face so I was able to quickly, and easily, copy paste this into my project -
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-BoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot');
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-LightItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Regular.eot');
src: url('fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Regular.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Light.eot');
src: url('fonts/Open_Sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Light.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Italic.eot');
src: url('fonts/Open_Sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Italic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Bold.eot');
src: url('fonts/Open_Sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Bold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
The demo.html also had it's own inline stylesheet that was interesting to take a look at, though I am familiar with working with font weights and styles once they are included so I didn't need it much. For an example of how to implement a font style onto an html element for reference purposes you could use the following method in a similar case to mine after #font-face has been used properly -
html, body{
margin: 0;
font-family: 'Open Sans';
}
.banner h1{
font-size: 43px;
font-weight: 700;
}
.banner p{
font-size: 24px;
font-weight: 300;
font-style: italic;
}
Go through http://www.w3.org/TR/css3-fonts/
Try this:
#font-face {
font-family: 'EntezareZohoor2';
src: url('EntezareZohoor2.eot');
src: local('EntezareZohoor2'), local('EntezareZohoor2'), url('EntezareZohoor2.ttf') format('svg');
font-weight: normal;
font-style: normal;
}
Try this link1,link2
#font-face {
font-family: 'RieslingRegular';
src: url('fonts/riesling.eot');
src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype');
}
I used Ataturk's font like this. I didn't use "TTF" version. I translated orginal font version ("otf" version) to "eot" and "woof" version.
Then It works in local but not working when I uploaded the files to server.
So I added "TTF" version too like this. Now, It's working on Chrome and Firefox but Internet Explorer still defence.
When you installed on your computer "Ataturk" font, then working IE too. But I wanted to use this font without installing.
#font-face {
font-family: 'Ataturk';
font-style: normal;
font-weight: normal;
src: url('font/ataturk.eot');
src: local('Ataturk Regular'), url('font/ataturk.ttf') format('truetype'),
url('font/ataturk.woff') format('woff');
}
You can see it on my website here: http://www.canotur.com