I'm importing some custom fonts in my rails app using the following lines in CSS:
#font-face
{
font-family: "SquareSlabLite";
src: url("/assets/squareslablite.ttf");
}
#font-face
{
font-family: "SquareSlabBold";
src: url("/assets/squareslabheavy.ttf");
}
#font-face
{
font-family: "SquareSlabMedium";
src: url("/assets/squareslabmed.ttf");
}
When I go to the location(s) localhost:3000/assets/font.ttf, I get the respective fonts showing up for download. However when I try and use the fonts for example:
h2{
font-family: "SquareSlabLite";
}
this line only works when I use SquareSlabBold. When I try use the Lite or Med versions of this text, I get nothing, just a generic font showing up. When I check out firebug, The bold shows up, but not the lite nor medium version. I'm baffled. I've checked spelling, redownloaded files but nothing.
Is it not possible to get this working with squareslab medium and lite? Could there be something wrong with the ttf files, even though I have downloaded them from different sources?
Thanks guys.
TTFs are not supported everywhere. And if you're using IE for viewing this font, it is really hard to prepare TTF for this to work in every IE. Try http://www.fontsquirrel.com/fontface/generator/ to generate proper webfonts from yours TTFs.
Related
I am using a custom web font from a type foundry, called herbier, that is made up of characters.
How can i view this font on all browsers?
Chrome works fine, but Safari and iOS turn the type into numerals.
this is an example of the font working on safari from the original website
I am using amazon aws to host this site.
I have looked up many explanations.
changing the display: swap, text to italic, redownloading the text files, urls i use link to the fonts uploaded to my domain, i tried using text-rendering: optimizeLegibility and downloaded the web kit so i would have all svg, woff, woff versions of this font etc etc.
The specimen file has said ' The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings.'
Is there any simple way to solve this?
Example code for a different font that works :
#font-face {
font-family: Director-light;
src: url('https://s3.console.aws.amazon.com/s3/object/www.MYWEBSITE.net?region=eu-west-1&prefix=Director-Light.otf'); src: url('https://s3.console.aws.amazon.com/s3/object/www.MYWEBSITE.net?region=eu-west-1&prefix=FT88-School.ttf'); }
#font-face { font-family: Director-light; font-weight: bold; src: url('Director-Light.otf');}
h3 {
font-size: 15px;
color: navy;
font-family: Director-light;
}
The font i am using at the moment :
#font-face {
font-family: 'hershey-noaillnoaillesherbier';
src: url('hershey-noailles-herbier-webfont.woff2') format('woff2'),
url('hershey-noailles-herbier-webfont.woff') format('woff');
etcc etc
}
I have a custom font in my app/assets/fontsfolder but on production, the font is loading slowly leaving buttons blank before the font renders like this:
and then after 3 seconds, this:
What is going on? What can I do?
my css looks like this:
#font-face {
font-family: 'Reckless-Medium';
src: font-url('Reckless-Medium.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
$reckless-medium: 'Reckless-Medium';
and this:
.btn {
display: inline-block;
font-size: 15px;
font-family: $reckless-medium;
Why does rails make a get request to get the font?
Started GET "/assets/Reckless-Medium.otf" for 127.0.0.1 at 2018-10-19 00:53:29 -0400
Is the font located on another server?
Why do rails make a GET request to get the font?
Because you tell it does so. font-url('Reckless-Medium.otf') eventually commands client's browser to download the font from your webserver.
Is the font located on another server?
Not sure. As I see the font you use is custom. I found it on https://befonts.com/reckless-font.html . For fast loading, it could be uploaded on some CDN servers, of Google or CloudFlare for example, and hardlinked to be downloaded from there. But it's too new, so it's doubtful the font is popular enough CDN majors accepted it to their warehouses.
To make fonts (and all static content) to load faster you can move your static files to some CDN service. For example, check https://www.cloudflare.com/ as an option.
For some reason my glyphicons are not displaying. When I look at the files in the inspector, they show up red, because they are byte 0. However I can access the links successfully:
http://admin.packagezen.com/assets/glyphicons-halflings-regular.woff
Any idea, what is happening? Is it heroku perhaps? or rails? I put the fonts in /public/assets and the file exists when i ssh into the server.
You can configure the rails assets pipeline to serve this for your. Do the following:
Drop that font in (not in public/assets):
/assets/fonts/glyphicons-halflings-regular.woff
Add the font face in your application.css that uses this font/url, this will reference the finger-printed version of this:
#font-face {
font-family: 'Glyphicons';
src: font-url("/assets/fonts/glyphicons-halflings-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
Then feel free to use that name anywhere to reference that font. Try it out.
Did you add to the config/application.rb file the following (within class Application < Rails::Application)?
config.assets.paths << "#{Rails}/vendor/assets/fonts"
E.g. source: http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application/
I'm working on a Orchard theme using Twitter Bootstrap 3.0.x
I added all scripts and styles into MyTheme/Scripts & MyTheme/Styles.
It works find except Glyphicons images.
In CSS files, it references icons by using a relative path (../fonts/glyphicon.....).
So I created a MyTheme/fonts containing all glyphicons files.
However, when I browse these files are not found (404).
For example, when I browse the source code :
http://localhost:9100/Themes/MyTheme/Scripts/bootstrap.js -> OK
http://localhost:9100/Themes/MyTheme/Styles/bootstrap.css -> OK
http://localhost:9100/Themes/MyTheme/fonts/glyphicons.. -> KO
Any idea to do that ?
I know this is late, but maybe it will help other people. You should put your fonts folder in the Content folder looking like this:
http://localhost:9100/Themes/MyTheme/Content/fonts/
After this you should overwrite in a external css file your bootstrap.css and bootstrap.min.css the #font-face of your Glyphicons.
Looking like this:
#font-face{
font-family:'Glyphicons Halflings' !important;
src:url(../Content/fonts/glyphicons-halflings-regular.eot) !important;
src:url(../Content/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
url(../Content/fonts/glyphicons-halflings-regular.woff) format('woff'),
url(../Content/fonts/glyphicons-halflings-regular.ttf) format('truetype'),
url(../Content/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg') !important
}
Orchard doesn't seem to get content like your fonts outside the Content folder.
I converted these arabic fonts to work with CSS #font-face, and they do work on desktop but not on iOS. I tried quite a few things as suggested on other threads but no joy.
This is the page: http://bit.ly/WuBnaa <- works great on desktop, not on iOS.
There is no svg font in your #font-face, see here:
#font-face {
font-family: 'AlFatemi52';
src: url('http://i4ideas.net/fatemi52/alfatemi152-webfont.eot');
src: url('http://i4ideas.net/fatemi52/alfatemi152-webfont.eot?#iefix') format('embedded-opentype'),
url('http://i4ideas.net/fatemi52/alfatemi152-webfont.woff') format('woff'),
url('http://i4ideas.net/fatemi52/alfatemi152-webfont.ttf') format('opentype');
font-weight: normal;
font-style: normal;
}
If you do convert the above to an svg font as well, make sure that you get the arabic ranges too (most conversion services online strip everything outside the ascii range).
To sum up: WebKit on iOS doesn't support the SVG format.
You will have to come up with another format, as no one knows (except Apple) when will this be implemented (if it ever is).