This question already has answers here:
CSS - Font being blocked from Cross-Origin Resource Sharing Policy
(4 answers)
Closed 4 years ago.
I have the following issue with my uploaded font Celestina on the hosting.
I added a #font-face link in the css of my WordPress site. However, when loaded in the browser for some reason the font is not downloaded by Chrome, FF, Safari and can't be seen.
The direct link works ...
http://dnwedding.eu/Celestina.otf
Can you please help me?
Thanks
Sorry, I used this code:
#font-face {
font-family: Celestina;
src: url("http://dnwedding.eu/Celestina.otf"); }
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)
This question has been asked quite a number of times, but none of them works for me. For example:
Google fonts font-weight of 100 is not working. (I don't have the font I want to use already in my system.)
Why is google font weight not working?. (I'm not using it in a heading, just a regular paragraph.)
I used Google Fonts with the #import like so:
#import url('https://fonts.googleapis.com/css?family=Rubik');
body {
font-family: 'Rubik', sans-serif;
}
The typeface shows up, but I can't do anything with the weight. The <strong> tags aren't displayed bold. The font-weight property in the CSS isn't working. Not even overriding it in browser's inspector changes anything.
Update
The thing seems to only work on Gecko-based browsers, like Firefox.
The answer is that the Google font isn't calibrated to carry all of the weights you want with it.
Some of the browsers may display 'thicker' or 'thinner' type, but they are tricking you. They are doubling up the normal font to simulate what you are asking for when there is no actual weight of that type available. The ones that do that are trying to be nice, but these days it is more confusing than helpful. According to your code snippet, you have:
#import url('https://fonts.googleapis.com/css?family=Rubik');
vs
#import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500i,900,900i');
(Google Fonts UI 2017 - may look different in the future but the concept is the same for any font service)
Many fonts only have 1 weight.
Here's a list of all of the possible names for font-weights;
Thin 100
Extra Light 200
Light 300
Regular 400
Medium 500
Semi-Bold 600
Bold 700
Black 900
I have had also issues to get the weights working, even though I had properly copied the HTML code from google and put into my head.
Solution:
I used the #import function by adding it my CSS and now everything works without issues. Seems that #import is more robust or less conflicting with wp themes.
I had the same issue.
For me the problem was that my link to bootstrap was placed after my link to styles.css in my html, and thus bootstrap overrode the style for h1.
The solution was simply to put the link to styles.css after the link to bootstrap in my html. :)
I had the same problem until I found out that you can not change the font weight of the body.
you have to target the exact tag you want to change the weight
eg.
Check this code out
I had the same problem: i noticed that it occurred when you import the font on the css file like:
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
So in order to solve i just imported all the font weight from the html file and then use the font weight and the font family as usual in the css file:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
Doing like this i was able to solve my problem. Noticed that you can't specify the font weight in the body tag but you have to do in the single html tag like h1 h2 h3 p ecc
The no. of fonts weights you require select them all.This will look like this:
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght#0,400;0,700;1,300&display=swap');
Now you can use all this font-weights.
I want to use a different font for my website, which is not a regular webfont. I have created EOT files already. Now how can I integrate those fonts with twitter bootstrap ? Can anyone help ?
Thanks
The easiest way I've seen is to use Google Fonts.
Go to Google Fonts and choose a font, then Google will give you a link to put in your HTML.
Then add this to your custom.css:
h1, h2, h3, h4, h5, h6 {
font-family: 'Your Font' !important;
}
p, div {
font-family: 'Your Font' !important;
}
or
body {
font-family: 'Your Font' !important;
}
You can find a customizer on the official website, which allows you to set some LESS variables, as #font-family-base. Link your custom fonts in your layout, and use your custom generated bootstrap style.
Link here
For an example with the #font-face rule, using WOFF format (which is pretty good for browser compatibility), add this CSS in your app.css file and include your custom boostrap.css file.
#font-face {
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 400;
src: url(link-to-proxima-nova-font.woff) format('woff');
}
Please note Proxima Nova is under a license.
Hi you can create a customized build on bootstrap, just change the font name in the following pages
Bootstrap 2.3.2
http://getbootstrap.com/2.3.2/customize.html#variables
Bootstrap 3
http://getbootstrap.com/customize/#less-variables
After that, make sure to use proper #font-face in a css file and link that to your page. Or you could use font kit generators.
you can customize twitter bootstrap css file, open the bootstrap.css file on a text editor, and change the font-family with your font name and SAVE it.
OR got to http://getbootstrap.com/customize/ and make a customized twitter bootstrap
First of all you have to include your font in your website (or your CSS, to be more specific) using an appropriate #font-face rule.
From here on there are multiple ways to proceed. One thing I would not do is to edit the bootstrap.css directly - since once you get a newer version your changes will be lost. You do however have the possibility to customize your bootstrap files (there's a customize page on their website). Just enter the name of your font with all the fallback names into the corresponding typography textbox. Of course you will have to do this whenever you get a new or updated version of your bootstrap files.
Another chance you have is to overwrite the bootstrap rules within a different stylesheet. If you do this you just have to use selectors that are as specific as (or more specific than) the bootstrap selectors.
Side note: If you care about browser support a single EOT version of your font might not be sufficient. See http://caniuse.com/eot for a support table.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to add some non-standard font to a website?
A client has sent me a .ttf file with instructions that it should be used as the font on his website that I'm working on, and for those who don't have this font should have it downloaded for them.
Is it possible (to have the font be downloaded)? If so, what's the css/javascript/anything else code to have the font be downloaded?
You can embed fonts using CSS #font-face rule.
The easiest way to do this is probably to use Font Squirrel generator where you can upload your .ttf and get the font converted to formats for various browsers along with ready-to use CSS snippet and an example HTML document.
First define the font and give it a name.
#font-face {
font-family: cool_font;
src: url('cool_font.ttf');
}
Then u can use it with the defined name.
p.custom_font{
font-family: cool_font;
}