আপনি কি এমন সমস্যা দেখছেন:
– ব্রাউজার বলছে “Refused to load the font because it violates the Content Security Policy”?
– আপনার বাংলা/English custom font (Poppins, Inter, SolaimanLipi, etc.) local machine এ কাজ করে, but live server এ গেলে fallback generic font দেখাচ্ছে?
– Header মিসঅলাইন, button ভাঙা, whole UI weird লাগছে?
এইটা হচ্ছে classic Font Not Loading (CSP) issue — খুব common in Bangladesh এখন, specially যারা CDN থেকে font লোড করে (Google Fonts, BunnyCDN, self-hosted CDN, S3, Cloudflare R2), অথবা যাদের সাইটে নতুন security header সেট করা হয়েছে by hosting team, cPanel hardening, Cloudflare WAF, বা নতুন developer.
Good news: এটা permanent fix করা যায় নিরাপদভাবে, without breaking site security.
আজকে আমরা full breakdown করব, step by step, Bangla + English mix এ, যেন আপনি নিজেই বুঝতে পারেন কী হচ্ছে, কীভাবে ঠিক করতে হবে, আর কবে professional help দরকার from BD IT CENTER (Top-Rated Web Development Company in Bangladesh এবং Best Web Hosting in Bangladesh – high security, BDIX speed, instant support).
সহজ ভাষায়: CSP = Content Security Policy.
এটা একটা security layer যেটা বলে দেয় ব্রাউজারকে:
“আমার সাইটে এইসব জিনিস শুধু এইসব জায়গা থেকে লোড করার অনুমতি আছে।”
উদাহরণ:
style-src বলে কোন কোন domain থেকে CSS আসবে
font-src বলে কোন domain থেকে font file (.woff, .woff2, .ttf) আসবে
img-src for images, script-src for JS ইত্যাদি
এখন ধরুন আপনার সাইটে এই header আছে:
Content-Security-Policy: font-src 'self';
মানে: “only allow fonts from আমার নিজের domain.”
এর মানে কী?
– আপনার domain: example.com allowed
– কিন্তু fonts.gstatic.com (Google Fonts) not allowed
– cdn.mycustomcdn.com not allowed
Result: Font load fail.
Browser তখন Console এ লাল error দেয়:
Refused to load the font 'https://fonts.gstatic.com/s/poppins/v20/...' because it violates the following Content Security Policy directive: "font-src 'self'".
So basically, আপনি ভুল না, browser ভুল না — policy সেটিং mismatch.
চলুন দ্রুত checklist:
১. UI suddenly আলাদা লাগছে?
– Text bold / thin mismatch
– বাংলা ফন্ট ভেঙে গেছে
– Menu item গুলো line break নিচ্ছে
– Header / Navbar height বেড়ে গেছে
এগুলো বড় signal যে fallback font চলছে।
২. শুধু live server এ সমস্যা, localhost এ না?
এটাও CSP সিগন্যাল। Localhost usually CSP enforce করে না।
৩. Inspect → Console tab → CSP error line আছে?
যদি থাকে Content-Security-Policy / font-src word, then হ্যাঁ, এটা CSP issue.
৪. Network tab এ font request status = (blocked:csp)?
তাহলে ১০০% confirm.
👉 যদি এই চারটা match করে, তাহলে আপনি right article এ আছেন।
বাংলাদেশি ওয়েবসাইটগুলোতে নিচের কারণে এই সমস্যা খুব কমন:
Cloudflare বা server hardening এর পর
Hosting provider security বাড়ানোর জন্য strict CSP header দিয়ে দেয়। Font whitelist করা হয় না।
Developer শুধু style-src allow করেছে, কিন্তু font-src ভুলে গেছে
New devs think Google Fonts মানে শুধু <link href="...fonts.googleapis.com..."> allow করলেই হবে। Reality: CSS file আসে fonts.googleapis.com থেকে, কিন্তু actual font files আসে আলাদা ডোমেইন fonts.gstatic.com থেকে। দুইটা আলাদা allow করতে হবে।
CDN / asset moved to subdomain
আপনি static প্রজেক্ট shift করেছেন static.example.com এ, কিন্তু CSP এখনো শুধু example.com allow করছে।
Result: font from static.example.com blocked.
WooCommerce / Theme / Page Builder update
Elementor / custom theme নতুন করে @font-face inject করে অন্য CDN থেকে font টেনে আনে — CSP জানে না, block করে।
Self-hosted font কিন্তু wrong MIME বা CORS সমস্যা না, pure CSP
অনেকে ভাবে এটা CORS, কিন্তু আসলে না। CORS আলাদা জিনিস। CSP আলাদা।
CORS বলে “কে রিকোয়েস্ট করতে পারবে”, CSP বলে “কোথা থেকে লোড করতে পারবে।”
এখন আমরা main কাজটায় যাই: কিভাবে আপনি whitelist করবেন যেন ব্রাউজার নিরাপদ ভাবে font লোড করে।
Chrome DevTools → Network tab → Filter: fonts
আপনি দেখবেন font URL যেমন:
https://fonts.gstatic.com/s/poppins...
https://cdn.yoursitecdn.com/assets/fonts/Inter.woff2
/assets/fonts/solaimanlipi.woff2 (means self hosted)
এই ডোমেইনগুলোর নাম লিখে রাখুন। এইগুলোকেই আমরা CSP তে allow করব।
font-src আপডেট করুনTypical secure-but-working CSP could look like this:
Content-Security-Policy: default-src 'self'; font-src 'self' https://fonts.gstatic.com https://cdn.yoursitecdn.com data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; script-src 'self'; img-src 'self' data: blob:; connect-src 'self';
ব্যাখ্যা করি:
font-src 'self' https://fonts.gstatic.com https://cdn.yoursitecdn.com data:;
→ আপনার সাইটকে বলে দেয়: আমি আমার নিজের ডোমেইন, Google Fonts font CDN, আর আমার CDN — সবগুলা থেকে font নিতে পারি।
→ data: লাগবে যদি inline base64 encoded webfont serve করেন (কিছু builder that's common)।
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
→ Google Fonts এর CSS allow করছে। Bangladesh এ অনেক theme / Elementor inline style জেনারেট করে, এজন্য 'unsafe-inline' প্র্যাক্টিক্যালি দরকার পড়ে। Without it অনেক layout immediately ভেঙে যাবে।
→ হ্যাঁ, 'unsafe-inline' security কমায় একটু, কিন্তু realistic WordPress / WooCommerce / Elementor সাইটে এটা ছাড়া site instantly break করবে.
→ আমরা BD মার্কেটের বাস্তব solution দিচ্ছি, pure academic না.
এই header আপনি ৩ জায়গায় সেট করতে পারেন:
Apache (.htaccess)
Nginx config (server block)
Cloudflare → Security → Page Rules / Transform Rules / Response headers
যদি আপনার hosting cPanel / Apache based হয় (Bangladesh এ বেশিরভাগ shared hosting এটাই), root .htaccess এ যোগ করুন:
<IfModule mod_headers.c> Header set Content-Security-Policy "default-src 'self'; font-src 'self' https://fonts.gstatic.com https://cdn.yoursitecdn.com data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; script-src 'self'; img-src 'self' data: blob:; connect-src 'self';" </IfModule>
⚠ Important:
এক লাইনে লিখবেন (no line breaks) কারণ কিছু server linebreak পছন্দ করে না।
আপনার আসল CDN domain বসাবেন https://cdn.yoursitecdn.com এর জায়গায়।
যদি আপনি multiple subdomains ব্যবহার করেন (e.g. static.example.com, assets.example.com) সবগুলো font-src এ যোগ করুন।
If you’re on VPS / BDIX hosting / LiteSpeed Enterprise / Nginx Reverse Proxy:
add_header Content-Security-Policy "default-src 'self'; font-src 'self' https://fonts.gstatic.com https://cdn.yoursitecdn.com data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; script-src 'self'; img-src 'self' data: blob:; connect-src 'self';";
Then reload Nginx.
অনেক বাংলাদেশি ecommerce এখন Cloudflare free/pro ব্যবহার করে speed আপ করার জন্য।
সেখানে আপনি Response Header rules দিয়ে CSP inject করতে পারেন।
High-level process:
Cloudflare Dashboard → Rules → Transform Rules → HTTP Response Header Modification
Add Header → Name: Content-Security-Policy
Value: (same string as above)
Scope: আপনার মেইন ডোমেইন / path.
এইভাবে আপনি origin server touch না করেও fix করতে পারবেন।
Why this matters: অনেক সময় corporate bank / govt firewall থেকে Google Fonts ব্লক হয়।
যদি আপনার সাইট bank / university / govt office ক্লায়েন্ট টার্গেট করে, আপনি চাইবেন zero external calls।
Process:
Google Fonts → Download the family
Put .woff2 in /assets/fonts/
Add CSS:
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
এখন CSP simple হয়ে যায়:
Content-Security-Policy: default-src 'self'; font-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self';
Speed up (BDIX hosting) + No third-party dependency + Lower legal/privacy risk.
👉 BD IT CENTER এটা প্র্যাক্টিক্যালি করে দেয় অনেক ক্লায়েন্টের জন্য: আমরা আপনার ব্যাবহৃত font full locally host করে দেই, so even if Google Fonts slow or blocked, আপনার UI stays pixel perfect for Bangladesh users.
Website Error Fixing – এখানে আপনি দেখতে পারবেন আমরা আর কী কী ধরনের bug live সাইটে ফিক্স করি (layout break, mixed content, CSP, iframe block, etc.).
অনেক hosting company শুধু বলে: “Security বাড়ালাম ✅”
But আপনার homepage এখন আর brand মতো দেখাচ্ছে না ❌
Client ভাবে আপনি cheap developer 😞
Reality:
– CSP দরকার, কারণ এটা XSS, data injection, malicious CDN block করে।
– কিন্তু CSP এমনভাবে লিখতে হবে যেন legit fonts, styles, scripts load করতে পারে।
Professional CSP মানে “deny all” না।
Professional CSP মানে “allow exactly what you use, block the rest”.
BD IT CENTER এই ব্যালেন্স maintain করে:
আমরা আপনার site audit করে দেখি কোন domain থেকে আসলেই asset লোড হয়
তারপর আমরা custom CSP হেডার deploy করি
তারপর আমরা live browser test করি (Chrome, Firefox, Safari, Android webview)
তারপর আমরা Lighthouse + SEO recheck করি যাতে CLS বা layout shift না বাড়ে
এটা হলো production grade fix – শুধু গুগলে কোনো কোড কপি করে paste না করে, আসল brand look & conversion protect করা।
আপনি ভাবতে পারেন “একটা ফন্ট লোড হচ্ছে না, তাতে SEO কেন?”
কারণ:
CLS (Cumulative Layout Shift) বেড়ে যায়
যখন fallback font প্রথমে render হয়, পরে correct font লোড হলে টেক্সট রিসাইজ হয়, layout shift হয়।
Google এর Core Web Vitals এটাকে negative সিগন্যাল হিসাবে ধরে। CLS score খারাপ মানে ranking drop হতে পারে for “money keywords” in Bangladesh search market।
Brand Trust কমে
Ecommerce user (specially Bangladesh COD buyer) খুব sensitive visual trust এ।
ফন্ট mismatch, alignment off — user ভাবে “এটা কি fake দোকান?” → Bounce → Lower dwell time → Lower engagement metric → Negative for SEO.
Accessibility / Readability
Bangla webfont না লোড হলে অনেক সময় Unicode fallback হয় যা মোবাইলে unreadable দেখায়। User পড়ে না → pogo stick back to SERP → Google notices high bounce for that keyword.
In short: Font CSP issue is not “just design”. এটা directly আপনার ব্যবসার conversion আর organic ranking এ impact করে Bangladesh market-এ.
BD IT CENTER কীভাবে চার্জ করে এই ধরণের কাজের জন্য?
Simple CSP / font-src whitelist only (no other issues):
Low one-time service fee, কারণ এটা quick audit + header fix.
Complex site (multiple subdomains, CDN, Cloudflare Rules, WooCommerce, Elementor custom fonts, etc.):
Slightly higher, কারণ এখানে আমরা break না করে fix করি (checkout, pixel tracking, analytics সব ঠিক রেখে) এবং আমরা proof দিয়ে দিই যে আপনার Core Web Vitals degrade হয়নি।
Full Security Hardening Package (CSP + HSTS + X-Frame-Options + X-Content-Type-Options + Permissions-Policy ইত্যাদি):
এটাই নিতে ভালো যদি আপনি bank / govt / startup funding / investor-ready pitch deck দেখাচ্ছেন। এখানে আমরা আপনার সাইটকে enterprise-grade করে দিই, এবং এটাতে আপনি ভবিষ্যতে বড় ক্লায়েন্টকে বলতে পারবেন “yes, we’re security-aware”.
Bottom line: আমরা চেষ্টা করি Bangladesh reality অনুযায়ী price রাখতে — যেন উদ্যোক্তা, local ecommerce owner, coaching center, news portal, job portal সবাই afford করতে পারে।
Interested? → Just ping BD IT CENTER live.
আমরা শুধু bug ফিক্স করি না, আমরা আপনার in-house team (junior dev, আপনার ভাই/বন্ধু যে সাইট ম্যানেজ করে, বা freelancer) কে train করে দিতে পারি:
কিভাবে DevTools দিয়ে CSP error ধরবে
কিভাবে কোন domain allow করতে হবে বুঝবে
কিভাবে ভুল করে পুরো * (wildcard allow all) দিয়ে সাইট insecure করে ফেলবে না
কিভাবে নিরাপদভাবে Google Fonts locally host করবে
কিভাবে Lighthouse এ CLS চেক করবে after font change
এই training বাংলা + English mix এ দেয়া হয় so team easily বুঝে।
আমাদের Web Development service details দেখুন:
Web Development
Custom build, redesign, migration, CSP/security hardening সব covered।
আর যদি আপনি নির্দিষ্ট টার্গেট type চান:
আপনার Shopify-styled ecommerce dream? দেখুন Ecommerce Websites
Corporate company profile site? Business Website
Online newspaper / সংবাদপত্র? News Website
Circular / চাকরি? Job Portal
Personal branding / কাজের portfolio? Portfolio Website
Affiliate or review content? Affiliate Marketing Website
International dropshipping model? Dropshipping Website
সম্পূর্ণ কাস্টম logic দরকার? Custom website development
SaaS / dashboard / portal idea? Web applications
Already live site এ সমস্যা? Website Error Fixing
সব লিঙ্কই আপনার জন্য internal backlinks, যা Google কে signal দেয় আপনার site একটা শক্ত, well-structured service hub — আরও plus point for SEO in Bangladesh.
খুব রিয়াল স্টোরি Bangladesh এ:
অনেক সময় CSP tighten করা হয় কারণ সাইটে আগেও malware ছিল।
Hosting provider ভাবে “script-src খুব strict করে দিলেই solved”. কিন্তু তারা font-src আপডেট করে না। Result: fonts break.
BD IT CENTER যা করে:
আমরা প্রথমে malware scan করি (specially WordPress / WooCommerce / nulled theme case)
কোড ক্লিন করি
তারপর security header দেই
তারপর আমরা নিশ্চিত করি যে আপনার frontend ভাঙবে না
এটা গুরুত্বপূর্ণ: আপনি যদি শুধু font ঠিক করেন কিন্তু malware রেখে দেন → আপনার domain আবার blacklist হতে পারে বিজ্ঞাপন প্ল্যাটফর্মে, অথবা ব্রাউজার “Deceptive site ahead” দেখাতে পারে ভবিষ্যতে।
So CSP fix ideally comes with security check, not just blind whitelist.
অনেক agency শুধু email ticket এ কথা বলে, যার মানে আপনি যখন টাকা হারাচ্ছেন সেই সময়ে কেউ ধরে না।
BD IT CENTER: আপনি বাংলায় কথা বলে বলতে পারবেন,
“ভাই, আমার font আসতেছে না, headerটা ডাবল হাইট হইয়া গেছে।”
We respond in normal human tone, not শুধু টেকনিক্যাল ইংরেজি jargon।
Business-owner friendly.
১. Chrome DevTools → Console
যদি দেখেন Refused to load the font ... because it violates the following Content Security Policy... → হ্যাঁ, CSP issue.
২. Network tab → font request status
যদি (blocked:csp) → whitelist দরকার।
৩. আপনার CSP header কে দেখবেন কিভাবে?
Visit site → Right click → Inspect → Network tab → Reload → Click main document (yourdomain.com) → Headers → Response Headers → Find Content-Security-Policy.
৪. ওই হেডার কপি করে রাখুন।
তারপর উপরে দেখানো মতো font-src এ required domains add করুন।
৫. Fix করলেন? আবার Reload with hard refresh (Ctrl+F5).
Error গেল? Done.
না গেলে? এটা অন্য header layer (Cloudflare বা Nginx) থেকে serve হচ্ছে। এখানেই অনেকের হেডেক শুরু হয়, আর এখানেই আমরা ঢুকি 😌
যদি আপনি এতদূর follow করেও solution না পান, সেটা normal. কারণ কখনো কখনো multi-layer CSP থাকে (origin server + proxy + CDN)। এটা খুব common এখনকার Bangladesh SaaS / news portal architecture এ।
1. আমরা শুধু থিম ইনস্টল করি না — আমরা production-grade security দেই
Most freelancer will say “I fixed the font” কিন্তু তারা পুরো font-src * দিয়ে দিবে, যা basically সবাইকে allow করে। এটা দেখতে কাজ করে কিন্তু খুব risky.
2. আমরা Bangladesh context বুঝি
– BDIX optimization
– Slow mobile network reality
– Govt office firewall
– University lab browser restriction
– Bangla font fallback problem
3. আমরা আপনার Brand UI protect করি
Your typography = আপনার ব্র্যান্ডের মুখ। এটা ভেঙে গেলে আপনার business cheap দেখায়।
আমরা সেটা হতে দেই না.
4. Affordable & fast communication
High-level fancy bill না। আপনি বুঝবেন আপনি কীসের জন্য pay করতেছেন।
আমাদের ক্লায়েন্টরা সাধারণত যে ফিডব্যাক দেয়, তার common themes:
“Brother, আগে আমার ecommerce সাইটে text হঠাৎ মোটা/পাতলা হয়ে যেত, এখন সব consistent।”
“আমার news portal bank network থেকে আগে ভাঙা দেখাতো, এখন ঠিকভাবে Bangla ফন্ট লোড হয়।”
“আমার investor demo ছিল, font না লোড হওয়ায় UI cheap লাগত। BD IT CENTER same day ঠিক করে দিল।”
“Header আগে দুই লাইন হয়ে যেত মোবাইলে। এখন আর হয় না, bounce rate কমছে, ads revenue বাড়ছে।”
These are exactly the pains আপনি এখন ফেস করছেন most likely.
প্রশ্ন: শুধু Google Fonts allow করলেই হবে?
উত্তর: অনেক সময় হবে না, কারণ আপনার theme অন্য CDN থেকেও icon font (Font Awesome, custom icon set) লোড করতে পারে। সব source whitelist করতে হবে, না হলে কিছু icon এখনো square box হিসেবে দেখাবে।
প্রশ্ন: আমি কি একদমই 'unsafe-inline' মুছে ফেলতে পারবো?
উত্তর: Theoretically হ্যাঁ, practically না যদি আপনি WordPress + Elementor + WooCommerce চালান। Inline style ছাড়া অনেক frontend ভেঙে যাবে। আমরা চাইলে ধীরে ধীরে refactor করে inline style reduce করতে পারি future roadmap এ, কিন্তু সেটা আলাদা প্রজেক্ট।
প্রশ্ন: CSP ঠিক করলে কি আমার সাইট হ্যাক-প্রুফ?
উত্তর: না। CSP is ১টা লেয়ার মাত্র। আপনি এখনো malware, weak password, nulled plugin, outdated theme, exposed /wp-admin রাখতে পারেন। কিন্তু CSP attack surface কমায় – এবং এটা Google Chrome এর কাছে trust signal।
প্রশ্ন: আমি কি এটা নিজে ঠিক করতে পারবো?
উত্তর: অনেক ক্ষেত্রে পারবেন, আর উপরে যে header snippets দিলাম সেটা দিয়েই পারবেন। কিন্তু যদি আপনি multiple CDN, Cloudflare, reverse proxy use করেন বা আপনি already একটা live high-traffic ecommerce চালাচ্ছেন – then please test on staging first অথবা আমাদের দিয়ে audit করান যেন checkout/cart না ভাঙে।
প্রশ্ন: এটা করলে আমার SEO ranking বাড়বে নাকি?
উত্তর: Indirectly হ্যাঁ. কারণ CLS কমবে, bounce কমবে, trust বাড়বে. আর এগুলা সবই Google এর কাছে positive behavior signal.
যদি আপনার ওয়েবসাইটে “Font not loading”, “CSP blocked font”, “navbar suddenly ugly”, “Bangla text broken in live but fine in localhost” এই টাইপের সমস্যা থাকে — এটা শুধু design bug না, এটা business risk.
কারণ:
আপনার brand look নষ্ট হচ্ছে
আপনার conversion কমছে
আপনার SEO Core Web Vitals নষ্ট হচ্ছে
আপনার ক্লায়েন্ট/ইনভেস্টর ভাবছে সাইটটা amateur
এই জিনিস Bangladesh context এ ফিক্স করার জন্য আপনি দুইভাবে যেতে পারেন:
নিজে চেষ্টা করুন উপরের CSP guide ব্যবহার করে (font-src এ আসল domains allow করুন, তারপর আবার চেক করুন CLS)।
অথবা সরাসরি BD IT CENTER কে বলুন আপনার লাইভ সাইট audit করে, secure CSP সেট করতে, font load restore করতে, আর একই সাথে malware / injected script আছে কিনা চেক করতে।
BD IT CENTER হলো একটি Top-Rated Web Development Company in Bangladesh. আমরা শুধু ওয়েবসাইট বানাই না, আমরা সেটাকে safe, fast, এবং branded রাখি। আমরা Bangladesh-এর জন্য optimized Best Web Hosting in Bangladesh ও দিয়ে থাকি – BDIX speed, high security header, realtime support, বাংলায় যোগাযোগ।
আপনার সাইট already live? সমস্যা already চলছে?
👉 ভিজিট করুন Website Error Fixing
👉 অথবা যদি নতুন সাইট চান একদম clean এবং security-first build সহ, দেখুন আমাদের Web Development services (Ecommerce, Business, News Portal, Job Portal, Portfolio, Affiliate, Dropshipping, Custom Web App – সব প্রস্তুত লিঙ্ক উপরে আছে)।