Is it possible to add custom fonts in CSS in Qualtrics; i.e. exotic fonts that are not already proposed (Arial, ComicSansMS, CourrierNew, Georgia, Lucida…)?
I've implemented a <link rel="stylesheet'…> directing to an external stylesheet referring to custom fonts, but it doesn't work. Inline CSS works for other fonts, but not for non-websafe fonts.
Put in the first lines a link tag to the .css:
<link href="https://foo.com/fonts.css" rel="stylesheet" type="text/css">
Create the .css folder that contains:
#font-face {
font-family: 'fontOne';
font-style: normal;
font-weight: 400;
src: local('fontOne'), url(http://foo.com/fonts/fontOne.woff) format('woff');
}
Refer inline as <p style="font-family:'fontOne';">YourText</p>
Related
I am not using flash or php - and I have been asked to add a custom font to a simple HTML layout. "KG June Bug"
I have it downloaded locally - is there a simple CSS trick to accomplish this?
Yes, you can use the CSS feature named #font-face.
It has only been officially approved in CSS3, but been proposed and implemented in CSS2 and has been supported in IE for quite a long time.
You declare it in the CSS like this:
#font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
#font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
Then, you can just reference it like the other standard fonts:
h3 { font-family: Delicious, sans-serif; }
So, in this case,
<html>
<head>
<style>
#font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }
h1 {
font-family: JuneBug
}
</style>
</head>
<body>
<h1>Hey, June</h1>
</body>
</html>
And you just need to put the JUNEBUG.TFF in the same location as the html file.
I downloaded the font from the dafont.com website:
http://www.dafont.com/junebug.font
You can use #font-face in most modern browsers.
Here's some articles on how it works:
http://webdesignerwall.com/general/font-face-solutions-suggestions
http://webdesignerwall.com/tutorials/css3-font-face-design-guide
Here is a good syntax for adding the font to your app:
http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
Here are a couple of places to convert fonts for use with #font-face:
http://www.fontsquirrel.com/fontface/generator
http://fontface.codeandmore.com/
http://www.font2web.com/
Also cufon will work if you don't want to use font-face, and it has good documentation on the web site:
http://cufon.shoqolate.com/generate/
For the best possible browser support, your CSS code should look like this :
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
For more info, see the article Using #font-face at CSS-tricks.com.
Try this
#font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
}
<div class="FontMarket">KhonKaen Market</div>
vilis.org
If you are using an external style sheet, the code could look something like this:
#font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
And should be saved in a separate .css file (eg styles.css). If your .css file is in a location separate from the page code, the actual font file should have the same path as the .css file, NOT the .html or .php web page file. Then the web page needs something like:
<link rel="stylesheet" href="css/styles.css">
in the <head> section of your html page. In this example, the font file should be located in the css folder along with the stylesheet. After this, simply add the class="junebug" inside any tag in your html to use Junebug font in that element.
If you're putting the css in the actual web page, add the style tag in the head of the html like:
<style>
#font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
And the actual element style can either be included in the above <style> and called per element by class or id, or you can just declare the style inline with the element. By element I mean <div>, <p>, <h1> or any other element within the html that needs to use the Junebug font. With both of these options, the font file (Junebug.ttf) should be located in the same path as the html page. Of these two options, the best practice would look like:
<style>
#font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>
and
<h1 class="junebug">This is Junebug</h1>
And the least acceptable way would be:
<style>
#font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
and
<h1 style="font-family: Junebug;">This is Junebug</h1>
The reason it's not good to use inline styles is best practice dictates that styles should be kept all in one place so editing is practical. This is also the main reason that I recommend using the very first option of using external style sheets. I hope this helps.
there is a simple way to do this:
in the html file add:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />
Note: you put the name of .ttf file you have.
then go to to your css file and add:
h1 {
color: blue;
font-family: vermin vibes;
}
Note: you put the font family name of the font you have.
Note: do not write the font-family name as your font.ttf name
example: if your font.ttf name is: "vermin_vibes.ttf" your font-family will be: "vermin vibes" font family doesn't contain special chars as "-,_"...etc it only can contain spaces.
EDIT: So, for some reason, when setting font in "body" or "html" it didn't applied font to elements in "form", because I had only form element to test form elements, fonts didn't worked. When I just added some random text before "form" element by rolling my head on my keyboard, I found out that fonts are actually working... But I was expecting that if I set font-family rule in "body" or "html" every element will inherit that font... No CSS with "#font-face" rule needed editing...
So I have a problem with self-hosted font. I want to load Unscii font on my page, I've generated CSS file with #font-face rule and fonts (WOFF, WOFF2, TTF), linked that CSS file to my page, but when I'm trying to use this font in other CSS file, it doesn't work. Also when I trying to use other font, sizing of elements on page changes slightly, like "margins or paddings or content box", but the font face itself is still remains the same, even for "built-in" fonts. I've did everything same as in my other project where everything loaded and linked same, searched in Google, but every result refers to how link and use, so it didn't helped me.
This is how I link font-face CSS
<link href="fonts/unscii-16.woff2" rel="preload" as="font" type="font/woff2" crossorigin/>
<link href="css/unscii.css" rel="stylesheet"/>
<link href="css/styles.css" rel="stylesheet"/>
And this is my "unscii.css" file
#font-face {
font-family: 'unscii';
src: url('../fonts/unscii-16.woff2') format('woff2'),
url('../fonts/unscii-16.woff') format('woff'),
url('../fonts/unscii-16.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
I'm using Razor Pages and ASP.NET Core 6, HTML code is located in _Layout.cshtml and works perfectly for all pages, only issue with fonts.
Thanks.
I think this might help. you can remove the '' from URL and format as an OpenType because in my styling it is working that way!
you also can check this article.
https://github.com/whatwg/html/issues/7627
Check this out!
<link href="fonts/unscii-16.woff2?v=4.5.0" rel="preload" as="font" type="font/woff2" crossorigin="anonymous"/>
CSS file
#font-face {
font-family: unscii;
font-style: normal;
font-weight: 100;
url(../fonts/unscii-16.woff2) format('opentype'),
}
#font-face {
font-family: unscii;
font-style: normal;
font-weight: 100;
src: url(../fonts/unscii-16.ttf) format("opentype");
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 10px;
font-family: Unscii;
}
I am building a website for school, and want to use a special font, but when I import it, it doesn't show the font. I tried using the #face-font{font-family: something; src: url(font.ttf); The css I use it on looks like this: header{font-family: something;}And I tried this also with a .otf file, but that didn't work either. I also tried <link ref="font" href="font.ttf"> And also this with a .otf file. But in al cases the font didnt show up. Is it my fault in some code, or is the font just not useable? The link to the font is: http://www.fontspace.com/darrell-flood/quiet-meows
To include the custom font you'll need this somewhere in your CSS:
#font-face {
font-family: 'QuietMeows';
src: url('../fonts/quiet_meows.ttf') format('truetype'),
url('../fonts/quiet_meows.otf') format('opentype');
}
After downloading the font you will need to move it into your project, I put it into a fonts folder and renamed to be quiet_meows.
Then you can use it in your CSS like this:
p {
font-family: 'QuietMeows';
}
Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".
<style>
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
#font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The #font-face Rule</h1>
<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the #font-face rule.</p>
The problem was fixed by adding the format tag. After this, the font did show up on the page. The end looked like this.
#font-face{
font-family: "quiet meows";
src: url('font.ttf') format('truetype');
}
I have downloaded a font called "steelfish" that contains these files
steelfish outline
steelfish rg it
steelfish rg
and I have set these in my css file like this:
#font-face {
font-family: 'Stellfish Outline';
src: url('fonts/steelfish outline.ttf') format('truetype'),
}
#font-face {
font-family: 'Stellfish Regular';
src: url('fonts/steelfish rg.ttf') format('truetype'),
}
#font-face {
font-family: 'Stellfish Italic';
src: url('fonts/steelfish rg it.ttf') format('truetype'),
}
but when I try to apply my custom font to any text then it doesn't take that font style.
<strong style="font-family:'Steelfish Italic' ">
</strong>
I need help in this issue.
thanks
Get rid of the spaces in the file names or replace them with dashes. Then update your css accordingly. Also, inline style declarations are kind of frowned upon. Pull them into your css stylesheet if you can. They'll work like you have them, but not "proper".
Just use Google Fonts. It's really simple:
Select a font from their website (https://www.google.com/fonts) and import the file in your <head></head> tag:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Then apply that font in your CSS:
.text { font-family: 'Open Sans', sans-serif; }
I know that it's possible to have multiple font-faces on css.
Now I have two html pages that use these fonts but in the future there'll be more; now those font-faces are declared via inline css and used via classes. What I really wanted was to wrap up all my font-faces into a single fonts.css and then on each individual html pages reference that css and use <p class="...-font"><p>
So my fonts' css is like this:
#font-face {
font-family: 'Komika';
src: url('/bin/res/font/KOMIKAX_-webfont.eot');
src: url('/bin/res/font/KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
url('/bin/res/font/KOMIKAX_-webfont.woff') format('woff'),
url('/bin/res/font/KOMIKAX_-webfont.ttf') format('truetype'),
url('/bin/res/font/KOMIKAX_-webfont.svg#KomikaAxisRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.komika-font {font: 30px 'Komika', Tahoma, sans-serif;}
#font-face {
font-family: 'Nevis';
src: url('/bin/res/font/nevis-webfont.eot');
src: url('/bin/res/font/nevis-webfont.eot?#iefix') format('embedded-opentype'),
url('/bin/res/font/nevis-webfont.woff') format('woff'),
url('/bin/res/font/nevis-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.nevis-font {font: 500% 'Nevis', Tahoma, sans-serif;}
And the html is like this:
<head>
<link rel="stylesheet" href="/bin/res/style-fonts.css.php" type="text/css" />
<link rel="stylesheet" href="/bin/res/style.css.php" type="text/css" />
<title><?php echo $photo_title ?></title>
</head>
<body>
<h1 class="____">Some text here</h1>
<body>
And at the ____ should be "nevis-font" but the IDE (Dreamweaver) doesn't even autocomplete.
Is it possible? Because I tried it and it didn't work (the chosen font wasn't displayed).
I think I got it, the problem was that the css containing the font-faces can't end with .php like I had. I just use *.css.php because the .php forces the server to compress the css files.
Yes it's possible. We'll need more details on the problem you used to have in order to answer a more detailed answer.
The problem was that the css containing the font-faces can't end with .php like I had. I just use *.css.php because the .php forces the server to compress the css files.