How do I change the font-family of a <button> element? - html

This is my only CSS
#font-face {
font-family: 'thefont';
src: url('fonts/the-font.otf');
font-style: normal;
}
body {
font-family: 'thefont';
}
When I do a <button>Hi</button> the font ends up being -apple-system.
If I actually assign the font to button, it will make the font appear.
Does anyone know why it's not affecting the body and everything inside it?

In addition to the info below, to ensure your custom font is being taken into account for the button, you need to apply
button {
font-family : inherit;
font-size: 1em;
}
to all button elements.
You can inspect how they do it there:
http://purecss.io/buttons/
or there:
http://getbootstrap.com/css/#buttons
Also make sure that your font is exported in several different formats so that it is supported by all platforms.
You can use FontSquirrel Generator to export your font to all formats.
Your CSS should look a bit like that:
#font-face {
font-family: 'thefont';
src: url('the-font.eot'); /* IE9 Compat Modes */
src: url('the-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('the-font.woff2') format('woff2'), /* Super Modern Browsers */
url('the-font.woff') format('woff'), /* Pretty Modern Browsers */
url('the-font.ttf') format('truetype'), /* Safari, Android, iOS */
url('the-font.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Related

Font support on IE 11

I have a problem with font on IE 11. Some of my element can't accept font-family. I had .woff and .woff2 but it's not accepting my fonts. How can I solve this?
Here's my CSS code:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.eot'); /* IE9 Compat Modes */
src: local('Roboto Thin'), local('Roboto-Thin'),
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff2') format('woff2'), /* Super Modern Browsers */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff') format('woff'), /* Modern Browsers */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}
And I'm using the font-family rule like below:
body {
font-family: Roboto;
}
Here is a result:
Your problem is you're assuming Roboto is a built-in web font, which it's not. You need quotation marks:
body {
font-family: 'Roboto';
}
Did you check the network tab in DevTools (F12)? You shouldn't have any 404 at load.
If you support IE10+ (IE9- isn't supported by MS itself), you only need WOFF2 and WOFF formats. SVG for example is for iOS3-4 or something like that…
You should first test with an uncommon font family name and super normal parameters (no italic, no thin or bold):
#font-face {
font-family: 'test';
font-style: normal;
font-weight: 400;
src: url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff2') format('woff2'), /* Super Modern Browsers */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff') format('woff') /* Modern Browsers */
;
}
body,
body * {
font-family: 'test' !important;
}
It allows you to test for correct path relative to your CSS (compiled CSS if you use Sass and _partials or LESS or PostCSS or Stylus!).
Then you can add font-weight: 100; to both your #-declaration and rules (and remove test bits like body * and !important :p) .
Then change the name of the font family.

Incorrect displaing content CSS?

I have the following CSS code:
<i class="mce-ico mce-i-alignright"></i>
After this are ::before pseudo:
.mce-i-alignright:before {
content: "\e005";
}
So, it is displaying incorrect, like as square everywhere. Look at picture
Make sure you have the require font loaded. the box is to indicate the character is not found.
#font-face {
font-family: myFirstFont;
src: url(font_name.woff);
}
i{
font-family: myFirstFont;
}
You need to specify the font those symbols require in order to display the characters correctly. You may or may not have a variety of different formats available from the font creator, you should include as many as you can in your page as follows:
#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 */
}
i.mce-ico {
font-family: 'MyWebFont';
}

#font-face not loading custom font

