[{"data":1,"prerenderedAt":677},["ShallowReactive",2],{"quirekit-doc:\u002Fen\u002Fclassic\u002Ffonts":3,"quirekit-source:classic\u002Ffonts\u002Fapplication.ts":318,"mdc-dk5k8a-key":319},{"id":4,"title":5,"body":6,"description":306,"extension":307,"keywords":308,"locale":309,"meta":310,"navigation":311,"order":312,"path":313,"section":314,"seo":315,"stem":316,"__hash__":317},"docs\u002Fclassic\u002Ffonts.en.md","Font loading and substitution",{"type":7,"value":8,"toc":300},"minimark",[9,13,18,34,38,91,106,120,124,142,161,178,182,188,268,271,275,282,289,296],[10,11,12],"p",{},"A name in the font toolbar does not mean the browser has that font. Missing fonts affect widths, wrapping and pagination. Choose explicit sources and distinguish saved font intent from what this device can render.",[14,15,17],"h2",{"id":16},"option-one-application-mounted-fonts","Option one: application-mounted fonts",[10,19,20,21,25,26,29,30,33],{},"For a fixed brand font or offline deployment, declare an accessible ",[22,23,24],"code",{},"@font-face"," in application CSS, wait for loading, then disclose its exact CSS family through ",[22,27,28],{},"mountedFamilies",". ",[22,31,32],{},"Application Serif"," is an example name, not a bundled font; replace it with your actual face.",[35,36],"docs-recipe",{"name":37},"classic\u002Ffonts\u002Fapplication",[39,40,46],"pre",{"className":41,"code":42,"filename":43,"language":44,"meta":45,"style":45},"language-ts shiki shiki-themes github-light github-light github-dark","const webFonts = await prepareApplicationFonts(host.ownerDocument)\nconst instance = createClassicEditor({ element: host, preset, document, webFonts })\n","Before creating Classic","ts","",[22,47,48,75],{"__ignoreMap":45},[49,50,53,57,61,64,67,71],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"sDD9d","const",[49,58,60],{"class":59},"sUNQB"," webFonts",[49,62,63],{"class":55}," =",[49,65,66],{"class":55}," await",[49,68,70],{"class":69},"sgQzM"," prepareApplicationFonts",[49,72,74],{"class":73},"sVPnS","(host.ownerDocument)\n",[49,76,78,80,83,85,88],{"class":51,"line":77},2,[49,79,56],{"class":55},[49,81,82],{"class":59}," instance",[49,84,63],{"class":55},[49,86,87],{"class":69}," createClassicEditor",[49,89,90],{"class":73},"({ element: host, preset, document, webFonts })\n",[10,92,93,94,29,99,101,102,105],{},"Use the host, Word preset and content from the ",[95,96,98],"a",{"href":97},"\u002Fen\u002Fclassic\u002Fquick-start","quick start",[22,100,28],{}," does not load CSS. ",[22,103,104],{},"webFonts: false"," neither loads missing fonts nor eliminates font differences.",[10,107,108,111,112,115,116,119],{},[22,109,110],{},"displayName"," labels a family; it cannot replace its exact ",[22,113,114],{},"family",". Configuring a source does not change content's font choice. Use installed ",[22,117,118],{},"setFontFamily(family)"," for the current selection. The document font theme belongs to canonical document configuration.",[14,121,123],{"id":122},"option-two-install-external-fonts-on-demand","Option two: install external fonts on demand",[10,125,126,129,130,133,134,137,138,141],{},[22,127,128],{},"webFonts"," accepts ",[22,131,132],{},"families",", ",[22,135,136],{},"catalogs"," and searchable ",[22,139,140],{},"sources",". Families disclose installable metadata. Catalogs resolve exact family names into complete manifests; sources provide search, paging and manifest resolution. A manifest includes version, faces, assets and license information, rather than just a display name or stylesheet URL.",[10,143,144,145,148,149,152,153,156,157,160],{},"After mounting, read ",[22,146,147],{},"instance.fontLibrary",". Subscribe to changes, then call ",[22,150,151],{},"install(family)"," after an explicit user action. Its Promise completes after browser registration and layout invalidation. ",[22,154,155],{},"previewFamily()"," previews without adding an imported-family record; ",[22,158,159],{},"importFamily()"," manages explicit import. Unsubscribe on exit\u002Flibrary replacement and recheck instance ownership after asynchronous work.",[10,162,163,164,133,167,133,170,173,174,177],{},"Supplying your own families\u002Fcatalogs replaces the default configuration; do not assume default sources remain. Control resource budgets through ",[22,165,166],{},"maxAssetBytes",[22,168,169],{},"maxConcurrentAssets",[22,171,172],{},"fetch"," and ",[22,175,176],{},"cache",".",[14,179,181],{"id":180},"understand-font-status","Understand font status",[10,183,184,187],{},[22,185,186],{},"instance.documentFontStatus"," describes the document body font:",[189,190,191,204],"table",{},[192,193,194],"thead",{},[195,196,197,201],"tr",{},[198,199,200],"th",{},"Field or status",[198,202,203],{},"Meaning",[205,206,207,218,228,238,248,258],"tbody",{},[195,208,209,215],{},[210,211,212],"td",{},[22,213,214],{},"requestedFamily",[210,216,217],{},"Logical family retained in content",[195,219,220,225],{},[210,221,222],{},[22,223,224],{},"renderedFamily",[210,226,227],{},"Selected concrete family, not a guarantee for every glyph",[195,229,230,235],{},[210,231,232],{},[22,233,234],{},"pending",[210,236,237],{},"Resolution or loading is in progress",[195,239,240,245],{},[210,241,242],{},[22,243,244],{},"available",[210,246,247],{},"Requested family is available",[195,249,250,255],{},[210,251,252],{},[22,253,254],{},"substituted",[210,256,257],{},"An explicit substitute is used while logical intent remains",[195,259,260,265],{},[210,261,262],{},[22,263,264],{},"unresolved",[210,266,267],{},"No concrete family has been confirmed",[10,269,270],{},"Do not silently rewrite content's family when substituting. Scripts and individual missing glyphs can still use glyph fallback, so one body-font status does not establish identical rendering throughout the document.",[14,272,274],{"id":273},"verify-layout-and-export","Verify layout and export",[10,276,277,278,281],{},"Built-in installation refreshes font metrics and layout. If your application loads CSS fonts after mounting, call the current ",[22,279,280],{},"instance.editor?.view.refreshFontMetrics()"," after readiness. Never refresh a discarded Core.",[10,283,284,285,288],{},"Cached assets, browser registration and exportable font bytes are different resources. ",[22,286,287],{},"fontLibrary.getInstallations()"," exposes completed installations. Local-only records contain no embeddable bytes, so browser availability does not guarantee embedded exports. Confirm resources and applicable rights for the selected export service.",[10,290,291,292,177],{},"Test first load, cache hits, offline behavior, failed downloads and mixed scripts. After readiness, inspect wrapping, page count and selection geometry, rather than only the font dropdown. See configuration types in the ",[95,293,295],{"href":294},"\u002Fen\u002Fclassic\u002Freference","instance reference",[297,298,299],"style",{},"html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":45,"searchDepth":77,"depth":77,"links":301},[302,303,304,305],{"id":16,"depth":77,"text":17},{"id":122,"depth":77,"text":123},{"id":180,"depth":77,"text":181},{"id":273,"depth":77,"text":274},"Connect application or external fonts and separate logical families, rendered faces and export resources.","md",null,"en",{},true,4,"\u002Fen\u002Fclassic\u002Ffonts","Classic development",{"title":5,"description":306},"classic\u002Ffonts.en","Fx-l33i4RmIm-qVI2YAEB8_TvGt4S74rDHfTOZAAJP4","import type { ClassicEditorWebFontOptions } from \"@quirekit\u002Fclassic-editor\";\n\n\u002F**\n * Waits for an application-owned @font-face before creating Classic.\n * @param owner - Browser document whose stylesheet already declares the face.\n * @returns Explicit mounted-family configuration without an external catalog.\n *\u002F\nexport async function prepareApplicationFonts(owner: Document): Promise\u003CClassicEditorWebFontOptions> {\n  const faces = await owner.fonts.load('16px \"Application Serif\"');\n  if (faces.length === 0) throw new Error(\"Application Serif has no registered @font-face.\");\n  return { families: [], catalogs: [], mountedFamilies: [{ family: \"Application Serif\", displayName: \"应用正文字体\" }] };\n}\n",{"data":320,"body":321},{},{"type":322,"children":323},"root",[324,672],{"type":325,"tag":39,"props":326,"children":328},"element",{"className":41,"code":327,"language":44,"meta":45,"style":45},"import type { ClassicEditorWebFontOptions } from \"@quirekit\u002Fclassic-editor\";\n\n\u002F**\n * Waits for an application-owned @font-face before creating Classic.\n * @param owner - Browser document whose stylesheet already declares the face.\n * @returns Explicit mounted-family configuration without an external catalog.\n *\u002F\nexport async function prepareApplicationFonts(owner: Document): Promise\u003CClassicEditorWebFontOptions> {\n  const faces = await owner.fonts.load('16px \"Application Serif\"');\n  if (faces.length === 0) throw new Error(\"Application Serif has no registered @font-face.\");\n  return { families: [], catalogs: [], mountedFamilies: [{ family: \"Application Serif\", displayName: \"应用正文字体\" }] };\n}\n\n",[329],{"type":325,"tag":22,"props":330,"children":331},{"__ignoreMap":45},[332,369,377,387,395,419,437,446,520,567,629,663],{"type":325,"tag":49,"props":333,"children":334},{"class":51,"line":52},[335,342,347,353,358,364],{"type":325,"tag":49,"props":336,"children":338},{"style":337},"--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583",[339],{"type":340,"value":341},"text","import",{"type":325,"tag":49,"props":343,"children":344},{"style":337},[345],{"type":340,"value":346}," type",{"type":325,"tag":49,"props":348,"children":350},{"style":349},"--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8",[351],{"type":340,"value":352}," { ClassicEditorWebFontOptions } ",{"type":325,"tag":49,"props":354,"children":355},{"style":337},[356],{"type":340,"value":357},"from",{"type":325,"tag":49,"props":359,"children":361},{"style":360},"--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF",[362],{"type":340,"value":363}," \"@quirekit\u002Fclassic-editor\"",{"type":325,"tag":49,"props":365,"children":366},{"style":349},[367],{"type":340,"value":368},";\n",{"type":325,"tag":49,"props":370,"children":371},{"class":51,"line":77},[372],{"type":325,"tag":49,"props":373,"children":374},{"emptyLinePlaceholder":311},[375],{"type":340,"value":376},"\n",{"type":325,"tag":49,"props":378,"children":380},{"class":51,"line":379},3,[381],{"type":325,"tag":49,"props":382,"children":384},{"style":383},"--shiki-default:#6A737D;--shiki-light:#6A737D;--shiki-dark:#6A737D",[385],{"type":340,"value":386},"\u002F**\n",{"type":325,"tag":49,"props":388,"children":389},{"class":51,"line":312},[390],{"type":325,"tag":49,"props":391,"children":392},{"style":383},[393],{"type":340,"value":394}," * Waits for an application-owned @font-face before creating Classic.\n",{"type":325,"tag":49,"props":396,"children":398},{"class":51,"line":397},5,[399,404,409,414],{"type":325,"tag":49,"props":400,"children":401},{"style":383},[402],{"type":340,"value":403}," * ",{"type":325,"tag":49,"props":405,"children":406},{"style":337},[407],{"type":340,"value":408},"@param",{"type":325,"tag":49,"props":410,"children":411},{"style":349},[412],{"type":340,"value":413}," owner",{"type":325,"tag":49,"props":415,"children":416},{"style":383},[417],{"type":340,"value":418}," - Browser document whose stylesheet already declares the face.\n",{"type":325,"tag":49,"props":420,"children":422},{"class":51,"line":421},6,[423,427,432],{"type":325,"tag":49,"props":424,"children":425},{"style":383},[426],{"type":340,"value":403},{"type":325,"tag":49,"props":428,"children":429},{"style":337},[430],{"type":340,"value":431},"@returns",{"type":325,"tag":49,"props":433,"children":434},{"style":383},[435],{"type":340,"value":436}," Explicit mounted-family configuration without an external catalog.\n",{"type":325,"tag":49,"props":438,"children":440},{"class":51,"line":439},7,[441],{"type":325,"tag":49,"props":442,"children":443},{"style":383},[444],{"type":340,"value":445}," *\u002F\n",{"type":325,"tag":49,"props":447,"children":449},{"class":51,"line":448},8,[450,455,460,465,470,475,481,486,491,496,500,505,510,515],{"type":325,"tag":49,"props":451,"children":452},{"style":337},[453],{"type":340,"value":454},"export",{"type":325,"tag":49,"props":456,"children":457},{"style":337},[458],{"type":340,"value":459}," async",{"type":325,"tag":49,"props":461,"children":462},{"style":337},[463],{"type":340,"value":464}," function",{"type":325,"tag":49,"props":466,"children":468},{"style":467},"--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0",[469],{"type":340,"value":70},{"type":325,"tag":49,"props":471,"children":472},{"style":349},[473],{"type":340,"value":474},"(",{"type":325,"tag":49,"props":476,"children":478},{"style":477},"--shiki-default:#E36209;--shiki-light:#E36209;--shiki-dark:#FFAB70",[479],{"type":340,"value":480},"owner",{"type":325,"tag":49,"props":482,"children":483},{"style":337},[484],{"type":340,"value":485},":",{"type":325,"tag":49,"props":487,"children":488},{"style":467},[489],{"type":340,"value":490}," Document",{"type":325,"tag":49,"props":492,"children":493},{"style":349},[494],{"type":340,"value":495},")",{"type":325,"tag":49,"props":497,"children":498},{"style":337},[499],{"type":340,"value":485},{"type":325,"tag":49,"props":501,"children":502},{"style":467},[503],{"type":340,"value":504}," Promise",{"type":325,"tag":49,"props":506,"children":507},{"style":349},[508],{"type":340,"value":509},"\u003C",{"type":325,"tag":49,"props":511,"children":512},{"style":467},[513],{"type":340,"value":514},"ClassicEditorWebFontOptions",{"type":325,"tag":49,"props":516,"children":517},{"style":349},[518],{"type":340,"value":519},"> {\n",{"type":325,"tag":49,"props":521,"children":523},{"class":51,"line":522},9,[524,529,535,539,543,548,553,557,562],{"type":325,"tag":49,"props":525,"children":526},{"style":337},[527],{"type":340,"value":528},"  const",{"type":325,"tag":49,"props":530,"children":532},{"style":531},"--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF",[533],{"type":340,"value":534}," faces",{"type":325,"tag":49,"props":536,"children":537},{"style":337},[538],{"type":340,"value":63},{"type":325,"tag":49,"props":540,"children":541},{"style":337},[542],{"type":340,"value":66},{"type":325,"tag":49,"props":544,"children":545},{"style":349},[546],{"type":340,"value":547}," owner.fonts.",{"type":325,"tag":49,"props":549,"children":550},{"style":467},[551],{"type":340,"value":552},"load",{"type":325,"tag":49,"props":554,"children":555},{"style":349},[556],{"type":340,"value":474},{"type":325,"tag":49,"props":558,"children":559},{"style":360},[560],{"type":340,"value":561},"'16px \"Application Serif\"'",{"type":325,"tag":49,"props":563,"children":564},{"style":349},[565],{"type":340,"value":566},");\n",{"type":325,"tag":49,"props":568,"children":570},{"class":51,"line":569},10,[571,576,581,586,591,596,601,606,611,616,620,625],{"type":325,"tag":49,"props":572,"children":573},{"style":337},[574],{"type":340,"value":575},"  if",{"type":325,"tag":49,"props":577,"children":578},{"style":349},[579],{"type":340,"value":580}," (faces.",{"type":325,"tag":49,"props":582,"children":583},{"style":531},[584],{"type":340,"value":585},"length",{"type":325,"tag":49,"props":587,"children":588},{"style":337},[589],{"type":340,"value":590}," ===",{"type":325,"tag":49,"props":592,"children":593},{"style":531},[594],{"type":340,"value":595}," 0",{"type":325,"tag":49,"props":597,"children":598},{"style":349},[599],{"type":340,"value":600},") ",{"type":325,"tag":49,"props":602,"children":603},{"style":337},[604],{"type":340,"value":605},"throw",{"type":325,"tag":49,"props":607,"children":608},{"style":337},[609],{"type":340,"value":610}," new",{"type":325,"tag":49,"props":612,"children":613},{"style":467},[614],{"type":340,"value":615}," Error",{"type":325,"tag":49,"props":617,"children":618},{"style":349},[619],{"type":340,"value":474},{"type":325,"tag":49,"props":621,"children":622},{"style":360},[623],{"type":340,"value":624},"\"Application Serif has no registered @font-face.\"",{"type":325,"tag":49,"props":626,"children":627},{"style":349},[628],{"type":340,"value":566},{"type":325,"tag":49,"props":630,"children":632},{"class":51,"line":631},11,[633,638,643,648,653,658],{"type":325,"tag":49,"props":634,"children":635},{"style":337},[636],{"type":340,"value":637},"  return",{"type":325,"tag":49,"props":639,"children":640},{"style":349},[641],{"type":340,"value":642}," { families: [], catalogs: [], mountedFamilies: [{ family: ",{"type":325,"tag":49,"props":644,"children":645},{"style":360},[646],{"type":340,"value":647},"\"Application Serif\"",{"type":325,"tag":49,"props":649,"children":650},{"style":349},[651],{"type":340,"value":652},", displayName: ",{"type":325,"tag":49,"props":654,"children":655},{"style":360},[656],{"type":340,"value":657},"\"应用正文字体\"",{"type":325,"tag":49,"props":659,"children":660},{"style":349},[661],{"type":340,"value":662}," }] };\n",{"type":325,"tag":49,"props":664,"children":666},{"class":51,"line":665},12,[667],{"type":325,"tag":49,"props":668,"children":669},{"style":349},[670],{"type":340,"value":671},"}\n",{"type":325,"tag":297,"props":673,"children":674},{},[675],{"type":340,"value":676},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",1793045225440]