I'm embedding a Google Sheet on a website. I'm using Lekton as the font, but when shown in the iframe it's Arial. When checking the Google Chrome inspector it says font-family: 'docs-lekton'.
Changing the font via css doesn't seem to work - any ideas on how to get it to show Lekton correctly?
You can't change font-family or other css properties inside iframe, if you don't have access to content in iframe (e.g. content in iframe is your other website, that you want to embed).
In your case, Google Sheets is Google content, including all css, that styles spreadsheets.
It works this way because content inside iframe isn't really part of your current page, that's why you call it embedding.
Related
I'm having an issue with FontAwesome (v4) webfont icon rendering in Chrome when Chrome's caching is enabled. Intermittently, across multiple user machines, a page will load with our FontAwesome icons displayed incorrectly as below. This issue happens only occasionally and can't be reliably reproduced or narrowed down to a single page. The only common repro steps are using Chrome and not having "disable cache" enabled in dev tools or elsewhere.
Checking dev tools computed styles for the icon elements reveals that Chrome is correctly detecting the specified font-family as "FontAwesome", but the <i> tags for the icons are being rendered in Times New Roman, rather than the FontAwesome webfont. The "FontAwesome" #font-face declaration and the above rule assigning font-family: FontAwesome to the .fa class exist in the same stylesheet, site.css, which is causing the issues.
Checking the source below, we see that site.css is properly specified in the site's <head> tag. It isn't being added to the <head> through JavaScript; it's present in the in the initial page loaded by the browser. The href points to the correct stylesheet, which loads without issue when opened in a new tab. This isn't very surprising, since all of the styles specified in site.css are correctly being applied to the page (except for the webfont, of course). Even the .fa's font-family rule is being read correctly by Chrome, as shown in the computed styles in the screenshot above.
My suspicion is that Chrome is loading the stylesheet from cache in a weird way that's allowing all of the styles to load but is interfering with the creation of the FontAwesome webfont. Potential evidence for this below:
Above is a portion of the network tab from the dev tools session. Nothing has been filtered out, but site.css has no entry in the list of requests, even though other cached stylesheets are present and the styles from site.css are being applied to the page. There are entries for theme.css, jQuery, AdminLTE, and other stylesheets specified just after site.css in the same <head> block. It's not pictured, but the fontawesome.woff2 webfont file, specified in site.css's #font-face declaration for "FontAwesome", is also being successfully loaded.
Refreshing the page or navigating to another one sometimes fixes the issue. Refreshing with cache disabled always fixes the issue. Every page of our (quite large) web app loads this stylesheet using the same <link> tag, and while this issue pops up fairly rarely, it has happened across many of those pages. The site.css stylesheet is clearly being loaded by Chrome, as it sees the font-family: FontAwesome rule along with the rest of our site styles. But something seems to be happening during the loading of the stylesheet from cache that's causing Chrome to fall back to Times New Roman despite the webfont being both declared via #font-face and specified as the font-family for the affected elements.
We aren't using a service worker or any server-side caching. We do some cachebusting via a GET parameter as shown in the screenshots above (the ?[productName]Version=2.0.13292.0), that value is baked into the initial document loaded by ASP.NET and changes only when our backend server's version changes -- so that shouldn't be the cause of the issue here.
Has anyone experienced anything similar with Chrome webfonts?
I had the same problem. My compiled CSS file was missing #charset "UTF-8"; and as a result, the cached icons font was broken. Please check if this helps you.
I'm having difficulty getting google fonts to work in Chrome
I'm using Google's suggested link element to retrieve the font (which dev tools confirms works fine).
link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400italic"
In the CSS file I'm setting the font-family to 'Roboto Condensed' for all h2, button, select and input elements
In Google Chrome only the fonts are not displayed. I've uploaded the actual files I'm having a problem with to here http://gmwildlife.org.uk/mapapp/_dev/
the associated css file is http://gmwildlife.org.uk/mapapp/_dev/style/app.css
On checking the dev tools in Chrome I can confirm the following
* Roboto is successfully retrieved by the client - I can see the response text
* On inspecting an input element, for instance, I can see that the computed font-family is Roboto Condensed i.e. Chrome isn't computing that css specificity is overwriting Roboto Condensed somewhere else
* There are no errors reported in the console log
I thought this might be the same issue as reported and resolved hereGoogle Fonts are not rendering on Google Chrome
However I've tried both the CSS webkit workaround and javascript workaround individually and together and neither is working. Any help would be greatly appreciated. I've spent two days rewriting large chunks of the page and trying to hack a solution together using various combinations without a result i.e. requesting open sans and roboto separately and together (as is now), placing styles at various places in the DOM.
Thank you for reading this.
RESOLVED: This was because the Roboto font I was using was italic. In Google Chrome I fixed this by adding 'font-style:italic' after every call to font-family:'Roboto Condensed'. I've left the broken version here gmwildlife.org.uk/mapapp/_dev and the fixed version is here gmwildlife.org.uk/mapapp
I am facing a problem i have given the custom font. It is working in the website. I have given a iframe in the website and in this iframe custom font is not working it is loading the timer new roman font-family. How to resolve it if anyone have suggestion please share.
CSS rules (like the custom font setting) don't cascade through an iframe. One possibility would be to use the new seamless attribute:
<!doctype html>
<style>
/* custom font etc. */
</style>
<iframe seamless src="http://www.example.org/"></iframe>
<!-- now your styles are inherited by the embed website -->
Unfortunately, this attribute has currently very bad browser support, so an easier solution would be to include the relevant stylesheet in the page showed in your iframe.
I noticed that when my web page was loading, all of the CSS files loaded first, then the fonts after all of those were done. Is there a way to make the fonts start loading at the same time as the stylesheets?
I'm using #font-face with a url. Would encoding the font in the stylesheet solve this problem?
i haven't experienced this kind of scenario of yours..i'am fond of using embedded fonts on my webpages..i would like to share what i did as what i see to make them synch on web page load..i have a font.css where i embed all the fonts i needed like this:
#charset "utf-8";
/* CSS Document for Fonts :)*/
#font-face{
font-family: trajan;
src:url(../fonts/TrajanPro-Regular.otf);
}
and the url resides on the directory inside the web app..i just link this to the web page then use the defined font on other css directly..hope i got your point and explained the right thing..thank you
I'm trying to style a font that is being referenced inline using fancy box on a wordpress blog. Using both chrome and firefox.
I've tried this two ways:
1.) Loading the #font-face on the theme's stylesheet, then adding a in html markup on the page itself. I don't want all of the paragraph text on the blog to load with that font, just the divs inline on the fancybox. I know all the sources are correct because I've tried them in html files and they load perfectly.
2.) I've tried loading the #font-face on the page html markup itself. I add a style and place the call in that style at the top of the page. Then I reference the font-family in the same way that works in the normal html page.
The fact that it is working on a simple html page makes me think I'm doing something wrong specifically in wordpress.
Here is the url to the page: http://elparquenuez.com/sandbox/wordpress/?page_id=4
Click on the first image to load the fancy box.
There is little that is correct about this code you have:
<style type="text/css">
<p>#font-face {
font-family: "fanwood";
src: url(http://localhost:8888/html5/fanwood/Fanwood.otf);
}</p>
</style>
Consult http://reisio.com/examples/webfonts/ or http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/, and keep in mind that you're going to want everything on the same domain.