I'm trying to use a custom font (.oft) that I have uploaded into my font folder in my filesystem.
I've declared the font in CSS with the following:
#font-face {
font-family: '400'; /*a name to be used later*/
src: url('../font/400ml-Regular.otf'); /*URL to font*/
}
and called it with :
.intro .slogan {
text-align: center;
font-family: '400';
}
My index.html page is in the root folder (var/www/html) and the css and font are in /var/www/html/css and /var/www/html/font respectively (so i think the '..' in the src is correct). I've also added the following to .htaccess
AddType font/otf .otf
but i'm still not even able to see it loading in developer tools.
Does anyone have any advice?
To make #font-face work across different browsers and OP you need to make it like this
#font-face {
font-family: '400';
src: url('400ml-Regular.eot'); /* IE9 Compat Modes */
src: url('400ml-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('400ml-Regular.woff') format('woff'), /* Modern Browsers */
url('400ml-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('400ml-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Use a fontface generator to make different font formats. Try fontsquirel or simillar :)

What is the best way to include custom font using CSS to make it compatible with maximum browsers?

I have tried various codes to embed custom font and finally following seems to work in FF & IE8 above. But it does not support in IE7.
#font-face {
font-family: 'xyzfont';
src: url('fonts/abc-font.eot?') format('eot'),
url('fonts/abc-font.woff') format('woff'),
url('fonts/abc-font.ttf') format('truetype');
}
h1, h2, h3, div span { font-family: 'xyzfont', Georgia, Arial; }
Any suggestion to make it more compatible (such as IE7) most welcome.
Here is the css i use to embed my font in every browser, hope that helps:
#font-face {
font-family: 'xyzfont';
src: url('fonts/abc-font.eot'); /* IE9 Compat Modes */
src: url('fonts/abc-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/abc-font.woff') format('woff'), /* Modern Browsers */
url('fonts/abc-font.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/abc-font.svg#svgFontName') format('svg') /* Legacy iOS */
}
Also note, that you can set your font family without quote, like this:
h1, h2, h3, div span { font-family: xyzfont, Georgia, Arial; }
You can learn about font browser support here.
fontsquirrel is probably the best place to generate every font format you need.
This article explain how to find your font ID to add after the hashtag for the SVG font.
If someone is asking why is there ?#iefix for IE6-IE8 browsers eot font, see this answer.
i use this code ;)
#font-face {
font-family: 'BBadr';
src: url('fonts/BBadr/BBadr.eot'); /* IE9 Compat Modes */
src: url('fonts/BBadr/BBadr.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("fonts/BBadr/BBadr.otf") format("opentype"), /* Open Type Font */
url('fonts/BBadr/BBadr.woff') format('woff'),/* Pretty Modern Browsers */
url('fonts/BBadr/BBadr.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/BBadr/BBadr.ttf') format('truetype'),/* Safari, Android, iOS */
url('fonts/BBadr/BBadr.svg#BBadr') format('svg'); /* Legacy iOS */
}
you can convert Online youre font ( ttf ( with this website :
Simple Online Web Font Converter: ttf otf woff woff2 eot svg otf with css stylesheet
Convert font and use my css code ( not use the sample css of site )

Font-Face not working

Hi I am trying to learn to use font-face to add a different font to my browser but I seem to be missing something in the code because the style is not applying. Here is my code:
<div id="logo">
<img src="img/header/THANATHOS.png" alt="Logo"/>
<p>a gamers community</p>
</div>
<style>
#font-face {
font-family: 'HarlowSolid';
src: url('Fonts/normal/HarlowSolid.eot'); /* IE9 Compat Modes */
src: url('Fonts/normal/HarlowSolid.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('Fonts/normal/HarlowSolid.woff') format('woff'), /* Modern Browsers */
url('Fonts/normal/HarlowSolid.ttf') format('truetype'), /* Safari, Android, iOS */
url('Fonts/normal/HarlowSolid.svg#svgFontName') format('svg'); /* Legacy iOS */
}
div#logo p{
font-family: HarlowSolid , Helvetica , sans-serif;
}
</style>
What am I doing wrong here?
Make sure you've either wrapped it in <style> /* Code Here */</style> tags, or put it in your style sheet.
Also check that the path to the file you've written that code in.
So if it's in /css/style.css and harlowSolid.woff is in root folder called fonts, then your code would need to be url('../Fonts/normal/HarlowSolid.woff')
Also check that the browser you're testing has support for font-face. Though with the conditionals you've included it should be unlikely to face a problem.
Just to confirm: The actual code you've posted is correct, so check your file exists/structured properly.
If you're using Chrome/Safari/FF, you can usually right click -> Inspect Element, look out for the red cog symbol in the bottom right corner which will denote coding/resource errors. (Click it to see the description of the problem.)
Are the second src right?
Have a look at http://www.w3schools.com/css3/css3_fonts.asp
#font-face {
font-family: 'HarlowSolid';
src: url('Fonts/normal/HarlowSolid.eot'); /* IE9 Compat Modes */
**src:** url('Fonts/normal/HarlowSolid.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('Fonts/normal/HarlowSolid.woff') format('woff'), /* Modern Browsers */
url('Fonts/normal/HarlowSolid.ttf') format('truetype'), /* Safari, Android, iOS */
url('Fonts/normal/HarlowSolid.svg#svgFontName') format('svg'); /* Legacy iOS */
}