Cross-domain font problems - html

Sorry for the long post, but you need some background info before my question since this is a strange setup and it's quite complex.
I have two fonts that's needs to be in a newletter.
First font, Cyclone, is in a format OTF.
The second, Albert, is format EOT and WOFF.
We have a system that send the newsletters for us, i only need to upload a html file to that system, that contains the structure, images and newsletter content, and upload images that needs to be in the newsletter.
After that i can preview it by sending it to my self.
First, i can't upload fonts or anything else to the newsletter
system besides images and html.
Second, i have uploaded both fonts, and the css to our webiste's media
folder(public folder) where we also load images to the website.
Third, i or anyone else, have no access to the .htaccess file, and we
will never get it, since the site is hosted somewhere, and to get
that fixed for cross-domain for newsletters is to big of a task for
such a small job.
In the newsletter i am loading the font like this:
#import url(xxx.com/media/fonts/albert.css);
and the CSS looks like this:
#font-face {
font-family: Albert;
src: url("fsalbertwebregular.woff") format("woff");
}
have also tried this setup in the css:
#font-face {
font-family: 'Albert';
src: url('FSAlbertWeb-Regular.eot'); /* IE9 */
src: url('FSAlbertWeb-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('FSAlbertWeb-Regular.woff') format('woff'); /* Modern Browsers */
font-weight: normal;
font-style: normal;
}
And then use the font on the body:
body{
font-family: 'Albert', times new roman;
}
But doing this, i am getting this error/warning:
CORS-headeren 'Access-Control-Allow-Origin'
The funny thing is, when i used the Cyclone.otf font, it worked fine.
When i use the albert.eot or albert.woff, it's not working.
I then tried to convert the woff to otf, and use that, didn't work - same error/warning.
The setup might sounds strange, and is sure is, i have tried to draw how the setup is, so hope it makes a bit more sense.
Can anyone help me with this, what needs to be done without editing the .htaccess file. And why does Cyclone.otf work and not the others, even after converting them to otf?

Special fonts wont work in emails. You have to still use the basic web fonts like arial.
If it worked for you on one machine it may mean that you have that font installed. Try testing it on another machine and see what results you get. Also it can be worth testing your email code through a system like email on acid to see how it reacts and breaks to different email systems such as gmail or outlook.
Here is a guide to email fonts: http://templates.mailchimp.com/design/typography/

Related

font-face and blinking fonts

I'm trying to develop a site for customer - and I encountered a weird thing - my fonts are, so to speak, blinking. To be more precise - not always - but mostly when I go t another subpage - before page display's custom fonts on headers, we can see default font for just split of a second. That creates unwanted effect.
I'm using Bulma, recompiled from scss of the newest version, and font called Museo Sans - which I serve from my server (not from Google). When I run GtMetric there is no latency in font reading and I also use a fade in script which helps a bit with the described effect, but still it's visible. Also the site is relatively small, so no latency due to number of requests or script's size.
My guess is that it may have something to do with the order of my css. I start with font-face declaration loading fonts, then I go to basic mixins and reset. I tried many things but no results. I have to add that it's not the first site I did with that particular setup - wordpress, bulma, scss.
The site's dev version is here:
https://protonads.mediamachina.net/
css here:
https://protonads.mediamachina.net/wp-content/themes/proton/proton.css
Thank you in advanced for any suggestions.
After a bit of reading the internet's sources I got the answer. So including fonts, from external source or local, with font-display: swap; will have two results - FOUT - because we're swapping fonts after it has been downloaded by the browser, second - a bit slower loading time, as we're letting he site to block rendering until he font is loaded.
So unfortunately no good option is available. Or at least no good option was I able to find.
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(''),
url('inter-v2-latin-ext_latin-regular.woff2') format('woff2'),
url('inter-v2-latin-ext_latin-regular.woff') format('woff');
}

HTML CSS - custom fonts

