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.
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 decided to change the font of my page, with another downloaded from internet. I tried this way, but it doesn't work. The file "font.ttf" is in the same folder as the html file.
#font-face {
font-family: Test;
src: url(font.ttf);
}
header {
font-family: Test;
width: 100%;
margin: auto;
height: 48px;
background-color: white;
}
If your downloaded font has been saved in the main fonts folder on your system then you should just use it the same way as you would use any other font.
E.g.
font-family='New Font';
There should be no difference :)
Directory to the fonts folder;
Control Panel > Appearance and Personalisation > Fonts > Add Font
To add font to your website, you will need more than the font.ttf file. Also, be as organized as possible from the start and don't just dump everything into one level. Later, when more things are added, you may have a mess and it can get more confusing as things get more complicated. Neatly organize into folders.
1- You will need webfont extensions. Meaning, use an online generator to generate webfonts by submitting your .ttf file (make sure you follow the license allowance). Those extensions work on different browsers.
2- You need to create a .CSS file for webfonts. Here is a link for an example:
[link] How to embed fonts in CSS?
3- You need to follow the exact path on how your fonts can be reached.
4- When you open up your .ttf file, pay attention to your font spelling. (this part can be tricky)
5- You will also need a .htaccess file that helps to link your web fonts to your site. You may see your desired font on your local device browser but it may not work on another device that does not have that font installed.
So I know this is a very newbie question but I cant seem to figure this out, don't know what I am doing wrong here. Downloaded a font from Google Fonts, installed it on my machine and am referencing it in my css like this:
* { margin:0; padding:0; font-family:Lobster; }
In my html I just have a p tag:
<p> Hi, this is some text</p>
Are there any extra steps that need to be taken to use a google font installed on your local machine ??
The correct syntax to use a font is font-family:'Lobster', Arial;
Here if the Lobster font is not available it will use the Arial.
Also you can just import a font file in the css.
CSS
#import url(//fonts.googleapis.com/css?family=Lobster:400);
body{ font-family:'Lobster', Arial; }
DEMO
You dont need to download google fonts on your machine to add in your web pages.
Add the following link between your ead tags
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lobster">
There are no extra steps that you need to take if you have actually not just downloaded the font but also installed it (so that you can see it e.g. in the font menu of Notepad) and you just want to see that font used when you locally view your own pages.
If you want to use it on web pages, you should generate the relevant font files in different formats, upload them onto your server, and use #font-face syntax that deals with them.
I've spent a good amount of time searching for plausible causes for this, ranging from Browser Settings to unicode range.
Basically, I've followed the tutorial from over here: http://tympanus.net/Blueprints/ResponsiveIconGrid/
and I successfully implemented it on my website. The functionality, the styles - everything is in check. Except that in place of the icons, I see rectangles/squares, which is frustrating to say the least.
I am using the exact same browser to view both websites and I can see the icons on codrops just fine. Do you guys/girls have any hints on what might be the issue?
Here is the CSS to add the fonts, it seems to be in check:
#font-face {
font-family: 'anyoldicon';
src:url('assets/anyoldicon.eot');
src:url('assets/anyoldicon.eot?#iefix') format('embedded-opentype'),
url('assets/anyoldicon.woff') format('woff'),
url('assets/anyoldicon.ttf') format('truetype'),
url('assets/anyoldicon.svg#anyoldicon') format('svg');
font-weight: normal;
font-style: normal;
unicode-range: U+00-FFFF;
}
And here is my HTML:
<li>
<a href="#">
<span class="cbp-ig-icon cbp-ig-icon-whippy"></span>
<h3 class="cbp-ig-title">George</h3>
<span class="cbp-ig-category">Smith</span>
</a>
</li>
Anything else I might have missed? I'd rather not show the URL, as it will teach you nothing more, to be honest. Its just as described - same layout, but visible on one website and broken on the other.
Also here is the full CSS corresponding to the icons and the animations of the grid: http://pastebin.com/94UgpN8B I also should mention that this icon font is generated by IcoMoon, if that is any help.
I am using Muse to compile the website, and to be honest icons from other projects haven't worked either. Could it be something from there?
I haven't received any 404 errors in console regarding the assets.
I also tried defining the icons styles separately, so as to remove the possibility of incorrect inheriting of class properties (check out the pastebin CSS), but that didn't work either.
EDIT
Here is another .CSS file which corresponds to the other part of this "plugin's" functionality. Its the only other file that has any realtion to this, except a very standard morenizr.js
hxxp://pastebin.com/c7w1LEBf
What's your folder structure?
Where is your css file placed,is it in a seperate folder?
If the fonts are in "assets/" and css in "assets/css" you need to change the path to src:url('../assets/anyoldicon.eot');
Notice the "../" infront of the path