I am having a strange problem in my wordpress website. I have installed magnium theme, and on my front page, i have a caroussel of pictures. So far so good. There is some text displayed on the pictures, and it has the font-family : "Open-sans"; property.
When i am logged in as an admin, no problem, the CSS is properly executed. But the problem comes when I am logged out: the same page renders with default browser fonts on chrome and firefox on my computer. However this does not happen on my android chrome. I checked with the chrome dev tools, the ONLY difference i can find in CSS is the last line of compiled CSS:
OST derived font - 17 glyphs (in admin logged in session)
Liberation Serif - 14 glyphs (in incognito mode or logged out)
I just don't understand, any basic clues for debugging ? Is there any CSS debugger that could give me more details than the - already detailed - chrome dev tools ?
Unfortunately I cannot give the url as the website is not public yet and my client had it protected.
Try This
font-family: 'Open Sans', sans-serif;
this is google font you can add a link in your header.php
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
Or Import style with in your Style.css
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600);
and call the Font family to your Selector ex:
body {
font-family: 'Open Sans', sans-serif;
}
Related
Wordpress is not showing the correct font on the site title.
When I inspect, it is showing that it has the correct font (Tangerine) applied, but that's not actually the font showing on the page.
To make it more interesting, the computer I work on, shows everything correctly, even after logging out, deleting cookies, clearing cache, but my phone and other computer just show a serif font and not the cursive Google font Tangerine.
Here's what inspect shows.
The font actually shows up like this though:
and it should look like this (this is how it looks on chrome on the computer where I added the custom css to the wordpress theme hestia).
maybe forget to import google font into your website
on DEV tools they looking same
looking below
span{
font-family: 'Tangerine', cursive;
}
<span>hello word - not import</span>
#import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');
span{
font-family: 'Tangerine', cursive;
}
<span>hello word - import</span>
If I download and use this font on my web page, will it be able to render correctly on all browsers? I have checked on Google Chrome and it is not on the list of default fonts installed.
If not, is there an alternative that can be used so my web page will be able to render properly on all the browsers and operating systems?
You need to include a web-font in order to ensure your page renders the same on all browsers. A good repository of web-fonts can be found here:
http://www.google.com/fonts/
https://edgewebfonts.adobe.com/
If you own a licence which permits you to use the font on a website, you can use the following converter to change your font into a web format
http://www.fontsquirrel.com/tools/webfont-generator
An example of including and using a web-font :
HTML
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
CSS
body {
font-family: 'Open Sans', sans-serif;
}
I've read similiar threads but this problem is a bit different: I have:
<head>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic' rel='stylesheet' type='text/css'>
//rest of the code...
And in the css style file I have:
body{
font-family: 'Source Sans Pro', sans-serif;
//rest of the code...
It works perfectly in the browser, but when I enter with my mobile, the words just dissapear, and the page is loding forever with only the structure. I'm still developing the webpage, so I was trying it with the mobile to check everything works.
1.- I've tried #import url(http://fonts.googleapis.com/.... and nothing.
2.- I've changed the font to Arial in the css file and it works.
3.- My mobile is Nexus 4 with chrome.
4.- I've tried with another font of Google Api and nothing.
5.- It works perfect in the desktop browser. Even in IE.
Anyone knows what could be the problem? Thank you!
I'm using the Google Web font "Buenard" and having a difficult time getting it to display on Chrome. I know there are issues with font rendering and hinting across the various browers, but this is something else altogether. Instead of the intended font, Chrome is displaying some other dingbat font on my system. It looks great in Safari.
I can't share a link, because the site in question is behind a protected login. However, check out this screenshot to see what I'm looking at:
http://bit.ly/ImiiDM
In the CSS, I am using a font stack of '"Buenard", Georgia, "Times New Roman", serif;' I tried also just using '"Buenard", serif;' No effect.
Any ideas?
Instead of using stylesheets to attach the font just search the web for your desired font and download it and attach it like so:
#font-face {
font-family: buenard;
src: url('buenard.ttf');
}
After that you can use it just like a normal CSS declaration:
p.custom_font{
font-family: buenard; /* no .ttf */
}
I'm running into a small issue with a site I'm working on. I'm using the font services from Fonts.com to serve up the CSS and web fonts I use on the site, and everything works well except in Internet. The page appears to render with the fonts correctly in place, but when the loading is complete, IE reverts back to the default font.
Here's a sample of the CSS:
#font-face{
font-family:"HelveticaNeueW02-55Roma";
src:url("/d/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("eot");
}
#font-face{
font-family:"HelveticaNeueW02-55Roma";
src:url("/d/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac");
src:url("/d/d5af76d8-a90b-4527-b3a3-182207cc3250.woff?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("woff"),url("/d/1d238354-d156-4dde-89ea-4770ef04b9f9.ttf?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac") format("truetype"),url("/d/b68875cb-14a9-472e-8177-0247605124d7.svg?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451eadad15f77b41f406d48f0f3592bf2731964d594bed634b405df69863674a8be20883212f56ec396a14e1cc983ae5cf8a554298e7314350fa96b78a363d2b4ccfc8ff090d5c8ce49e47d02bc317e0334f5b6efa484026&projectId=215db553-2cf6-4cbb-a5fd-6a4b7d7b8bac#b68875cb-14a9-472e-8177-0247605124d7") format("svg");
}
and typical use cases:
body {
font-family: "DIN Next W02 Cond";
font-weight: normal;
font-size: 14px;
font-weight: normal;
}
p {
font-family: "HelveticaNeueW02-55Roma";
font-weight: normal;
font-size: 14px;
line-height: 1.5;
}
The wide font is what displays after the page finishes loading, while the narrow font (the correct font) is displayed during page load.
Is there an easy fix? Fonts.com provides a web portal to specify the fonts in the CSS, which they serve from their servers - so I can't easily edit that. I can edit the font-family property for elements using the web fonts, though. If any more information is needed, I'll provide it where possible.
Edit: this is not a flash of unstyled content, it renders properly from what is presumably the cache, then (upon re-downloading the file) discards the custom font and replaces it with a default font when the page is done loading. It's the reverse of what I and others are expecting, hence posting here for a fix.
the flicker you see is fouc or fout, im assuming your using IE9, it'll will display text in a default font while the web font loads — even in compatibility mode.
#font-face {
font-family: 'OpenSansLight';
src: url('OpenSans-Light-webfont.eot');
src: url('OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('OpenSans-Light-webfont.woff') format('woff'),
url('OpenSans-Light-webfont.ttf') format('truetype'),
url('OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
that's the best way to get #font-face cross-browser. if you need those files created, head over to fontsquirrel.com
font loader is used by typekit and google fonts to fix the flash; i'm not sure if you'll have to tweak it for your code, but you can snag it on github https://github.com/typekit/webfontloader
So for me, it was a local issue.
When we deployed to our staging server, the fonts displayed correctly in IE 7 and 8 .
Still don't know why they're not showing up locally, but at least it works in production.
My fonts display properly in IE8 locally. Also works in chrome and FF.
The fonts fail in production. I'm using fontawesome for bootstrap twitter.
I find that once the page is loaded, If I select the entire page then all the loaded fonts appear. So they are there, but IE8 disregards once the page is loaded.
I've checked quirks mode and all other combinations.
It's definitely a "when loaded" to "speed of load" in "relation to other CSS" issue.
Re-positioning the CSS link higher or lower in the code has effects - though no clear fix.
It would be nice if I could "re-instate" the loaded fonts once the page was complete.
On our project we identified that web fonts would revert after page load in Internet Explorer when we had the developer tools open. We still have to remind ourselves of this from time to time, but this is why you might see this odd behavior occur locally but not in production.
It definitely does not happen on every page load, but is more frequent when we manually refresh pages. We have not found documentation for this behavior but have experienced it on multiple computers when running IE 10 and especially IE 11.
I had the same problem of flash of styled content and for me, the cause was two-fold:
I had the font installed locally
I was using the wrong URL for the web-font
So before the webfont loaded, Explorer served up the local version. It then tried to load the font with an incorrect URL, which didn't work, which caused it to fall back to a standard sans-serif font.