How load my new fonts in html code - javascript

I want to load a font in my CSS and/or HTML code. I need two fonts(bigsmalls-bold and lft-etica-web) but I don't find how download the font. I only I find a javascript code in
https://typekit.com
This javascript code I have to add in head of my html code.
I did it, but don't change my fonts. Could someone help me please?
Thank you so much

Try using #font-face { url } in your css file. Uploading the font
Like this :
#font-face
{
font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot');
}
The .eot is for IE9

hai you have two options
1st one google font
2nd one CustomFonts
#font-face {
font-family: "MyCustomFonts";
src: local("MyCustomFonts"), url("../fonts/ArialNarrow.ttf") format("truetype");
}
try this

Typekit explains on there site how to install a font. Login, goto the kit editor and click [ embed code]
<script src="//use.typekit.net/YOUR_CODE_GOES_HERE.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
After you've done that:
If you want to use Typekit in your CSS, click the “Using fonts in
CSS” link in the selectors area of your kit to reveal the appropriate
font-family names to use. Once you’ve included the Typekit embed code
in the of your documents, you can add these font-family names
to the CSS rules in your own stylesheet:
h1 { font-family: "proxima-nova", sans-serif; }
http://help.typekit.com/customer/portal/articles/6859-working-with-css-selectors
Using the font-family Names in Your CSS

Related

ckEditor 4 not loading CSS file with custom fonts

I've implemented a custom font for CKEditor and although it is showing in the dropdown list it does not apply to the element. I cannot find the cause of why my CSS file isn't loading which is the cause of not applying the new font.
So, on my configuration default.js file I added the below lines of code:
config.font_names = 'Belluga Solid/Belluga_Solid;' + config.font_names;
config.contentsCss = "../fonts.css";
And then created a new fonts.css file:
#font-face {
font-family: "Belluga Solid";
src: local("Belluga Solid"), url("/MyFonts/Beluga/Belluga_Solid.eot") format("embedded-opentype"); /*non-IE*/
src: url("/MyFonts//Beluga/Belluga_Solid.ttf") format("truetype"); /*non-IE*/
src: url("/MyFonts//Beluga/Belluga_Solid.svg") format("svg"); /*non-IE*/
}
Looking at the source code, it correctly applies fine:
<p><span style="font-family:belluga_solid;">Lorem Ipsum</span></p>
It seems pretty straightforward to do. Looking at this tutorial the author got it all right: https://www.youtube.com/watch?v=knkFOuKPsKQ
I implemented the same solution but having a hard time figuring out how to solve the issue.
It's probably because the value of the font-family property in the element's styling doesn't match the value defined in the #font-face rule. The #font-face rule defined it as Belluga Solid, but your inline style sets the value to belluga_solid.
You can try modifying the #font-face rule so that it says this instead:
#font-face {
font-family: "belluga_solid";
}
That way, they will match and your font should hopefully display correctly.

Using Polymer without Roboto

I have a Polymer 2 app with an explicit --paper-font-common-base specified before loading any of the components:
--paper-font-common-base: {
font-family: 'Comic Sans';
/* Not really, nobody's that evil, but problem is there for any font */
};
Then, at some point when loading Polymer components, for instance paper-dialog, will import typography.html
<link rel="import" href="../paper-styles/typography.html">
In turn typography.html imports Roboto and overrides the mixin:
<link rel="import" href="../font-roboto/roboto.html">
...
<custom-style>
<style is="custom-style">
html {
--paper-font-common-base: {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
};
This overrides the font face I've specified, but also goes and downloads Roboto from Google's CDN, which I explicitly do not want it to.
Other Polymer components, for instance paper-radio-button take a different approach:
/*
This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
*/
How do I set --paper-font-common-base so that Polymer components use the same font as the rest of my application?
Looks to me like <custom-style> is loading directly into your <head> tags as it's wrapped in <script> tags.
To over ride this behaviour you'd need to add your script higher up in the <head> tags also.
One way to get around this is to make your own font-roboto dependency with an empty roboto.html file. Then in your bower.json you would force your dependency to be the resolution to the font-roboto conflict.
I'd suggest to
Fork <paper-dialog>, and remove the import of typography.html
Load your own copy of <paper-dialog>
File a ticket, or a pull request, for <paper-dialog>
If your change is officially accepted, load the official <paper-dialog>, again.
If you want this font to work on the entire web app, is your
--paper-font-common-base: {
font-family: 'Comic Sans';
};
declared into a custom-style element ?
If not try that :
<custom-style>
<style>
html {
--paper-font-common-base: {
font-family: 'Comic Sans';
};
}
</style>
</custom-style>
And if you add that into you root element, it should be applied in all the child elements except if some custom components override their own font.
Edit :
There is a plunker example.
In .bowerrc add this:
{
"scripts": {
"postinstall": "node -e \"require('fs').writeFileSync('bower_components/font-roboto/roboto.html', '')\""
}
}
It will make roboto.html as an empty file without any error requests after build.

Force the whole website use one font -family

I would like to apply
font-family: Helvetica to all element in the site.
So I write
body, html {
font-family: Helvetica !important;
}
in the CSS file, the problem is , the font-family is still override by other inner CSS. How to force the whole site use one font family?
Thanks a lot for helping.
Is it being overriden by other css style rules with !important? If so, there is nothing to do as more specific selectors win over more general ones.
* {
font-family: Helvetica !important;
}
You could use the inspector in chrome, or other browser's equivalent to see how the cascade styles on your particular element unfolds. Your inner CSS could have also defined the !important flag, which overrides you definition on body.
If you post your entire html and CSS people might be able to help more easily.

Include vector graphics/icons as just a class in a span in HTML5?

As clearly given on this bootstrap page, to include a glypicon icon inside our web page, all we have to do is mention it's class inside a span element, as done here:
<span class="glyphicon glyphicon-search"></span>
How, we have a few files in .ai format which can be converted to any format of choice (.jpg, .png, .svg, etc...).
I want to know as to how this is implemented, in what format are the files, what's the JS and/or CSS code to be included apart from the HTML code.
Looking at the source of the Bootstrap page, they have done this by making the icons a font. I would suggest using this method as it is a easy and compact way to do it. You can use a font editor like this: http://icomoon.io/app/#/select
It seems to have pretty decent support for uploading SVG's to it so you can make your own font.
you can then import your font in css like:
#font-face {
font-family: 'my-vector-font';
src: url('my-vector-font.eot');
src: local('my-vector-font'),
local('my-vector-font'),
url('my-vector-font.ttf') format('truetype'),
url('my-vector-font.svg#font') format('svg');
}
...and then use it in css like:
.icon-1:before {
font-family: 'my-vector-font';
content: "{CHARACTER_FOR_ICON}";
}
You can tune up that selector with padding, etc.. as you need.

