While defining a Web Font in CSS - I have noticed a small change in the way my font displays depending on which method of font definition I use:
#font-face {url('https:/https://fonts.googleapis.com/...');}
or
#import url('https:/https://fonts.googleapis.com/...')
with the #import I've got a lighter version of the font and with the #font-face method it is a bit bolder.
Can anyone tell me why this happens, what the differences between the 2 "methods" are, and which is more advisable (advantages vs disadvantages).
Usually, #font-face is used to declare fonts that were downloaded and #import is for adding another stylesheet file. I would say that it could be related to font-weights. Because #font-face is creating the font that is downloaded it may be the problem. Does the google fonts link contain the font-weights?
I am using the jPlayer example in a create-react-app. Here is a CodeSandbox showing the issue of font-awesome icon's rendering as boxes.
The icons render via css rules specifying content as unicode for <i> tags with the fa class.
I installed the font-awesome dependency which was in the jPlayer example's package.json. Then, I implemented an AudioPlayer component and used the skins provided by jPlayer. The component renders but the icons are all boxes, and I can see the unicode content in the source.
Here's an example of the project architecture. This is the play button in /src/AudioPlayer/AudioPlayer.jsx.
<Play><i className="fa">{/* Icon set in css */}</i></Play>
Then, the AudioPlayer is imported into App.jsx. App.jsx imports a stylesheet which has this relevant rule:
.fa, .fas, .far {
font-family: FontAwesome !important;
}
App.jsx is then rendered by index.js. Inside index.js, we import the audio player's stylesheets:
// Styles the jPlayer to look nice
import 'react-jplayer/dist/css/skins/sleek.min.css';
// Styles Play/Pause/Mute etc when icons (<i />) are used for them
import 'react-jplayer/dist/css/controls/iconControls.min.css';
The rule for the play button in iconControls.css looks like this:
.jp-jplayer .jp-icon-controls .jp-play i:before {
content: "\F04B";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}
then within index.html's head I include the font-awesome CDN as a final attempt at fixing the boxes being rendered instead of font-awesome icons.
I think in the styles.css there is FontAwesome !important as shown below which is overriding the FontAwesome 5 Free font. You could remove this style to see the fonts coming up.
fa, .fas, .far {
font-family: FontAwesome !important;
}
Font characters show as open squares when:
The Unicode character specified doesn't exist in the font file.
The requested font file can't be found and there's no fallback specified.
Since its's Font Awesome, there's no fallback font AND the requested character doesn't exist in most fonts. So you get a double problem.
This almost always happens when the browser can't find the font file due to path issues. I'd look through your CSS to find where #font-face is requested and fix the path to match your project. I would guess this is in the player CSS file AND that it expect's a local file not from the CDN.
Also, be aware that Webpack sometimes moves files and updates paths found in CSS so you may need to move those to a "static" directory and change paths as needed.
Finally, you should check the name of the font to make sure it matches what you have available in your system. According to Font Awesome's Docs, it should be font-family: "Font Awesome 5 Free"; your's seems to have an extra back slash.
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 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.