I found a service that allow me to download web fonts:
https://www.fontsquirrel.com/fonts/daniel
I am not a web developer but I am helping to someone to figure out what went wrong.
Here is a web site that uses custom fonts: http://senschild.com
I've implemented:
#font-face{
font-family: 'Daniel-Regular';
src: url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot');
src: url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot?iefix') format('eot'),
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.woff') format('woff'),
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.ttf') format('truetype'),
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.svg#webfont') format('svg');
}
but it does not work for me. The font is still system on the page.
What I did as well:
I also fixed this one as you said and fixed this part '../ as we don't need to move up as Maneesh said. Also I've edited css by removing font-family:JakobCTT; from body, but still does not work. I even added english words assuming that the font only for english characters.
The font files you are using appear to be corrupt, as Failed to decode downloaded font indicates. I've had this problem many times before when using the webfont generator on https://www.fontsquirrel.com.
Edit:
If you download the .OTF file and generate the webfont with https://www.web-font-generator.com/ it appears to work just fine.
Here is your fix:
Add style to the html elements you want to apply the font for. If you want the font to be applied for the whole webpage, then add the following style for body tag either in html or css.
font-family: 'Daniel-Regular';
Try this:
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot?#iefix')
instead of
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot?iefix')
There should be a ?#iefix not just a ?iefix

Fonts not rendering uniformly in browsers

I am trying to use custom fonts on my website and in the css I have the following code:
#font-face {
font-family: 'Sketch';
src: url('../fonts/Sketch.eot');
src: url('../fonts/Sketch.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
ul#holder {font-family:'Sketch'}
The fonts do appear as they have to in Firefox. In chrome, the font do not seem to be rendering smoothly and do not appear as good as in firefox (Should I drop the idea of using fonts in my sidebar and use images which would show the smooth text instead? ;-/)
In IE, the fonts are not appearing at all. What should be done to get proper smoothening of these fonts in Chrome and get these working in IE?
Different browsers supports different font formats:
So you need to create your font in all formats. You can use Font Squirrel (thank you, effectica).
And then, you can import them like that:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
That's not the only possible way. You can find more complete information on this question at Paul Irish's blog.
And, anyway, their appearance may differ a little in different browsers.
All the main browsers have slightly different font rendering engines / techniques and they have different quality of rendering output. So your fonts are unlikely to be 'pixel perfect' between the various browsers and some quality differences will appear. Which one ends up looking the best depends on the font. I have a glyph font that looks great on Chrome and IE but looks a little washed out in Firefox...
Anyway, there is a little hack that you helps you to get fonts to work on IE, see the second src line. This is needed because whilst adding extra font formats ensures support for every browser, unfortunately it causes problems in versions of IE before IE9. Those older browsers see everything between the first url(' and the last ') as a single URL request, so will fail to load the font. This hack tricks the browser into thinking that the rest of the src property are arguments of that query string, so it goes looking for the correct URL and loads the font:
#font-face {
font-family: 'Sketch';
src: url('../fonts/SketchRockwell.eot');
src: url('../fonts/SketchRockwell.eot?#iefix') format('embedded-opentype'),
url('../fonts/SketchRockwell.woff') format('woff'),
url('../fonts/SketchRockwell.ttf') format('truetype'),
url('../fonts/SketchRockwell.svg#countersoftfontRegular') format('svg');
font-weight: normal;
font-style: normal;
}
The above came from Font Squirrel’s #font-face Kit Generator which can be accessed at http://www.fontsquirrel.com/fontface/generator. There you can upload your font and convert it to whichever formats you wish. You can also control the CSS syntax it outputs, subset the characters to reduce file size, and use more options to fine-tune the fonts
Also if you are going to use Bold or Italic on you text then you need to include version of the rule that change the font-weight and font-style accordingly for each combination, so the browser knows what font to use when it encounters a CSS rule with bold in it.
Each font typically has a design purpose and was created for a specific job. Most commercial fonts were not designed to be viewed at small sizes on a screen, so in many cases it makes the most sense to reserve these #font-face for headings and continue to use web-safe fonts like Georgia and Lucida for body copy.
Another aspect of fonts that can affect legibility is how they are anti-aliased and hinted. Right now, web fonts are generally more jagged around the edges than traditional fonts, even when anti-aliased, usually because most were not designed to be viewed on screen. Higher quality fonts, as well as fonts that were designed for the web, have better hinting,
Here is a great URL for creating embeddable font packs:
http://fontface.codeandmore.com/
Upload your TTF or OTF font and it creates the entire font kit for you, complete with
implementation HTML and CSS examples.
Cheers!
Edward said it all. Chrome used to drive me insane for the way it displayed certain fonts.
If you have the font file you can use font squirrel to generate the code as well as all font files that you need for all browsers.

