I have a certain frontend code that is deployed in another website through a specific div.
Our assets, like images and such, are made available in different urls, based on the environment (dev, staging and production).
In the code, I used window.location.href to obtain the current url to discover in which environment I am:
export const buildImagePath = (resource_path:string):string => {
var url = window.location.href;
if (url.includes(".staging.") )
return "https://staging.something.com"+"/"+resource_path ;
else #production
return "https://something.com" +"/"+resource_path;
return resource_path;
}
, and then gave each image a class id, and added the following code
ngOnInit(): void {
var imgs =document.getElementsByClassName("img_class_X") as HTMLCollectionOf<HTMLImageElement>| null;
if (imgs!=null)
for(var i = 0; i < imgs.length; i++) {
if (imgs[i]!=null)
imgs[i].src = buildImagePath('assets/imgs/icons/X.svg');
}
}
And this works - except for some hardcoded paths in have in a styles.scss file: urls for website fonts.
How can I had the logic there as well? Meaning, how to make the code conditionally load the fonts from staging.something.com/assets/fonts... or something.com/assets/fonts/... based on the enviroment, for this file:
styles.scss:
/ For more information: https://material.angular.io/guide/theming
#use "~#angular/material" as mat;
$fontpath: "https://something.com/assets/fonts/";
#font-face {
font-family: "my cool font";
src: url($fontpath + "mycoolfont.woff2") format("woff2"),
url($fontpath + "mycoolfont.woff") format("woff");
font-weight: bold;
font-style: normal;
}
Related
I need to load fonts (.eot,.ttf etc) on demand as per the requirement.
WebFont.load({
custom: {
families: ['Font1'],
urls: ['css-path']
}
});
I am unable to do it using above approach.
One of the solution i found out to create style element and add the #font-face like this -
const cssStr = `
#font-face {
font-family: Tondo;
src: url(../static-assets/common/fonts/tondo/tondo-light-webfont.eot);
}`
const style = document.createElement('style');
style.innerHTML = cssStr;
document.head.appendChild( style );
Is there any better way to do it?
I want to be able to choose font I wish to download from backend via select and then use it in my project. User can change fonts and download new ones. I have problem that if font is fixed in my css like this:
export const MainContent = styled.div`
#font-face {
font-family: 'Lobster';
src: local('Font Name'), local('FontName'),
url ('http://localhost/font/lobster') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
};
font-family: 'Lobster';
`;
It is downloaded properly right after app starts and I can use it, however I don't want to have it fixed, tried few solutions so far like with WebFont:
import WebFont from 'webfontloader';
function App() {
enter code here
WebFont.load({
custom: {
families: ['Lobster'],
urls: ['http://localhost/font/${fontname'] <= used fixed lobster in this case
}
});
...
}
But it throws error like =
The resource from “http://localhost/font/lobster” was blocked due to MIME type (“font/ttf”) mismatch (X-Content-Type-Options: nosniff).
another idea was to send parameter which could replace for example lobster via props of styled component like
<MainContent fontName="lobsterTheSecond">
...
</MainContent>
However I don't really know how to pass props in #font-face as it keeps throwing errors.
Does anyone knows how can I add fonts dynamically from backend while app works? I'm out of ideas already
Not sure about WebFont but it can be done quite easy with styled components:
First of all don't pass it to your 'MainContent' but rather pass props with new font to your globalStyles and then do something like that:
const GlobalStyle = createGlobalStyle`
body {
#font-face {
font-family: 'Lobster';
src: `${props =>
url ('http://localhost/font/${props.fontName}')` format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
};
}
`
and pass it like:
function App() {
const [newFont, setNewFont] = useState('');
return (
<div>
<GlobalStyle fontName{newFont} />
<button onClick={() => setNewFont('myNewFont')>Click</button>
</div>
)
}
and then in your MainContent just use this font:
const MainContent = styled.div`
font-family: 'Lobster';
`
I have created a javascript direflow application. I am trying to load a local font but haven't been able to.
Below are the details and code snippets I have applied.
Folder Structure
font.css
#font-face {
font-family: 'MyLocalFont';
src: local('MyLocalFont'),
url('./fonts/MyLocalFont.woff') format('woff'),
url('./fonts/MyLocalFont.woff2') format('woff2');
}
direflow-components/testing-component/index.js
plugins: [
{
name: 'font-loader',
options: {
custom: {
families: ['MyLocalFont'],
urls: ['/fonts.css']
},
},
},
],
App.css
.header-title {
font-size: 34px;
color: #5781C2;
font-family: 'MyLocalFont';
}
The font files doesn't load. Please help.
Note: Built a react app using create-react-app there with #font-face changes the fonts load. Something with direflow is not working.
I resolved the issue seems like the plugin font-loader is not required. I removed it from direflow-components/testing-component/index.js.
Another change I made is removed the single quotes from the font-family.
App.css
.header-title {
font-family: MyLocalFont;
}
Flask static settings:
app = Flask(__name__.split('.')[0], static_folder=None)
app.static_url_path = '/static'
app.static_folder = 'static'
app.add_url_rule(app.static_url_path + '/<path:filename>',
endpoint='static',
view_func=app.send_static_file)
CSS
#font-face {
font-family: MuiiconSpread;
font-weight: normal;
font-style: normal;
src: url('../fonts/icons.ttf') format('truetype');
}
JS
require.config({
paths: {
'jquery': '/static/plugins/jquery-3.3.1/jquery.min',
},
});
While access the subdomain such as: a.test.com, the icons.ttf and jquery.min.js are 404 error.
When I add subdomain='a' in add_url_rule for static, everything will be fine. But it just matches a.test.com, while access b.test.com should change the same config to subdomain='b'.
How to fix it?
I faced same issue.
Based on research, I understand that Flask-CORS is the best solution.
But for temporary fix, I have added below code in __init__.py file in the root folder.
#app.after_request
def after_request(response):
if request.endpoint.startswith('static'):
response.headers.add('Access-Control-Allow-Origin', '*')
return response
I'm trying to use gulp-iconfont to build an icon font from a set of svg images.
I've created my gulp task and there're no errors when I run it. But neither can I get the code for each icon, which is what I need to use the icons on css pseudoelements.
The console output shows strange characters where the unicode is supposed to be:
Here's my gulp task:
gulp.task('iconfont', function(){
gulp.src(['assets/icons/*.svg'])
.pipe(iconfont({
fontName: 'icon-font', // required
appendUnicode: true, // recommended option
normalize: true,
centerHorizontally: true,
fontHeight: 100,
formats: ['ttf', 'eot', 'woff'],
}))
.on('glyphs', function(glyphs, options) {
console.log(glyphs, options);
})
.pipe(gulp.dest('assets/fonts/'));
});
As the appendUnicode option is set to true, I can see it at the beggining of my svg file name, for example uEA02-calendar.svg.
However, if I try to use it on my css file:
.calendar:before {
content: "uEA02";
speak: none;
font-style: normal;
font-weight: normal;
font-family: "icon-font"; }
what I see is the text uEA02 instead of my icon. I've checked and the font is loading, I don't know what could I be missing here?
I usually pair gulp-iconfont with gulp-iconfont-css. This additional package exports a stylesheet with the appropriate entities binded to a class. You can export pre-processed css or vanilla css.
Here's my gulp task.
var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');
var glyphFontName = 'icon';
var stream = gulp.src('resources/assets/glyph/*.svg')
.pipe(iconfontCss({
fontName: glyphFontName,
path: 'node_modules/gulp-iconfont-css/templates/_icons.scss',
targetPath: '../../resources/sass/generated/' + glyphFontName + '.scss',
fontPath: '../fonts/',
cssClass: 'i',
centerHorizontally: true
}))
.pipe(iconfont({
fontName: glyphFontName,
formats: [
'ttf',
'eot',
'woff',
'woff2'
],
}))
.pipe(gulp.dest('public/fonts/'));
return stream;
You simply need to escape the unicode string with a backslash (\).
In your CSS just write:
.calendar:before {
content: "\EA02";
speak: none;
font-style: normal;
font-weight: normal;
font-family: "icon-font";
}
You need to reformat the unicode from within the function you're passing to the "on glyphs" event. Otherwise the unicode will be lost in templating.
I'd suggest something like this:
.on('glyphs', function(glyphs, options) {
glyphs = glyphs.map((glyph) => {
...glyph,
unicode: glyph.unicode[0].codePointAt(0).toString(16).toUpperCase()
});
console.log(glyphs, options);
})
Can't take credit for this solution - found the answer in this post