So I wanted a custom glyphicon and used icomoon to do so. Instead of importing the entire library to the server, I simply used a stylesheet import to make things easier.
Now the stylesheet on icomoon only allowed the style.css link to be open for 24 hours, so I simply took the contents of the style.css file and put it on a custom domain.
Old style.css:
<link rel="stylesheet" href="https://i.icomoon.io/public/temp/8e91637825/UntitledProject/style.css">
New style.css
<link rel="stylesheet" href="http://thecommentsection.co.uk/style.css">
This is the contents of the style.css:
#font-face {
font-family: 'icomoon';
src: url('https://i.icomoon.io/public/temp/8e91637825/UntitledProject/icomoon.eot?kxcvpn');
src: url('https://i.icomoon.io/public/temp/8e91637825/UntitledProject/icomoon.eot?kxcvpn#iefix') format('embedded-opentype'),
url('https://i.icomoon.io/public/temp/8e91637825/UntitledProject/icomoon.ttf?kxcvpn') format('truetype'),
url('https://i.icomoon.io/public/temp/8e91637825/UntitledProject/icomoon.woff?kxcvpn') format('woff'),
url('https://i.icomoon.io/public/temp/8e91637825/UntitledProject/icomoon.svg?kxcvpn#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-rubyit:before {
content: "\1f4a3";
}
The Issue
The only thing I changed on the stylesheet import is the href link, but for some reason changing the link from the old to new suddenly stops the glyphicon from working?
Any ideas?
Related
I'd need some help with custom fonts. For some reason I can't get them to work, I'm using a .css and I'm pretty sure I'm doing all as required. Here's my head link with .css :
<link rel=stylesheet type= "text/css" href= "main.css">
and my .css :
html, body {
padding-top: 2em;
text-align: left;
width: 50%;
margin: 0 auto;
}
#font-face {
font-family: 'Dudu_Calligraphy';
src: url(fonts/Dudu_Calligraphy.tff);
font-style: normal;
font-weight: 100;
}
p {
font-family: Dudu_Calligraphy
font-weight= 100;
}
both .html, .css, and the font are in one folder and i just can't apply them on the paragraphs
First, you misspelled a little, it should be font-weight: 100;, not font-weight= 100;.
You need multiformat fonts to use them in the web, because some browsers supports one type, some supports the another one.
Needed formats: TrueType, WOFF, EOT Compressed, SVG.
And your #font-face should look like this:
#font-face {
font-family: 'FONTNAME';
src: url('path/to/font/font.eot');
src: url('path/to/font/font.eot?#iefix') format('embedded-opentype'),
src: url('path/to/font/font.ttf') format('truetype'),
src: url('path/to/font/font.woff') format('woff'),
src: url('path/to/font/font.svg#FONTNAME') format('svg');
}
To generate different types of font, you can for example use this font generator: https://www.fontsquirrel.com/tools/webfont-generator
And if your fonts will not be rendered properly on all platforms, you can try this CSS rules:
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
My CSS includes custom fonts such as:
#font-face {
font-family: 'AllerRegular';
src: url("http://domain/css/fonts/aller_rg-webfont.eot");
src: url('http://domain/css/fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'), url('http://domain/css/fonts/aller_rg-webfont.woff') format('woff'), url('http://domain/css/fonts/aller_rg-webfont.ttf') format('truetype'), url('http://domain/css/fonts/aller_rg-webfont.svg#AllerRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
height: 100%;
font-family: AllerRegular, sans-serif;
font-size: 12px;
color: #000000;
}
When loading the web page, several of the paragraphs sometimes seem to be "missing". In the Inspector, I then look at the body, uncheck the line that says font-family: AllerRegular, sans-serif;, then check it again. The text comes back!
Because of this test, I am assuming there is some issue in the order that the CSS and the fonts file are loaded.
Also note that the CSS file and the font files are not hosted on the same server.
I installed a font to the site but it will only show on Chrome (I checked on Firefox and Explorer). I dont know if I am missing something in the coding?
Font Face
#font-face {
font-family: 'octin_sports_freeregular';
src: url('octinsports-webfont.eot');
src: url('octinsports-webfont.eot?#iefix') format('embedded-opentype'),
url('octinsports-webfont.woff') format('woff'),
url('octinsports-webfont.ttf') format('truetype'),
url('octinsports-webfont.svg#octin_sports_freeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Then in the HTML:
<link rel="stylesheet" href="http://weareprodigy.co/stylesheet.css" type="text/css" charset="utf-8">
And in the headings:
h1 {
font-size: 32px;
font-size: 2.25rem;
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif;
text-shadow: 2px 4px 3px rgba(0,0,0,0.7);
}
h2 {
font-size: 28px;
font-size: 1.875rem;
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif;
color: #8CC63E;
-webkit-text-stroke-width: .5px;
-webkit-text-stroke-color: black;
}
Link: www.weareprodigy.co
Each browser uses a different way of loading in the font, some use the EOT file, some use the WOFF file.
You currently only have the EOT file uploaded to the server and chrome uses the EOT file but IE & Firefox will use one of the other two formats.
You will need to make sure that the files are uploaded in the correct place and that within your CSS, you are linking to the correct place.
EDIT
Just had a look through your CSS. Theres no need to have the additional style.css at root level because in the actual theme, the fonts are already been called in. My guess is that the fonts have been put at the root level and not within the theme folder.
EDIT 2
Change your themes style.css file (wp-content/themes/epik/style.css) to show this
#font-face {
font-family: 'octin_sports_freeregular';
src: url('../../../octinsports-webfont.eot');
src: url('../../../octinsports-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../octinsports-webfont.woff') format('woff'),
url('../../../octinsports-webfont.ttf') format('truetype'),
url('../../../octinsports-webfont.svg#octin_sports_freeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Since the fonts are in the root, that should direct to the root file as the css is looking for the fonts in the epik theme folder atm.
I have a problem when I choose a font in a CSS file. The font doesn't appear correctly in local HTML code.
#main_menu ul li
{
border-left:1px solid #dad8d8;
font-family:"arabic transparent";
font-size:16px;
padding: 0px 20px;
color: #e2001a;
list-style: none;
display: inline;
font-weight: bold;
}
The font in the HTML file isn't like in the Photoshop design.
You better use #font-face from CSS3. Example from W3School:
#font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
You have to embbed the font
Use the following website for font generation
www.fontsquirrel.com/fontface/generator
#font-face {
font-family: 'YourFont';
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#YourFont') format('svg');
font-weight: normal;
font-style: normal;
}
You cannot just use any font on the web/in HTML. You have something called web-safe fonts and can add custom ones manual.
Check FontSquirrel for conversion techniques: http://www.fontsquirrel.com
If a font is on your local machine, it "can" work if the browser tries to look for it, but you can't rely on it as most other users that visit your website won't have it on theirs, making the font fallback to Arial or an alike default font.
Font-squirrel will give you these formats (name is an example);
arabic.eot
arabic.svg
arabic.ttf
arabic.woff
With all these included all major browsers should be able to read your custom font with the #font-face property:
#font-face {
font-family: 'arabic transparent';
src: url('arabic.eot');
src: url('arabic.eot?#iefix') format('embedded-opentype'),
url('arabic.woff') format('woff'),
url('arabic.ttf') format('truetype'),
url('arabic.svg#arabic_transparent') format('svg');
font-weight: normal;
font-style: normal;
}
#main_menu ul li {
font-family: 'arabic transparent';
}
I'm integrating css to my JSF2 application and something isn't working with the fonts. This is how I try it:
The fonts are in WebContent/resources/fonts (on Eclipse.) In the same directory I have a stylesheet.css file, and I declare the font face like this:
#font-face {
font-family: 'TitilliumText22LRegular';
src: url('titilliumtext22lregular-webfont.eot');
src: url('titilliumtext22lregular-webfont.eot?#iefix') format('embedded-opentype'),
url('titilliumtext22lregular-webfont.woff') format('woff'),
url('titilliumtext22lregular-webfont.ttf') format('truetype'),
url('titilliumtext22lregular-webfont.svg#TitilliumText22LRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I connect to the stylesheet with this in the header.xhtml of my application:
<h:outputStylesheet library="fonts" name="stylesheet.css"/>
The css class element that tries to connect to this is in resources/css and is called style.css. The class itself:
.time {
font: 19px 'TitilliumText22LRegular';
text-transform: uppercase;
line-height: 1.8;
white-space: nowrap;
}
For all I can tell this should work. But it doesn't. What am I doing wrong?
Have you tried not using the shorthand font? Try just using font-family: 'TitilliumText22LRegular'; and see what happens?