Where's the font file?

I'm building a page with this font, see here: jsfiddle sample
The font is called Cursive; it's not a web-safe font. On Chrome and Firefox, it looks great. However, in IE, it doesn't show.
I'd like to use a #font-face css declaration but I'm wondering where I can find the font file for it? I assume it's already loaded on my computer somewhere; I'd like to find the files I need to them on a server.
Since the fonts we are looking at could be completely different based on what fonts we have installed on our separate machines, why not try What The Font?
Take a screenshot of the text you see and upload it to Whatthefont -- it will detect what font it is using and give you several options to download both free and paid.
From there you can include it in your css file.
Your looking for the actual font file? There are literally hundreds of free font download sites within Google's grasp. Here was my top result.
Once you have found a file you like, ftp it to your server. Then using a css #font-face to include it in your stylesheet.
The benefit of using a service like Googles font api is that it is free and fast - however, there is nothing stopping you from doing this from your own server and with your own file.
<style type="text/css">
#font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
sample via hangy
I can't see it on my machine. But is this the one you're looking for:
http://openfontlibrary.org/font/cursive
It looks like there is an open license, so you could run it through FontSquirrel to get a nice #font-face declaration.
The font that your browser is rendering as 'Cursive' is nothing more than our old friend 'Comic Sans'.
Comic Sans
"Cursive"
Compare the two links to verify

calligraphy fonts on a website

if i want to have some text show up in a calligraphy font, how do i know how it will render of the users computer. How do i know what fonts that person has on the computer or does it matter? any good examples of doing this in css?
would i be better off putting something together in photoshop and saving as an image?
If you are using the font for headings and fancy page elements that are not going to change often I would use an image from photoshop.
If you want to use the font for the main body of text I would suggest defining a font family in css. I would find the font you want to use on your current os if its a font you found and downloaded chances are the end user wont have it. If its a system font or a font that comes with a major software application like ms word there is a good chance it will be available on the end users machine. Once you have found the font you want to use I would then do a little research and see if you can find something similar in a mac flavour and even a Unix flavour.
body
{
font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman"
}
Its always good to use a backup font that you know will work on anyone's machine the browser will select the most applicable in the list starting with the first font stated working its way until it finds a match.
You can embed TTF font files into CSS.
A good example of it is here:
/* DejaVu Sans 2.24
http://dejavu.sourceforge.net/wiki/index.php/Main_Page */
#font-face {
font-family: "DejaVu Sans";
src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]")
}
Edit:
Note: This will only work in Firefox, and possibly Chrome.
Microsoft has published a document about how to embed fonts into a web page using the Embedded OpenType format. It involves converting the font to a an EOT file and then referencing it in the stylesheet using the following syntax:
#font-face {
font-family: Piefont;
font-style: normal;
font-weight: normal;
src: url(PIE0.eot);
}
(This was pulled from an official online demo here).
Based on Boldewyn's answer below, I would bet that you could also use a TTF file in the src: parameter.
I tend to use #font-face on my personal websites.. but it depends on what you are doing it for.
First.. the questions.
Is this static text or are we talking about post headlines etc.
If static text, like the main headline, go with an image.
<h1><strong>Same text as the image(seo)</strong></h1>
and in the css
h1 {background:url(/images/use-the-text-as-image-name-for-seo.png) no-repeat top left; width:100px; height:30px;} /* width and height being image width / height /
h1 strong {position:absolute;left:-8000px;}/ makes sure the text doesn't show up over the image, yet doesn't hide it for seo/screen reader purposes */
If you are talking about something that needs to be dynamic, and you need more than graceful degredation, go with sIFR. If graceful degredation is acceptable, go with #font-face
To add to the #font-face supporters: Paul Irish published a version of this CSS declaration, that works in all newer browsers plus all IEs down to IE5.5. However, you need the font as both TTF and EOT formats for this technique to work.
If the license of your font allows this, there are lots of tools to convert back and forth between the formats. Just google for it.