Don't really understand the difference between using #font-face and #import url(). Would someone explain this to me?
#font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed.
#import url() Imports another style sheet into the current style sheet. If you have used this to embed a font, actually the imported style sheet includes the #font-face inside it.
#import rule allows you to import a style sheet into another style sheet.
#font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed. This means that web designers will no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer.
The #font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
#font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
The #import CSS at-rule is used to import style rules from other style sheets. These rules must precede all other types of rules, except #charset rules; as it is not a nested statement, #import cannot be used inside conditional group at-rules.
#import url("fineprint.css") print;
#import url("bluish.css") speech;
#import 'custom.css';
#import url("chrome://communicator/skin/");
#import "common.css" screen;
#import url('landscape.css') screen and (orientation:landscape);
Related
I am attempting to add custom fonts to a WordPress site and I cannot get the correct font to display. I am able to get the custom font to display locally on an HTML and CSS document I whipped up real quick and also by using the web developer tools in Firefox, so I know the font is loading. The font is called "Indubitably", I downloaded it from Font Squirrel and I am specifically testing with the .woff format.
Here is my code:
#font-face {
font-family: 'indubitably';
src: url('fonts/INDUBITA-webfont.woff');
}
h1, h2, h3, h4, h5, h6 {
color: black !important;
font-family: 'indubitably' !important;
}
I think I've uploaded the font to the correct directory, which is /home/"myUsername"/html/wp-content/themes/hestia(my current theme)/fonts...
I've tried copying the code to style.css, I've used a plugin called Simple Custom CSS, I've also tried using the built-in WordPress CSS editor to no avail.
Sorry if this is a noob question, it is my first rodeo ;)
Try replacing the local path to your font with the complete URL, so change fonts/INDUBITA-webfont.woff to http://www.example.com/wp-content/themes/hestia/fonts/INDUBITA-webfont.woff (changing example.com to your correct domain, of course.
Solution 1:
In one of the sections that the font doesn't affect first try to right-click and inspect elements. Second, in inspect page, you can see the source of font-family that affected and easily change it in the source file.
Solution 2:
You can put static in your header page in customizing theme
Solution 3:
You can replace your specific font with the old one with the same name -> rename the new one name to old one name and put it into the fonts folder: wp-content/themes/hestia/fonts
I'm a big fan of transfonter which does all the heavy lifting in generating your font-face when given a font file. If you did do something wrong with your #font-face declaration, running it through this might amend them.
This is the kind of font-face it spits out:
#font-face {
font-family: 'Indubitably';
src: url('../fonts/Indubitably.woff2') format('woff2'),
url('../fonts/Indubitably.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Other than that, I'd double check your src url.
Your styles live in wp-content/themes/{project}/assets/css, whilst your fonts live in wp-content/themes/{project}/assets/fonts.
Try src: url('../fonts/INDUBITA-webfont.woff');. ../ allows you to go back into the containing directory (in this case the assets folder`).
total newbie at html here.
Im looking to incorperate any one of these fonts from:
https://andrewsonline.co.uk/content/fonts/
into a static github page im making for a website.
I see the css code for these fonts is here:
https://andrewsonline.co.uk/content/fonts/fonts.css
Do I just need to copy and paste this into my html?
Where do I place the eot, woff, tff and svg files?
Thankyou for the help
It doesn't matter where you place the fonts, so long as they are referenced correctly:
The prefix / is relative to the root directory.
The prefix ./ is relative to the working directory.
The prefix ../ is relative to the parent directory.
Just make sure to define the font in a #font-face, specifying the desired name in font-family, and the URL of the font in the src attribute. The only font URL that you need to link to is the .woff (the others are just browser-specific alternatives or outdated extensions).
Typically, you would just use something similar to the following:
#font-face {
font-family: externalFont;
src: url(/fonts/GT-Walsheim-Pro-Light.woff);
}
div {
font-family: externalFont;
}
<div>Stylish</div>
Note that Andrew's Online have set up a "No Access-Control-Allow-Origin", meaning that the font inclusion would be blocked by CORS policy if you were to link to their fonts directly. You'll need to download their fonts, then link to a local copy.
Hope this helps! :)
I am working on an asp.net mvc Intranet web application, and I am using a web layout template which I download from the web. Inside my CSS files there is the following line of code at the beginning of most of the CSS files (of course each CSS has a different font family name):-
#import url(https://fonts.googleapis.com/css?family=Shojumaru);
The problem I am facing is that in the case of users accessing the aspnet mvc intranet and they do not have access to the internet, this is causing the browser to keep trying to download the files from googleapis.com for around 10 seconds.
I am trying to provide these fonts inside my server, so that users will be served these files even if they do not have access to the internet.
Can anyone advise how I can add these fonts inside my asp.net mvc server, instead of retrieving these files from googleapis.com ?
Thanks
You can do it through JavaScript ( i would recommend this way ) using WebfontLoader (the same script that google fonts tell you to use). Through it you can even have a directive to try to get the font via Google Fonts and if it can't get the file in x seconds, use another path ( or do something else ).
And to give a basic answer, all you have to do is open all those googlefonts css links, copy their CSS files and font files (.svg, .woff., .utf., .ttf and .eot) , upload all those files to your host and make your css reffer to your localhost copies
EDIT
Reasons to preffer WebfontLoader over CSS #import
CSS is in the header, so it has to be loaded before the page html
can be shown, JavaScript if put in the end of the HTML, just before
closing the </body> tag are executed last
#import is not very much performance-wise
WebfontLoader have a function to do something while trying to load
a font ( like showing another font or showing nothing ) and a
function to do something if the font was not found ( like trying to
load from another source or calling a js event )
WebfontLoader can load only some characters of a googlefont
(useful if you want to just show a page header with some font). That
way you avoid badwitdh problems and your page is faster
you can font-face in your stylesheet
#font-face {
font-family: 'your-font';
src: url('../fonts/your-font.eot');
src: url('../fonts/your-font.eot?#iefix') format('embedded-opentype'),
url('../fonts/your-font.woff') format('woff'),
url('../fonts/your-font.ttf') format('truetype'),
url('../fonts/your-font.svg#your-font') format('svg');
font-weight: normal;
font-style: normal;
}
h1{ font-family:'your-font', Arial, Helvetica, sans-serif;}
note :- pls add your fonts in your 'fonts' location ...
I am using the Skeleton Grid System and I followed the directions commented out in the layout.css file provided in the grid files to change the global font face of my pages. The issue that I am finding is that it is not overwriting the base.css file font face.
Here are the changes I made in the layout.css file:
And I added the folder "fonts" to the root directory:
When I run the page locally, the base.css file font appears:
Do I need to just overwrite the base.css file?
#font-face simply declares which fonts you want to use. To actually apply web fonts do something like.
body {
font-family: 'HouschaAlt', helvetica, sans-serif;
}
I assume this definition needs to go in your base.css file.
I'm not able to get font-face working (That's why I usually use Google fonts). But a customer has their own font that I must use.
I'm testing and comparing against this site (Main menu)
Here is my fiddle
Why am I not able to get this work? The font on the other website is working just fine.
Here's my CSS:
#font-face{
font-family:'testFont';
src:url('http://www.cphvision.dk/sites/all/themes/vision/webfonts/21B1BE_0_0.eot');
src:url('http://www.cphvision.dk/sites/all/themes/vision/webfonts/21B1BE_0_0.ttf'), format('truetype');
}
ul li a {
font-family:'testFont', sans-serif;
font-weight:normal;
}
I've also tested on my local server. Not working there either.
I have previously tested using font-face on downloaded fonts from Google. No success.
What am I doing wrong?
I've had issues with font-face before, as well. I know that when I have used it I did not surround the font-family attribute with quotes (single or double). Also, for some reason there seems to have been some sort of conflict with putting the font-face rules in the main style sheet so I put them in a separate style sheet and put this at the top of my main stylesheet:
#import url('font.css');
Here is a quick example of one of my instances of this rule, copied directly from the file:
#font-face{
font-family: Kalinga;
src:url(kalinga.ttf);
}
#font-face{
font-family: Kalinga;
font-weight: bold;
src: url(kalingab.ttf);
}
I know that I did not add both the ttf and the eot here, but it's a good example for you to refer to. I would recommend starting with either eot or ttf and getting one working and then adding the other when you're done (less changes to make when tinkering).
I'm going to recommend using a service like Font Squirrel. I say this because you can upload a font and it will automagically convert it to eot, ttf, etc, and provide you with a zip file containing your fonts and some sample files to get you started.
I know it sounds crazy, but I have had trouble getting #font-face working with absolute paths. However I use it all the time with relative paths and it works fine. And I also recommend Font Squirrel. All you need to do is adjust the CSS path relative to where your fonts are from their provided generated kits and code. And of course with Worpress, always use a Child Theme to circumvent default font declarations.