I've included a custom font on my website (Segoe UI), however the font file are around 1mb, which takes a few seconds to load the first time.
I'm on a Mac, and the font is not shipped with OSX. However, as far as my knowledge goes, it's included with Windows.
How can I make CSS only load the font if it's not already existing on the client?
Using local('Segoe UI') worked out. Seems like it prioritizes the sources from first to last.
Here's the working code
#font-face {
font-family: Segoe;
src: local('Segoe UI'), url('fonts/segoeui.ttf') format('truetype'), url('fonts/segoeui.woff') format('woff');
}
Related
I am trying to use a custom font, which is not available via Google Fonts. I unzipped the font and put it into src/assets/fonts of my React project.
In my index.css I am loading the font like:
#font-face {
font-family: 'LemonMilk';
src: local('LemonMilk'), url(./assets/fonts/LemonMilk.otf) format('otf');
}
I tested the app both on the localhost and hosted it on the web for testing and it is working fine, since the font is installed locally on my machine, but if I open the app on a different machine it is not working. I also deleted the font from my machine and the fallback font started to show since then. What am I missing ? Thank you
It's looking like Your browser has a problem with understanding the font file. Try to make the webfont package from the font file. There is lot of tools to approach it:
https://www.fontsquirrel.com/tools/webfont-generator
Webfont package will contain the font in all major supported formats and will generate the css #font directive for You.
DISCLAIMER: Ensure that You have the rights to use the font.
well i suggest creating a different css file for your fonts then import it to your main css also this site generate font-face for your font with css file!
The correct font name is Lemon/Milk and you'll need to convert it to other format like WOFF WOFF2 as well.
Please Follow this:
Go the this Website free online font generator
Upload your font and check TTF, EOT, WOFF, WOFF2 (See browser support)
Click Convert > Download
Upload the newly converted fonts to your server
Finally your CSS should look like similar to this.
#font-face {
font-family: 'Lemon/Milk';
src: url('LemonMilkbold.eot');
src: url('LemonMilkbold.eot?#iefix') format('embedded-opentype'),
url('LemonMilkbold.woff2') format('woff2'),
url('LemonMilkbold.woff') format('woff'),
url('LemonMilkbold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
Please Note that you'll need to convert any other font weight too. and don't forget to add the correct path
I'm using the Meteor framework, and have the following in my main.scss file:
#font-face {
font-family: 'GrandHotel-Regular';
src: url('GrandHotel-Regular.eot');
src: url('GrandHotel-Regular.woff2') format('woff2'),
url('GrandHotel-Regular.woff') format('woff'),
url('GrandHotel-Regular.ttf') format('truetype'),
url('GrandHotel-Regular.svg#GrandHotel-Regular') format('svg'),
url('GrandHotel-Regular.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'GrandHotel-Regular';
}
This isn't working and when I inspect the selected font, the family is GrandHotel-Regular just as it should be, but the console says it's rendering as Times New Roman.
I'm using Chrome on Ubuntu, and it's an older version that can no longer be updated because my laptop is so old, however I don't think this is causing the problem, since things like this have worked for me in the past.
What could be going wrong?
Other questions, like this one:
Font coming out as Times New Roman in Older Browsers
or this one:
Font proxima_novalight is rendered as Times New Roman
aren't addressing the same problem.
The urls for your fonts don't have any folder as part of the filepath, which means they have to be in the same folder as your CSS file. Are they really? (If not, add the folder/filepath)
How is your project set up? Check the network tab in the developer tools to make sure the fonts are actually being loaded. If not, recheck your URLs to make sure they are pointing to the right files.
Your code looks completely fine so if your project setup is not the problem, try using a different browser and see if you can reproduce the issue.
I ask out to the community if anybody has ever had any issues embedding fonts on their website and it being rendered terrible as the outcome? This is the case across all latest browsers not tied to a specific browser...
Tried adding certain css rules to change the fonts weight, style, smoothness etc but doesn't seem to effect the font by any means, any ideas?
You will notice that the letter 'A' is not as it should be but the correct font types are loaded with no issues.
Font can be found here
Screenshots
Embedded font CSS
#font-face {
font-family: 'Linotte Semi Bold';
src: url('/fonts/linotte-semi-bold.eot');
src: url('/fonts/linotte-semi-bold.eot?#iefix') format('embedded-opentype'),
url('/fonts/linotte-semi-bold.woff2') format('woff2'),
url('/fonts/linotte-semi-bold.woff') format('woff'),
url('/fonts/linotte-semi-bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
As we speak I've just received confirmation from MyFonts that sometimes fonts are configured slightly different depending on the font used and may need some tweaking to the Hinting settings when downloading a webfont kit.
The following steps fixed the issue regarding the letter 'A' and now displays correctly as expected:
You may want to try downloading a webfont kit configured to use a different Hinting setting.
Simply log into your MyFonts order history at: https://www.myfonts.com/my/orders/kitbuild.html
Select the webfont you would like to use.
Under the 'Hinting' sub-head, select 'Smooth', 'Native', or 'None' (Best was the default). It may take a couple of tries, depending on the font and how it's used.
The custom Webfont Kit Builder will select a CSS script by default. If you would prefer to use JS, simply change this option at the bottom of the page.
Download the new kit and replace the existing webfonts/stylesheet in your server.
Try this, it fixed some of my font appearance in the past, but it's kind of a shot in the dark. That "A" really looks strange, does it look the same if you install the font on your system and use it in photoshop or word or anything else?
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
I hope I'm asking this question in the right place,
I'm working on a website for a friend, here's the site hosted on my goDaddy acc:
http://www.andkensol.com/rowanWeb/
And here it is on my friends:
http://www.rowanmoore.org/
You can see the clear difference in the title font. If you inspect them you'll see they are both using CODE. I personally uploaded all the files myself and the file structure, layout, file paths are all identical yet the font won't render on my friends site.
I downloaded the font from font squirrel and I'm using #font face to implement it in both sites.
CSS
#font-face {
font-family: CODE;
src: url('font/CODE Light.otf');
}
#nameTitle{
font-size:60px;
font-family:CODE;
color:white;
font-weight:400;
margin-bottom:-3%;
}
The 'font folder' is in the same folder as the stylesheet and CODE Light.otf is in the font folder.
Ive deleted the site from my friends server, downloaded it from mine and then uploaded it to my friends and still no luck.
Could this be a problem on goDaddy's end perhaps?
I recommend you to use some webgenerator to generate css file with different formats of font.
I think your problem is wrong #font-face.
#font-face {
font-family: 'nfs';
src: url('yourFont.eot');
src: url('yourFont.eot?#iefix') format('embedded-opentype'),
url('yourFont.woff') format('woff'),
url('yourFont.ttf') format('truetype'),
url('yourFont.svg#yourFontName') format('svg');
font-weight: normal;
font-style: normal;
}
Diffrenet browser need other format to render and open font.
I'm using mostly those three webfont generators
http://onlinefontconverter.com/
http://www.fontsquirrel.com/tools/webfont-generator
http://convertfonts.com/
But there is more, type to uncle google "font generator"
EDIT: i think blank space in your font/CODE Light.otf is the problem try to use for example something like this font/CODE_Light.otf
I guess it's a matter of access rights of your folders/files.
Something like 644 would be necessary for a file to be able to access the font from the outside web (the last 4 => read access for public). You can either use chmod on the console or change the rights in your ftp-client.
Also, you should support more than otf, or you will most likely lock out a significant amount of Internet Explorer Users.
I am using the following CSS to define a custom font on a webpage:
#font-face
{
font-family:zapfino;
src:url("zapfino.ttf");
}
Next, I am defining an id that uses it:
#custom_font
{
font-family:zapfino;
font-size:18px;
}
I've tested the page on Safari and Chrome and it works fine. However, in firefox the font is not showing up, it is reverting to a default. Sorry if this is a repost but I have searched on StackOverflow and cannot find the answer! Does anyone know why this is happening? see it here: www.moosecodes.com (its still under construction! please pardon the mess!)
Each browser only reads one file type for webfonts. Unfortunately, they are all different file formats. In order for the font to display correctly in all browsers, you will need 4 different types of font file- TTF, WOFF, SVG & EOT. Your code will look something like this:
#font-face {
font-family: 'Zapfino';
src: url('Zapfino.eot');
src: url('Zapfino.eot?#iefix') format('embedded-opentype'),
url('Zapfino.woff') format('woff'),
url('Zapfino.ttf') format('truetype'),
url('Zapfino.svg#SansumiRegular') format('svg');
}
That code is based of the stylesheet included with FontSquirell fonts.
FontSquirell has a converter, but you do need to check your license. Zapfino is a commercial font owned by Adobe(?) and as far as I know using their fonts with #font-face is a violation of the fonts EULAs.
TypeKit offers commercial fonts for use with #font-face for a fee that complies with the foundries EULAs.
jlego is right - you should check out the FontSquirrel site - they have an excellent tool for building your kit and converting your files for you, AND you must always be sure that the font is legal to use on your site.
However Firefox and Chrome should both support TTF, which is the format you are using.
In researching your problem on your site, what I've found is that the font is not rendering properly in any browser I check in. What I've found is while the stylesheet is referencing the right file location, but the font file appears to be corrupted. I would suggest getting a new font file new replace the one you are using.
I had the same problem.... the answer by jlego was usefull to me.
My font was recognized in Chrome and IE.
In FF my TTF wasn't recognized untill I added the format('truetype') in my css file.