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.
Related
In my login component's CSS, I am importing the following font:
#import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#1,600&display=swap);
In another component in the system, I would like to use this same font but I do not want it applied with italics. I am importing it in that component's CSS as:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
In this case, the component is rendering it as if the login page import was being used (the font appears in italics and at 600 font weight).
Until I refresh the page. If I do a refresh, it appears properly at 400 without the bold.
I have tried applying:
font-variation-settings: normal;
To the div containing the text, this has no effect.
What am I doing wrong?
Could be something related to the caching of css and fonts?
Maybe here you can find the answer.
LINKs:
Preloading fonts using angular CLI
Browser Caching of CSS files
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.
I want to use a custom font on my website. I am using the custom font on one CSS sheet and I have already specified it with
#font-face{
}
I'm using the same font on another CSS page. Do I have one again specify the font with the #font-face on the other CSS page? Or is specifying it on just one styling sheet enough?
There is no such thing as "CSS pages". There are HTML pages, which can use CSS stylesheets. You write a stylesheet that includes your #font-face rules as well as normal styling rule, and then include those on your HTML page using
<link rel="stylesheet" href="yourstylesheet.css">
and you add that to every HTML page that needs to load that particular set of CSS instructions. So, say you have two pages, "index.html" and "about.html", both html files need that <link...> code.
(Also note that in HTML5, there is no .../> or ...></link> at the end of that)
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