Change Arial to some other font on the whole webpage

I'm thinking about a script that can change a webpage's font appearance from Arial to some other font face of my choice.
How should I go about doing that?
I understand: * { font-family: "SomeFont"; }
But this won't achieve the objective to only target Arial text.
I can use jQuery or Javascript, whichever is more efficient and fast.
Edit: Seems like people have difficulty understanding the question. So I'll explain some more, I just want the Arial text on the webpage, if it exists, to change in appearance.
I was going to suggest looping through the styleSheets array and, for each style sheet, loop through the rules, find the ones defining Arial as the font, and change that to the other font you want. That way you wouldn't have to visit every element on the page.
The problem with that suggestion, though, is inline styles on elements.
So I hate to say, to do this you'll have to visit every element on the page. For most pages, that won't be a problem, but your mileage may vary.
Here's how you'd do it with jQuery:
$("*").each(function() {
var $this = $(this);
if ($this.css("font-family").toLowerCase().indexOf("arial") !== -1) {
$this.css("font-family", "SomeOtherFont");
}
});
Can't say I like it, though. :-) You can avoid building the massive list ($("*") builds a jQuery object containing all of the page elements, which can be quite large) at the outset if you do a recursive walk instead, e.g.:
$(document.body).children().each(updateFont);
function updateFont() {
var $this = $(this);
if ($this.css("font-family").toLowerCase().indexOf("arial") !== -1) {
$this.css("font-family", "SomeOtherFont");
}
$this.children().each(updateFont);
}
That may be preferable, you'd have to profile it.
Doing it without jQuery would involve recursively looping through the childNodes of each element and using either getComputedStyle (most browsers) or currentStyle (IE) to get the font information, then (if necessary) assigning to element.style.fontFamily.
Actually, a "both and" solution would probably be best. First, update the stylesheets, and then walk the tree to catch any inline styles. That way, presumably you'll get most of them by changing the stylesheets, which avoid the ugliness of the piecemeal update. Also, you don't have to use css() (jQuery) or getComputedStyle / currentStyle (without jQuery), you can just check element.style.fontFamily, so it would be more efficient.
Beware that IE's stylesheet object uses an array called rules, others use cssRules, but other than that they are largely the same.
It is possible to change only Arial using #font-face.
First link to a css:
<link rel="stylesheet" href="/css/fonts/luxi-Sans-fontfacekit/stylesheet.css" type="text/css" charset="utf-8" />
Then in your css refine what Arial is:
#font-face {
font-family: 'Arial';
src: url('luxisr-webfont.eot');
src: url('luxisr-webfont.eot?#iefix') format('embedded-opentype'),
url('luxisr-webfont.woff') format('woff'),
url('luxisr-webfont.ttf') format('truetype'),
url('luxisr-webfont.svg#LuxiSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Arial';
src: url('luxisb-webfont.eot');
src: url('luxisb-webfont.eot?#iefix') format('embedded-opentype'),
url('luxisb-webfont.woff') format('woff'),
url('luxisb-webfont.ttf') format('truetype'),
url('luxisb-webfont.svg#LuxiSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
Only Arial is changed (in my example to Luxi Sans). All other fonts remain as usual.

Categories

Resources